ajax详解

1、ajax （Asynchronous Javascript And XML）

    谈到ajax技术的，我们关注最多的毫无疑问就是提升了用户的体验。而要正真想要去了解ajax的出现和原理还用明白下面的两个概，即什么是同步，什么是异步？

2、同步和异步

同步的概念来源于操作系统：不同进程为协同完成某项工作而在先后次序上调整（通过阻塞、唤醒等方式）。同步强调的是顺序性，谁先谁后；异步则不存在这种顺序性。同步：浏览器访问服务器请求，用户看得到页面刷新，重新发请求，等请求完，页面刷新，新内容出现，用户看到新内容，进行下一步操作。异步：浏览器访问服务器请求，用户正常操作，浏览器后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容。简单来说就是：向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果他自己会根据设定进行后续操作，与此同时，页面不会发生整页刷新的，进而提高了用户体验。

3、ajax的优缺点

1）优点：a、通过异步模式无刷新页面，在页面与服务器通信，提升了用户体验。        b、优化了浏览器和服务器之间的传输，减少了不必要的数据往返，减少了宽带占用。        c、ajax引擎在客户端进行，承担了一部分来自由服务器承担的工作，从而减少了服务器负载。        d、基础标准化并被广泛支持的技术，不需要下载插件或者小程序。2）缺点：        a、不能实时请求和响应服务器数据。        b、不支持浏览器回退功能。        c、不能提交对媒体数据，比如：图片、文本等。        d、对搜索引擎的支持比较弱。  

4、ajax实现过程

1.创建XMLHttpRequest对象，也就是创建一个异步调用对象2.创建一个新的Http请求，并制定该Http请求的方法，URL及验证信息。3.设置响应请求状态变化的函数。4.发送Http请求。5.获取异步调用返回的数据。6.使用javascript和dom实现局部刷新。

5、ajax原理和XMLhttpRequest对象

    ajax的原理简单来说就是通过XMLhttpRequest对象来向服务器发异步请求，从服务器获得数据，然后 用javascript来操作DOM而更新页面。    XMLhttpRequest是ajax的核心机制，这个对象的属性包括以下：    1.onreadystatechange 每次状态改变所触发事件的事件处理程序。    2.responseText  从服务器进程返回数据的字符串形式。    3.responseXML   从服务器进程返回的dom兼容的文档数据对象。    4.status        从服务器返回的数字代码，比如常见的404（未找到） 和 200（已就绪）    5.status Text   伴随状态码的字符串信息。    6.readyState     对象状态值。                    0；（未初始化）对象已建立，但是尚未初始化（尚未调用open方法）；                    1：（初始化）对象已建立，尚未调用send方法。                    2：（发送数据）send方法以调用，但是当前的状态及http头未知。                    3：（数据传送中）已接受部分数据，因为响应及http都不全，这时通过responseBody和responseText获取部分数据会出现错误。                    4：（完成）数据接收完毕，此时可以通过responseXml和responseText获取完整的回应数据。

6、创建XmlHttpRequest及测试代码如下（以get请求为例）：

1.创建XmlHttpRequest     function createXmlhttpRequest（）{         //非IE浏览器；        if（window.XMLHttpRequest）{            xmlHttp = new XMLHttpRequest();        }else if(window.ActiveXObject){            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");        }     }      2.客户端事件触发    function validate（field）{        if（trim（field.value).length !=0）{            createXmlhttpRequest（）;            var url ="user_validate.jsp?userId="+trim(field.value);            xmlHttp.opend("GET",url,true);            // 方法地址。处理完成后自动调用，回调。            xmlHttp.onreadystatechange=callback ;             xmlHttp.send(null);//将参数发送到Ajax引擎，参数可不写；        }else{             document.getElementById("userIdSpan").innerHTML = "";        }    }3.结果返回操作        function callback（）{            alert（xmlHttp.readyState）;            if(xmlHttp.readyState==4){ //ajax引擎初始化；                if(xmlHttp.status==200){  // http协议成功；                     //console.log(xmlHttp.responseText);                    document.getElementById("userIdSpan").innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>";                 }else{                        alert("请求失败，错误码="+xmlHttp.status);                 }                 }        }