浅析Ajax异步交互

Ajax(“Asynchronous Javascript And XML”)异步的JavaScript和XML。Google建议使用XMLHttpRequest对象来创建动态性非常强的web界面：当用户开始在Google的搜索框中键入字符时，JavaScript会把这些字符传送至服务器，服务器则返回一系列的（搜索）建议。

Ajax的核心API就是XMLHttpRequest,这是一个JavaScript对象，此对象已经在众多的浏览器中得以支持，不过在IE浏览器的不同版本中获取的方式还是有所不同的。

Ajax的基本操作流程
在JSP中添加如下JavaScript代码

    //1.创建XmlHttpRequest对象
    var xmlhttp = null;
        // 针对 Mozilla等浏览器的代码：
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest()
    } else if (window.ActiveXObject) {
        //针对老牌IE浏览器，IE6及以下版本的浏览器
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
    }

    //2.设置回调函数
    xmlhttp.onreadystatechange = function() {
            if(xmlhttp.readyState==4&&xmlhttp.status==200){
                document.write(xmlhttp.responseText);
            }
    };

    //3.准备向服务器端发送请求
    xmlhttp.open("GET", "http://localhost:8088/AjaxTest/ajax.action");//第三个参数是个boolean，表示是以同步的方式发送请求还是以异步的方式发送请求。默认是异步(true)

    //4.发送请求
    xmlhttp.send(null);

XmlHttpRequest对象在浏览器端向服务器端发送异步的请求,然后将服务器端的响应在回调函数加以处理。

XmlHttpRequest使用GET方式发送请求参数的时候在url后面拼接，如

xmlhttp.open("GET","${pageContext.request.contextPath}/ajax?name=fuyunwang");
xmlhttp.send(null);

XmlHttpRequest调用send方法使用POST方式发送请求参数的时候:

xmlhttp.open("POST","${pageContext.request.contextPath}/ajax1");
xmlhttp.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");
xmlhttp.send("name=Ajax?password=123");

XmlHttpRequest对象的基本属性:
1.readyState,表示XmlHttpRequest对象的状态，该对象共有5种状态，分别是0-4,其代表着不同的含义。

2.status,由服务器返回的 HTTP 状态代码，如 200 表示成功，而 404 表示 “Not Found” 错误。当 readyState 小于 3 的时候读取这一属性会导致一个异常。
3.responseXML和responseText,在回调函数中从这两个属性中获得服务器端的响应数据,当服务器端的响应是文本的时候用responseText接受数据，当服务器端的响应是xml的时候，用responseXML接受数据。

XmlHttpRequest对象的事件句柄
onreadystatechange:
每次 readyState 属性改变的时候调用的事件句柄函数。当 readyState 为 3 时，它也可能调用多次

XmlHttpRequest对象的方法
1.abort():
取消当前响应，关闭连接并且结束任何未决的网络活动。这个方法把 XMLHttpRequest 对象重置为 readyState 为 0 的状态，并且取消所有未决的网络活动。例如，如果请求用了太长时间，而且响应不再必要的时候，可以调用这个方法。
2.getAllResponseHeaders():
把 HTTP 响应头部作为未解析的字符串返回。如果 readyState 小于 3，这个方法返回 null。否则，它返回服务器发送的所有 HTTP 响应的头部。头部作为单个的字符串返回，一行一个头部。每行用换行符 “\r\n” 隔开。
3.getResponseHeader():
返回指定的 HTTP 响应头部的值。其参数是要返回的 HTTP 响应头部的名称。可以使用任何大小写来制定这个头部名字，和响应头部的比较是不区分大小写的。该方法的返回值是指定的 HTTP 响应头部的值，如果没有接收到这个头部或者 readyState 小于 3 则为空字符串。如果接收到多个有指定名称的头部，这个头部的值被连接起来并返回，使用逗号和空格分隔开各个头部的值。
4.setRequestHeader():
向一个打开但未发送的请求设置或添加一个 HTTP 请求。