ajax学习

jquery库实现ajax

function verify(){
    //1、获取文本框内容
    //js方法
    //document.getElementById("userName")  获取dom方法
    //jquery方法,id的选择器（#），class选择器（.）
    //jquery的方法返回的都是jquery的对象，可以在它上面继续执行其他jquery方法
    var jqueryObj = $("#userName");
    var userName = jqueryObj.val();

    //2、传送数据到Server
    //jquery方法
    $.get("AjaxServer?name="+userName,null,callback) ;
}

//回调函数
function callback(data){
    //3、接受server数据

    //4、动态显示返回数据
    var resultObj = $("#result");
    resultObj.html(data);
}

 

 

使用XMLHttpReque来进行Ajax异步数据交互

 

//使用XMLHttpReque来进行Ajax异步数据交互
var xmlhttp;
function verify(){
    //1、使用dom方式获取文本框内容
    var userName = document.getElementById("userName").value;
    //2、创建XMLHttpRequest对象
    if(window.XMLHttpRequest){
        //针对firefox，safari、opera，IE7+
        xmlhttp = new XMLHttpRequest();
        //针对某些版本的Mozill的浏览器
        if(xmlhttp.overrideMimeType){
            xmlhttp.overrideMimeType("text/xml");
        }
    }   else if(window.ActiveXObject){
        // 针对IE5、IE6、IE5.5
        //两个可以用于创建XMLHttpRequest的空间名称
        var activeName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
        for(var i=0;i<activeName.length; i++){
            try{
                xmlhttp = new ActiveXObject(activeName[i]);
                break;
            }catch(e){
            }
        }
    }
    if(!xmlhttp){
        alert("创建失败");
        return;
    }

    //3、注册回调函数
    //readystate一改变回调函数调用
    xmlhttp.onreadystatechange = callback;

    //4、设置连接信息
    xmlhttp.open("GET","AjaxServer?name="+userName,true);
    //POST请求方式的区别:设置http的请求头
    //xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    //发送内容在send中


    //5、发送数据，与server交互
    //同步方式下，send这句会在服务器数据回来后才执行完
    //异步方式下，send这句立即执行完
    xmlhttp.send(null);
}

function callback(){
    //6、接收响应数据
    //判断对象的状态是否交互完成
    if(xmlhttp.readyState == 4){
        //判断http的交互是否成功
        if(xmlhttp.status == 200){
            var responseText = xmlhttp.responseText;
            var divNode = document.getElementById("result");
            divNode.innerHTML = responseText;
        }
    }
}

 

 

xml格式数据交互

var xmlhttp;
function verify() {
    var userName = document.getElementById("userName").value;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
        if (xmlhttp.overrideMimeType) {
            xmlhttp.overrideMimeType("text/xml");
        }
    } else if (window.ActiveXObject) {
        var activeName = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
        for (var i = 0; i < activeName.length; i++) {
            try {
                xmlhttp = new ActiveXObject(activeName[i]);
                break;
            } catch (e) {
            }
        }
    }
    if (!xmlhttp) {
        alert("创建失败");
        return;
    }

    xmlhttp.onreadystatechange = callback;
    xmlhttp.open("GET", "AjaxXMLServlet?name=" + userName, true);
    xmlhttp.send(null);
}

function callback() {
    if (xmlhttp.readyState == 4) {
        if (xmlhttp.status == 200) {
            var domObj = xmlhttp.responseXML;
            if (domObj) {
                var messageNodes = domObj.getElementsByTagName("message");
                if (messageNodes.length > 0) {
                    var textNode = messageNodes[0].firstChild;
                    var responseMessage = textNode.nodeValue;
                    var divNode = document.getElementById("result");
                    divNode.innerHTML = responseMessage;
                } else {
                    alert("有问题了!" + xmlhttp.responseText);
                }
            } else {
                alert("有问题了!" + xmlhttp.responseText);
            }
        }
    }
}

 

jquery  xml格式数据交互

 

function verify(){
    var jqueryObj = $("#userName");
    var userName = jqueryObj.val();
    //javascript中一个简单对象的定义方法：
    //var obj = {name:"haha",age:12};
    $.ajax({
        type:"POST",
        url:"AjaxXMLServlet",
        data:"name="+userName,
        dataType:"xml",
        success:callback,
        error:handleError
    });
}

function handleError(XMLHttpRequest, textStatus, errorThrown){
     alert(textStatus);
}

function callback(data){

    //首先要把dom对象转换为jquery对象
    var jqueryObj = $(data);
    var message = jqueryObj.children();
    var text = message.text();
    var resultObj = $("#result");
    resultObj.html(text);
}

 

 解决XHR与图片缓存问题

IE对于相同的url默认从缓存读取

方法：添加时间戳

function convertURL(url){
    var timestamp = (new Date()).valueOf();
    if(url.indexOf("?")>=0){
        url = url + "&t=" + timestamp;
    }else{
        url = url + "?t=" + timestamp;
    }
    return url;
}

 

 

解决Ajax中文乱码

 

1、页面端做一次encodeURI：

 var url = "AjaxServer?name="+encodeURI(userName);

     服务器端：

String name = new String(old.getBytes("ISO8859-1"),"UTF-8");

 

 2、页面端做两次encodeURI：

 var url = "AjaxServer?name=" + encodeURI(encodeURI(userName));

 

      服务器端：

  String name = URLDecoder.decode(old,"UTF-8");

 

解决Ajax跨域访问问题

 

 代理服务器

 

 

传送Text的Servlet

 

public class AjaxServer extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        String old = request.getParameter("name");
//        String name = new String(old.getBytes("ISO8859-1"),"UTF-8");
        String name = URLDecoder.decode(old,"UTF-8");
        if(old == null || old.length() == 0){
            out.println("用户名不能为空");
        }else{
//            String name = old;
            if(name.equals("liaolitao")){
                out.println(name+"已经存在");
            }else{
                out.println(name+"尚未存在，可以注册");
            }
        }
    }
}

 

 

传送xml的Servlet

 

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/xml;charset=utf-8");
        PrintWriter out = response.getWriter();
        String old = request.getParameter("name");

        StringBuilder builder = new StringBuilder();
        builder.append("<message>");
        if(old == null || old.length() == 0){
            builder.append("用户名不能为空").append("<message>");
        }else{
            String name = old;
            if(name.equals("liaolitao")){
                builder.append(name+"已经存在").append("</message>");
            }else{
                builder.append(name+"尚未存在，可以注册").append("</message>");
            }
            out.println(builder.toString());
        }
    }