AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
ajax在浏览器里运行,跟任何语言都没有任何关系。因为运行在浏览器,常需要使用JavaScript和XML进行控制和数据传输。
与传统的Web应用比较
传统的Web应用,提交的是整个表单,服务器接收并处理传来的表单,然后送回一个新的网页,但这个做法浪费流量,速度也慢。因为要提交的有时不是整个表单数据,所以提交过程中在前后两个页面中的大部分HTML是相同的。由于每次应用的沟通都需要向服务器发送请求,应用的回应时间就依赖于服务器的回应时间。这导致了用户界面的回应比本机应用慢得多。
与此不同,AJAX应用可以仅向服务器发送并取回必需的数据,它使用SOAP或其它一些基于XML的页面服务接口(接口),并在客户端采用JavaScript处理来自服务器的回应。这样在服务器和浏览器之间交换的数据大量减少(大约只有原来的5%),结果我们就能看到回应(服务器回应)更快的应用(结果)。同时很多的处理工作可以在发出请求的客户端机器上完成,所以Web服务器的处理时间也减少了。
使用Ajax的最大优点,就是用户体验大大提升,减少了用户的等待时间。ajax在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变过的信息。
-----------------------------------------------------------------------------------------------------------------------------------------
使用AJAX首先需要创建AJAX对象
- <spanstyle="font-size:18px;">
- varxmlHttp;
- functioncreateXMLHttpRequest(){
-
-
- if(window.XMLHttpRequest){
- xmlHttp=newXMLHttpRequest();
- }elseif(window.ActiveXObject){
- newActiveXobject("Microsoft.XMLHTTP");
-
- }
- </span>
然后是具体的调用方法,即在什么情况下触发异步执行:
functionvalidate(field){
- createXMLHttpRequest();
- varurl="test.jsp?text="+trim(field.value)+"&time="+newDate().getTime();
- xmlHttp.open("GET",url,true);
- //将方法地址复制给onreadystatechange属性
- xmlHttp.onreadystatechange=callback;
- //将设置信息发送到AJax引擎,get请求发送null即可
- xmlHttp.send(null);
- </span>
回调方法:
functioncallback(){
- //显示目前执行到的状态
- //alert(xmlHttp.readyState);
- if(xmlHttp.readyState==4){
- if(xmlHttp.status==200){
- //("请求成功!");
- alert(xmlHttp.responseText);
- }else{
- alert("请求失败,错误码="+xmlHttp.status);
- }
- </span>
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对象方式返回响应 (编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|