Ajax入门

理解同步交互和异步交互

举个例子：普通B/S模式(同步)       AJAX技术(异步)
       *  同步：

      提交请求->等待服务器处理->处理完毕返回  这个期间客户端浏览器不能干任何事。

       发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。  

       你现在传输，我要亲眼看你传输完成，才去做别的事 。

       *  异步： 

      请求通过事件触发->服务器处理（这时浏览器仍然可以作其他事情）->处理完毕。

       发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式 。

       你传输吧，我去做我的事了，传输完了告诉我一声 。  

什么是Ajax？

      Ajax被认为是(Asynchronous JavaScript and XML的缩写）。现在，允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax.

       Ajax并非一种新的技术，而是几种原有技术的结合体。它由下列技术组合而成: 

1.使用CSS和XHTML来表示。 

2. 使用DOM模型来交互和动态显示。 

3.使用XMLHttpRequest来和服务器进行异步通信。 

4.使用javascript来绑定和调用。

Ajax的工作原理

       AJAX采用异步交互过程。AJAX在用户与服务器之间引入一个中间媒介，从而消除了网络交互过程中的处理—等待—处理—等待缺点。
       用户的浏览器在执行任务时即装载了AJAX引擎。AJAX引擎用JavaScript语言编写，通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互。
       AJAX引擎允许用户与应用软件之间的交互过程异步进行，独立于用户与网络服务器间的交流。现在，可以用Javascript调用AJAX引擎来代替产生一个HTTP的用户动作，内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求可以交给AJAX来执行。 

       AJAX的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。

了解XMLHttpRequest

　   XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。

XMLHttpRequest属性有：

属性描述onreadystatechange 每次状态改变所触发事件的事件处理程序。responseText        从服务器进程返回数据的字符串形式。responseXML      从服务器进程返回的DOM兼容的文档数据对象。status                      从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）status Text 伴随状态码的字符串信息readyState              对象状态值,存有服务器响应的状态信息。
每当 readyState 改变时，onreadystatechange 函数就会被执行。

 readyState 属性可能的值：

  状态   描述    0  请求未初始化（在调用 open() 之前）    1  请求已提出（调用 send() 之前）    2  请求已发送（这里通常可以从响应得到内容头部）    3  请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）    4  请求已完成,此时可以通过responseXml和responseText获取完整的回应数据。 

　　但是，由于各浏览器之间存在差异，所以创建一个XMLHttpRequest对象可能需要不同的方法。这个差异主要体现在IE和其它浏览器之间。下面是一个比较标准的创建XMLHttpRequest对象的方法。

[javascript] view plaincopyprint?

1. /* 
2.  * 创建XMLHttpRequest对象 
3.  * */  
4. function ajaxFunction(){  
5.     var xmlHttp;  
6.     try { // Firefox, Opera 8.0+, Safari  
7.         xmlHttp = new XMLHttpRequest();  
8.     }   
9.     catch (e) { // Internet Explorer  
10.         try {  
11.             xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");  
12.         }   
13.         catch (e) {  
14.             try {  
15.                 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  
16.             }   
17.             catch (e) {  
18.                 alert("您的浏览器不支持AJAX！");  
19.                 return false;  
20.             }  
21.         }  
22.     }  
23.     return xmlHttp;  
24. }  

AJAX(客户端)开发步骤：

1.创建XMLHttpRequest对象

[javascript] view plaincopyprint?

1. var xmlHttp = ajaxFunction();  

2.接受服务器端的响应

[javascript] view plaincopyprint?

1. /* readyState 属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。*/  
2. xmlHttp.onreadystatechange = function(){  
3.     if(xmlHttp.readyState==4){  
4.         var data=xmlHttp.responseText;  
5.         alert("xmlHttp.responseText:"+data);  
6.     }  
7. }  

3.打开和服务器的连接

[javascript] view plaincopyprint?

1. /* 
2.  * bstrMethod: http方法，例如：POST、GET、PUT及PROPFIND。大小写不敏感。  
3.  * bstrUrl: 请求的URL地址，可以为绝对地址也可以为相对地址。  
4.  * varAsync[可选]:布尔型，指定此请求是否为异步方式，默认为true。如果为真，当状态改变时会调用onreadystatechange属性指定的回调函数。  
5.  * bstrUser[可选]:如果服务器需要验证，此处指定用户名，如果未指定，当服务器需要验证时，会弹出验证窗口。  
6.  * bstrPassword[可选]:验证信息中的密码部分，如果用户名为空，则此值将被忽略。  
7. */  
8. xmlHttp.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);  

4.发送请求到http服务器

[javascript] view plaincopyprint?

1. /* varBody:欲通过此请求发送的数据。 */  
2. xmlHttp.send(varBody);