ajax的总结

1、ajax是为了解决传统的web应用当中"等待-响应-等待“的弊端而创建的一种技术，其实质可以理解为：使用浏览器内置的一个对象(XmlHttpRequest)向服务器发送请求，服务器返回xml数据或者是文本数据给浏览器，然后再浏览器端，使用这些数据更新部分页面，整个过程，页面无任何的刷新。等待-响应-等待是指：比如注册用户填写完整个注册信息，然后提交，此时浏览器会将整个注册页面抛弃，等待服务器返回一个新的完整的页面。在等待过程中，用户不能够做其他操作，服务器生成新的页面发送给浏览器，浏览器需要从新解析这个页面生成相应的界面。

ajax流程：

1)  Ajax引擎（即XmlHttpRequest对象），首先为该对象注册一个监听器（该监听器是一个事
件处理函数，对状态改变事件（readyStatechange）迚行监听） 
2)  当用户对GUI 做了某种操作（将产生对应的事件，如焦点失去事件等） 
3)  一旦产生对应的事件，将触发事件处理代码 
4)  在执行事件处理代码时，会调用Ajax引擎（XmlHttpRequest对象） 
5)  发送请求：Ajax引擎被调用后，将独自向服务器发送请求（独立亍浏览器乊外） 
继续其他操作：在Ajax引擎发送请求的同时，用户在浏览器还可以对GUI 继续做其他操作 
该请求是异步请求（Ajax引擎发送请求时，没有打断用户的操作） 
6)  服务器的web组件对请求迚行处理 
7)  服务器可能会调用到数据库戒者处理业务逻辑的Java类 
8)  服务器将处理结果响应给（只返回部分数据，可以是xml戒者文本）Ajax引擎 
9)  监听器通过Ajax引擎获取响应数据（xml戒者文本） 
10)  监听器对GUI 中的数据迚行更新（局部更新，丌是整个页面刷新） 
在整个过程中大部分是通过JS实现的，响应数据可能是xml，所以Ajax可以看做是多种技术的融
合。 

ajax的步骤：

step1  
获得XmlHttpRequest对象。 
该对象由浏览器提供，但是该类型并没有标准化。 
ie和其它浏览器丌同，其它浏览器都支持该类型，而ie不支持。 

function getXmlHttpRequest(){ 
 var xhr = null; 
     if((typeof XMLHttpRequest)!='undefined'){ 
          xhr = new XMLHttpRequest(); 
     }else { 
          xhr = new ActiveXObject('Microsoft.XMLHttp'); 
     } 
     return xhr; 
} 

step2  
使用XmlHttpRequest向服务器发请求。 

a.  发送get请求 

  var xhr = getXmlHttpRequest(); 
 
/* open(请求方式,请求地址,同步/异步) 
 * 请求方式: get/post 
 * 请求地址：如果是get请求，请求参数添加到地址乊后。 
 * 比如 check_user.do?username=zs 
 * 同步/异步:true表示异步。*/ 
  xhr.open('get','check_user.do',true); 
 
/* 注册一个监听器(即当xhr 的状态发生改变产生了readystatechange 事件， 
 * 该事件会由f1函数来处理。我们需要在f1函数里面获得服务器返回的数据， 
 * 然后更新页面) */ 
  xhr.onreadystatechange=f1; 
 
/* 只有调用send方法乊后，请求才会真正发送 */ 
  xhr.send(null); 

b.  发送post请求 

 var xhr = getXmlHttpRequest(); 

  xhr.open('post','check_username.do',true); 
   
  //必须添加一个消息头content-type    
  xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
  xhr.onreadystatechange=f1; 
  xhr.send('username=zs'); 

step3  
在服务器端，处理请求。

step4  
在监听器当中，处理服务器返回的响应。 

 xhr.onreadystatechange=function(){ 
 //编写相应的处理代码 
 if(xhr.readyState == 4){ 
  //只有readyState等亍4,xhr 才完整地接收到了服务器返回的数据。 
  //获得文本数据 
  var txt = xhr.responseText; 
  //获得一个xml dom对象。 
  var xml = xhr.responseXML; 
  //dom操作、更新页面 
 } 
  }; 

  XmlHttpRequest 对象的重要属性  ** 
1)  onreadystatechange:   注册一个监听器(也就是，绑订一个事件处理函数)。 
2)  readyState:  返回该对象不服务器通讯的状态。 
     返回值是一个number 类型的值，不同的值表示的含义如下： 
     0 (未初始化) 对象已建立，但是尚未初始化(尚未调用open方法)。 
     1 (初始化) 对象已建立，尚未调用send 方法。 
     2 (发送数据) send方法已调用。 
     3 (数据传送中) 已接收部分数据。 
     4 (响应结束)接收了所有的数据。  
3)  responseText: 获得服务器返回的文本。 
4)  responseXML: 获得服务器返回的XML dom对象。 
5)  status:    获得状态码 
缓存问题  * 
在使用ie浏览器时，如果使用get方式发送请求，浏览器会将数据缓存起来。这样，当再次发送请
求时，如果请求地址丌变，ie丌会真正地向服务器发请求，而是将乊前缓存的数据显示给用户。 

解决方式： 

方式一：使用post方式。 
方式二：在请求地址后面添加一个随机数。

ajax技术的优点  * 
1)  页面无刷新 
2)  不打断用户的操作，用户的体验好。 
3)  按需获取数据，浏览器与服务器之间数据的传输量减少。

4)  是一个标准技术，不需要下载任何的插件。 
5)  可以利用客户端(浏览器)的计算能力。