Ajax的介绍

1. Ajax介绍

1.1 Ajax概述

　　Ajax的全称是Asynchronous JavaScript and XML,中文定义为”异步JavaScript和XML”，它是Web2.0技术的核心，由多种技术组合而成。使用Ajax技术不必刷新整个页面，只需对页面的局部进行更新，可以节省网络带宽，提高网页加载速度，从而缩短用户等待时间，改善用户体验。
　　Ajax技术主要包括：客户端脚本语言JavaScript、异步数据获取技术XMLHttpRequest、数据互换和操作技术XML和XSLT、动态显示和交互技术DOM及基于标准的表示技术XHTML和CSS等。Ajax极大的发掘了Web浏览器的潜力，开启了大量的可能性，从而有效地改善了用户操作体验。
　　传统的web应用允许用户填写表单(form)，当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单，然後返回一个新的网页。这个做法 浪费了许多带宽，因为在前後两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响 应时间。这导致了用户界面的响应比本地应用慢得多。
　　与此不同，AJAX应用可以仅向服务器发送并取回必需的数据， 它使用SOAP或其它一些基于XML的web service接口，并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少，结果我们就能看到响应更快 的应用。同时很多的处理工作可以在发出请求的客户端机器上完成，所以Web服务器的处理时间也减少了。
　　现在，允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax.
　　同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。
　　异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式 。

1.2 Ajax所包含的技术

　　大家都知道ajax并非一种新的技术，而是几种原有技术的结合体。它由下列技术组合而成。
　　1.使用CSS和XHTML来表示。
　　2. 使用DOM模型来交互和动态显示。
　　3.使用XMLHttpRequest来和服务器进行异步通信。
　　4.使用javascript来绑定和调用。
　　
　　AJAX 的要点是 XMLHttpRequest 对象，不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。IE 浏览器使用 ActiveXObject，而其他的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象

1.3 Ajax的工作原理

　　Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。
　　

Ajax Web和传统Web方式的区别

再来看看它们各自的交互

浏览器的普通交互方式

浏览器的Ajax交互方式

　　在创建Web站点时，在客户端执行屏幕更新为用户提供了很大的灵活性。下面是使用Ajax可以完成的功能：
　　动态更新购物车的物品总数，无需用户单击Update并等待服务器重新发送整个页面。
　　提升站点的性 能，这是通过减少从服务器下载的数据量而实现的。例如，在Amazon的购物车页面，当更新篮子中的一项物品的数量时，会重新载入整个页面，这必须下载 32K的数据。如果使用Ajax计算新的总量，服务器只会返回新的总量值，因此所需的带宽仅为原来的百分之一。
　　消除了每次用户输入时的页面刷新。例如，在Ajax中，如果用户在分页列表上单击Next，则服务器数据只刷新列表而不是整个页面。
　　直接编辑表格数据，而不是要求用户导航到新的页面来编辑数据。对于Ajax，当用户单击Edit时，可以将静态表格刷新为内容可编辑的表格。用户单击Done之后，就可以发出一个Ajax请求来更新服务器，并刷新表格，使其包含静态、只读的数据。　

1.4 AJAX的缺陷

• AJAX大量使用了JavaScript和AJAX引擎，而这个取决于浏览器的支持。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持，Mozilla虽然也支持AJAX，但是提供XMLHttpRequest的方式不一样。所以，使用AJAX的程序必须测试针对各个浏览器的兼容性。
• AJAX更新页面内容的时候并没有刷新整个页面，因此，网页的后退功能是失效的；有的用户还经常搞不清楚现在的数据是旧的还是已经更新过的。这个就需要在明显位置提醒用户“数据已更新”。
• 对流媒体的支持没有FLASH好。
• 一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax。

1.5 XMLHttpRequest 对象的三个常用的属性

1.5.1 onreadystatechange 属性

　　onreadystatechange 属性存有处理服务器响应的函数。
　　下面的代码定义一个空的函数，可同时对 onreadystatechange 属性进行设置：

xmlHttp.onreadystatechange=function(){  
    // 我们需要在这里写一些代码     
}  

1.5.2.readyState 属性

　　readyState 属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。
　　readyState 属性可能的值：

状态	描述
0	请求未初始化（在调用 open() 之前）
1	请求已提出（调用 send() 之前）
2	请求已发送（这里通常可以从响应得到内容头部）
3	请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）
4	请求已完成（可以访问服务器响应并使用它）

　　我们要向这个 onreadystatechange 函数添加一条 If 语句，来测试我们的响应是否已完成（意味着可获得数据）：

xmlHttp.onreadystatechange=function(){  
    if(xmlHttp.readyState==4){  
        // 从服务器的response获得数据  
    }  
} 

1.5.3 responseText 属性

　　可以通过 responseText 属性来取回由服务器返回的数据。
　　在我们的代码中，我们将把时间文本框的值设置为等于 responseText：

xmlHttp.onreadystatechange=function(){  
    if(xmlHttp.readyState==4){  
        document.myForm.time.value=xmlHttp.responseText;  
    }  
}  

　　其它属性如下：

1.6 xmlhttprequst的方法

1.6.1 open() 方法

　　open() 有三个参数。第一个参数定义发送请求所使用的方法,第二个参数规定服务器端脚本的URL，第三个参数规定应当对请求进行异步地处理。

xmlHttp.open("GET","test.php",true);  

1.6.2 send() 方法

　　send() 方法将请求送往服务器。如果我们假设 HTML 文件和 PHP 文件位于相同的目录，那么代码是这样的：

xmlHttp.send(null);  

　　其它方法如下：

后接：Ajax的简单使用