阳光博文 你的空间 知识的容器

AJAX原理与步骤



Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

 Ajax:Asynchronous javascript and xml,实现了客户端与服务器进行数据交流过程。使用技术的好处是:不用页面刷新,并且在等待页面传输数据的同时可以进行其他操作。


主要的属性:

readyState属性有五个状态值。

XMLHttpRequest对象的onreadystatechange方法用于,状态改变时要执行的方法,用来处理这个响应。
readyState的状态是:
  0 请求未初始化(open() 之前) ;【uninitialized,未初始化。已经创建了XMLHttpRequest对象但是未初始化。】
  1 请求已提出,正在装载 (调用 send() 之前) 【loading,send for request but not called .已经开始准备好要发送了】
  2 装载完毕,请求已发送(这里通常可以从响应得到内容头部) 【loaded, send called,headers and status are available。已经发送,但是还没有收到响应】
  3 交互中,请求处理中(响应中通常有部分数据可用,但是服务器还没有完成响应) 【interactive,downloading response,but responseText only partial set.正在接受响应,但是还不完整】
  4 请求已完成(可以访问服务器响应并使用它) 【completed,finish downloading.接受响应完毕】
所以当readyState等于4时,就表示一个完整的服务器响应已经收到了,接着,函数会检查HTTP服务器响应的状态值。当HTTP服务器响应的值为200时,表示状态正常。这时候才真正执行客户端要执行的操作。
读取从服务器返回过来的数据,有两种方式:
  1、http_request.responseText:以文本字符串的方式返回服务器的响应 ;服务器返回的响应文本。只有当readyState>=3的时候才有值,根据readyState的状态值,可以知道,当readyState=3,返回的响应文本不完整,只有readyState=4,完全返回,才能接受全部的响应文本。responseXML:response  as Dom Document object。响应信息是xml,可以解析为Dom对象。
  2、http_request.responseXML:以XMLDocument对象方式返回响应;

       status:服务器的Http状态码,若是200,则表示OK,404,表示为未找到。

       statusText:服务器http状态码的文本。比如OK,Not Found。

  主要的方法:

open(method,url,boolean):打开XMLHttpRequest对象。其中method方法有get,post,delete,put。若是查数据,从服务器中得到一定的数据,则使用get。若是直接提交到服务器中,更新一定的数据,则使用post;url是请求资源的地址。第三个参数表示是否使用异步。默认情况是true,因为Ajax的特点就是异步传送。若使用同步则false。异步和同步上述已经举例。

send(body):发送请求Ajax引擎,让Ajax引擎操作。其中发送的内容可以是需要的参数,若是没有参数,直接send(null)

  那如何使用Ajax技术?

首先,有客户端事件触发Ajax事件。

然后,创建xmlHttpRequest对象,根据浏览器不同,创建的xmlHttpRequest对象不同。用open调用,用send发送请求给Ajax引擎。

最后,执行完毕后,把结果返回给客户端。


创建xmlHttpRequest对象:

function createXMLHttpRequest() {
//表示当前浏览器不是ie,如ns,firefox
if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
 }
  客户端事件触发: 
   function validate(field){
   if(trim(field.value).length!=0)
   {
 //创建XMLHttpRequest
 createXMLHttpRequest() ;
 var url="user_validate.jsp?userId=" + trim(field.value)+"×tampt="+new Date().getTime();
 // alert(url);
 xmlHttp.open("GET", url, true);
 //方法地址。处理完成后自动调用,回调。
 xmlHttp.onreadystatechange=callback ;
 xmlHttp.send(null);//将参数发送到Ajax引擎
 } else{ document.getElementById("userIdSpan").innerHTML = ""; } 
 }

function callback(){
 
 alert(xmlHttp.readyState);
 if(xmlHttp.readyState==4){ //Ajax引擎初始化
 if(xmlHttp.status==200){ //http协议成功
 //alert(xmlHttp.responseText);
 document.getElementById("userIdSpan").innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>";
 }else
   {
    alert("请求失败,错误码="+xmlHttp.status);
   }   
 }
 }

意:

      onreadyStateChange事件,当readyState状态值发生改变就会触发此事件。

      其中,xmlHttpRequest提交http请求的过程中,readyState历经五个状态值(0,1,2,3,4),所以callback函数中的alert(xmlHttp.readyState)则会不断输出1,2,3,4。其中0状态不会输出,因为0状态的时候并不执行此事件。

PS:当时在eslipse默认web 浏览器中输出的readyState状态顺序一直是:1,3,4,2。当时很纠结,因为状态值含义的分析,结果应该是1,2,3,4。后来折腾半天,才发现是浏览器的问题。不同的浏览器,执行的结果是不同的。使用IE浏览器测试,结果是1,2,3,4。哈哈,真的只有想不到,没有搜不到的。



五、Ajax缺陷与不足
1、可能破坏浏览器后退按钮的正常行为;
2、使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中;
3、Ajax的无刷新重载,由于页面的变化没有刷新重载那么明显,所以容易给用户带来困扰——用户不太清楚现在的数据是新的还是已经更新过的;现有的解决有:在相关位置提示、数据更新的区域设计得比较明显、数据更新后给用户提示等;
4、一些手持设备(如手机、PDA等)现在还不能很好的支持Ajax。



Ajax相关技术及基本原理

1. XMLHttpRequest简介

XMLHttpRequest,是我们得以实现异步通讯的根本。最早在IE 5 中以ActiveX组件实现;最近,Mozilla 1.0Safari 1.2中实现为本地对象。XMLHttpRequest虽然不是W3C标准,但却得到了FireFoxSafariOperaKonquerorIE等绝大多数浏览器的支持。这就使得Ajax有了今天如火如荼的发展。

XMLHttpRequest进行异步通讯,首先必须用JavaScript创建一个XMLHttpRequest对象实例。创建XMLHttpRequest对象实例的代码清单如下所示:

var xmlHttp;

function createXMLHttpRequest(){

    if(window.ActiveXObject){

        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

    }

    else if(window.XMLHttpRequest){

        xmlHttp = new XMLHttpRequest();

    }

}

可以看出,创建XMLHttpRequest对象相当容易。首先,声明一个全局变量xmlHttp用来保存即将创建的XMLHttpRequest对象的引用;然后,在createXMLHttpRequest()方法中完成具体创建工作。因为IE与其他浏览器对XMLHttpRequest 对象的实现方法不同,因此在创建时,通过一个分支语句进行判断。如果window.ActiveXObject调用返回true,则证明为IE浏览器,那么就通过传递“Microsoft.XMLHTTP”给ActiveXObject()来创建XMLHttpRequest对象,否则就把XMLHttpRequest实现为本地JavaScript对象。XMLHttpRequest对象在不同浏览器上的实现是兼容的,所以可以用同样的方法访问XMLHttpRequest的方法和属性。

 

1  标准XMLHttpRequest方法

     

     

abort()

getAllResponseHeader()

getResponseHeader("Header")

open("method", "url")

send(content)

setRequestHeader("header", "value")

停止当前请求

HTTP请求的所有响应头部作为键/值对返回

返回指定首部的串值

建立对服务器的调用

向服务器发送请求

把指定首部设置为所提供的值

 

 

 

2  标准XMLHttpRequest属性

   

         

onreadystatechange

readyState

 

responseText

responseXML

status

statusText

每个状态改变都会触发这个事件处理器

请求的状态:0-未初始化,1-正在加载,2-已加载,3-交互中,4-完成

服务器的响应,表示为一个文本字符串值

服务器的响应,表示为一个XML

服务器的HTTP状态码

HTTP状态码的相应文本

2. 利用XMLHttpRequest对象发送简单请求

创建了XMLHttpRequest对象,并了解了XMLHttpRequest对象的方法和属性之后,让我们来看看怎样利用XMLHttpRequest对象发送简单的请求。利用XMLHttpRequest对象发送简单请求的基本步骤如下:

1)  创建XMLHttpRequest对象实例。

2)  设定XMLHttpRequest对象的回调函数,利用onreadystatechange属性。

3)  设定请求属性:设定HTTP方法(GETPOST);设定目标URL。利用open()方法。

4)  将请求发送给服务器。利用send()方法。

3. 利用DOM对服务器响应进行处理

前面已经设置了回调函数,回调函数正是用来处理服务器响应信息的。但是,别忘了我们的最终目的:解决页面完全刷新和缺乏交互性的问题。在服务器对我们的请求信息作出响应后,我们就得实现页面的无缝更新(就是无闪烁的更新信息)。要实现这一点,那么就不得不提到DOM了。

DOMDocument Object Model,文档对象模型,是以面向对象方式描述页面文档的对象模型。DOM中定义了,与平台和语言无关的,用来表示和修改文档所需的对象、以及这些对象的属性和方法。通过DOM,我们可以把页面上的数据和结构抽象成一个树型表示,进而可以通过DOM中定义的属性和方法对文档进行操作,如遍历、编辑等。

这样,服务器相应信息就可以通过DOM的方法和属性,动态的更新到页面的相应节点。

从而使用户感觉不到刷新过程的存在,提高了交互性。





在线咨询