|
|
|
|
|
AJAX的全称是Asynchronous JavaScript and XML，中文翻译为“JavaScript和XML异步网络请求”，它是Web 2.0技术的核心，由多种技术组合而成。使用AJAX技术不必刷新整个页面，只需对页面的局部进行更新，可以节省网络带宽，提高网页加载速度，从而缩短用户等待时间，改善用户体验。AJAX技术主要包括：客户端脚本语言JavaScript、异步数据获取技术XMLHttpRequest、数据互换和操作技术XML和XSLT、动态显示和交互技术DOM及基于标准的表示技术XHTML和CSS等。AJAX极大的发掘了Web浏览器的潜力，开启了大量的可能性，从而有效地改善了用户操作体验。
|
|
|
|
传统的Web应用允许用户填写表单form，当提交表单时就向Web服务器发送一个请求。服务器接收并处理传来的表单，然后返回一个新的网页。这个做法浪费了许多带宽，因为在前后两个页面中的大部分HTML代码往往是相同的。与此不同，AJAX应用可以仅向服务器发送并取回必需的数据，它使用SOAP或其他一些基于XML的Web Service接口，并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少，结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成，所以Web服务器的处理时间也减少了。
|
|
|
|
AJAX的工作原理和XmlHttpRequest对象
|
|
|
|
AJAX的工作原理如下图所示。首先通过XmlHttpRequest对象来向服务器发异步请求，服务器处理后向浏览器返回数据，然后用JavaScript操作DOM处理数据，最后用CSS和XHTML设置数据的样式来更新页面。这其中最关键的一步就是从服务器获得请求数据。
|
|
|
|
|
|
|
|
这里，XmlHttpRequest对象是AJAX的核心。该对象用于在后台与服务器交换数据，利用该对象AJAX就可以实现：
|
|
|
|
|
|
|
|
|
|
|
|
|
|
XmlHttpRequest对象的属性如下表所示。
|
|
|
|
|
|
|
|
|
|
XmlHttpRequest对象的方法如下表所示。
|
|
|
|
|
|
|
|
|
|
（1）首先，创建XMLHttpRequest对象。
|
|
|
|
|
|
|
|
（2）使用XMLHttpRequest对象的open()方法发送请求给服务器。
|
|
|
|
open（request-type，url，async）方法包括三个参数，其中request-type包括get和post两种请求方式，分别对应不同的send()用法；async参数一般为true，默认为异步操作。
|
|
|
|
|
|
|
|
|
|
|
|
另外，post传输数据量大，主要用于向服务器发送大的数据，可以大到2MB；get传输数据量小，主要向服务器发送小的请求，发送数据最大为2KB。相比之下get发送更快，但是发送包含未知字符的用户输入时，post比get更稳定也更可靠。
|
|
|
|
（3）调用回调函数。如在上一步open的第3个参数是true，那么当前就是异步请求，这时需要写一个回调函数，XMLHttpRequest对象的onreadystatechange属性，这个属性返回的是一个匿名方法，所以回调函数就写成xmlhttp.onreadystatechange=function｛｝，其内部就是回调函数的内容。回调函数是请求在后台处理完再返回到前台所实现的功能。下面例子的回调函数要实现的功能是接收后台处理后反馈给前台的数据，然后将这个数据显示到指定id的div上。因为从后台返回的数据可能是错误的，所以在回调函数中首先要判断后台返回的信息是否正确，如果正确才可以继续执行。代码如下：
|
|
|
|
|
|
（4）发送HTTP请求。在经过以上步骤的设置之后，就可以将HTTP请求发送到Web服务器上去了。发送HTTP请求可以使用XMLHttpRequest对象的send()方法，其代码如下所示：
|
|
|
|
|
|
其中data是个可选参数，如果请求的数据不需要参数，即可以使用null来替代。data参数的格式与在URL中传递参数的格式类似。在使用send()方法之后，XMLHttpRequest对象的readyState属性值才会开始改变，也才会激发readystatechange事件，并调用函数，把服务器的数据传到前端，通过局部div进行更新变化。
|
|
|
