AJAX

来源：互联网发布：水性木器漆品牌知乎编辑：程序博客网时间：2024/06/06 09:43

AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

ajax在浏览器里运行,跟任何语言都没有任何关系。因为运行在浏览器，常需要使用JavaScript和XML进行控制和数据传输。

与传统的Web应用比较

传统的Web应用，提交的是整个表单，服务器接收并处理传来的表单，然后送回一个新的网页，但这个做法浪费流量，速度也慢。因为要提交的有时不是整个表单数据，所以提交过程中在前后两个页面中的大部分HTML是相同的。由于每次应用的沟通都需要向服务器发送请求，应用的回应时间就依赖于服务器的回应时间。这导致了用户界面的回应比本机应用慢得多。

与此不同，AJAX应用可以仅向服务器发送并取回必需的数据，它使用SOAP或其它一些基于XML的页面服务接口（接口），并在客户端采用JavaScript处理来自服务器的回应。这样在服务器和浏览器之间交换的数据大量减少（大约只有原来的5%），结果我们就能看到回应（服务器回应）更快的应用（结果）。同时很多的处理工作可以在发出请求的客户端机器上完成，所以Web服务器的处理时间也减少了。

使用Ajax的最大优点，就是用户体验大大提升，减少了用户的等待时间。ajax在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。

-----------------------------------------------------------------------------------------------------------------------------------------

使用AJAX首先需要创建AJAX对象

var xmlHttp;function createXMLHttpRequest(){      //表示当前浏览器不是ie,如firefox等       if(window.XMLHttpRequest){         xmlHttp=new XMLHttpRequest();      }else if(window.ActiveXObject){         xmlHttp=new ActiveXobject("Microsoft.XMLHTTP");}

然后是具体的调用方法，即在什么情况下触发异步执行：

function validate(field){     createXMLHttpRequest();     var url="test.jsp?text="+trim(field.value)+"&time="+new Date().getTime();//使用时间戳，消除缓存     xmlHttp.open("GET", url, true);     //将方法地址复制给onreadystatechange属性      xmlHttp.onreadystatechange=callback; //注意是方法本身，不是结果，所以不能是callback（）               //将设置信息发送到AJax引擎,get请求发送null即可      xmlHttp.send(null);       }

回调方法：

function callback(){          //显示目前执行到的状态            //alert(xmlHttp.readyState);          if(xmlHttp.readyState==4){                if(xmlHttp.status==200){                        //("请求成功!");                        alert(xmlHttp.responseText）;//返回异步传输的文本结果                                }else{                        alert("请求失败,错误码="+xmlHttp.status);                }             } ｝

AJAX使用过程基本上是这三步。重点说明：

创建XMLHttpRequest 方法：

　　XMLHttpRequest 类首先由Internet Explorer以ActiveX对象引入，被称为XMLHTTP。后来Mozilla﹑Netscape﹑Safari 和其他浏览器也提供了XMLHttpRequest类，不过它们创建XMLHttpRequest类的方法不同。
　　对于Internet Explorer浏览器：
　　xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //3.0或4.0, 5.0
　　xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP");
　　xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");
　　由于在不同Internet Explorer浏览器中XMLHTTP版本可能不一致，为了更好的兼容不同版本的Internet Explorer浏览器，因此我们需要根据不同版本的Internet Explorer浏览器来创建XMLHttpRequest类，上面代码就是根据不同的Internet Explorer浏览器创建XMLHttpRequest类的方法。
　　对于Mozilla﹑Netscape﹑Safari等浏览器
　　创建XMLHttpRequest 方法如下：xmlhttp_request = new XMLHttpRequest();

发送请求

　　调用HTTP请求类的open()和send()方法，如下所示：
　　xmlhttp_request.open('GET', URL, true);
　　xmlhttp_request.send(null);
　　open()的第一个参数是HTTP请求方式—GET，POST或任何服务器所支持的您想调用的方式。按照HTTP规范，该参数要大写；否则，某些浏览器(如Firefox)可能无法处理请求。
　　第二个参数是请求页面的URL。
　　第三个参数设置请求是否为异步模式。如果是TRUE，JavaScript函数将继续执行，而不等待服务器响应。这就是"AJAX"中的"A"。False是很少用的，因为使用Ajax就是使用的一步模式。是false的话就没什么意义了。

服务器的响应
　　这需要告诉HTTP请求对象用哪一个JavaScript函数处理这个响应。可以将对象的onreadystatechange属性设置为要使用的JavaScript的函数名，如下所示：
　　xmlhttp_request.onreadystatechange =FunctionName;
　　FunctionName是用JavaScript创建的函数名，注意不要写成FunctionName()，当然我们也可以直接将JavaScript代码创建在onreadystatechange之后，也就是常说的匿名函数，例如：
　　xmlhttp_request.onreadystatechange = function(){
　　// JavaScript代码段
　　};
　　首先要检查请求的状态。只有当一个完整的服务器响应已经收到了，函数才可以处理该响应。XMLHttpRequest 提供了readyState属性来对服务器响应进行判断。
　　readyState的取值如下：
　　0 (未初始化)
　　1 (正在装载)
　　2 (装载完毕)
　　3 (交互中)
　　4 (完成)
　　所以只有当readyState=4时，一个完整的服务器响应已经收到了，函数才可以处理该响应。具体代码如下：
　　if (http_request.readyState == 4) { // 收到完整的服务器响应 }
　　else { // 没有收到完整的服务器响应 }
　　当readyState=4时，一个完整的服务器响应已经收到了，接着，函数会检查HTTP服务器响应的状态值。当HTTP服务器响应的值为200时，表示状态正常，已经调用到了，完成正常处理。

　　处理从服务器得到的数据
　　有两种方式可以得到这些数据：
　　(1) 以文本字符串的方式返回服务器的响应
　　(2) 以XMLDocument对象方式返回响应