6.4 编写第1个Ajax例子

在正式接触jQuery的Ajax操作之前，先看一个用传统的JavaScript实现的Ajax例子。例子描述：单击一个按钮，然后通过传统的JavaScript的Ajax的方式从服务器端取回一个“Hello Ajax!”的字符串并显示在页面上。

首先在前台页面中书写HTML代码，代码如下：

[插图]

<button>按钮用来触发Ajax，id为“resText”的元素用来显示从服务器返回的HTML文本。

接下来的任务就是完成Ajax()函数，实现步骤如下。
（1）定义一个函数，通过该函数来异步获取信息，代码如下：

[插图]

（2）声明一个空对象用来装入XMLHttpRequest对象，代码如下：

[插图]

（3）给XMLHttpRequest对象赋值，代码如下：

[插图]

IE 5、IE 6是以 ActiveXObject的方式引入 XMLHttpRequest 对象的，而其他浏览器的XML HttpRequest对象是window的子对象。

（4）实例化成功后，使用open()方法初始化XMLHttpRequest对象，指定HTTP方法和要使用的服务器URL，代码如下：

[插图]

默认情况下，使用XMLHttpRequest对象发送的HTTP请求是异步进行的，但是可以显式地把async参数设置为true，如上面代码所示。

（5）因为要做一个异步调用，所以需要注册一个XMLHttpRequest对象将调用的回调事件处理器当它的readyState值改变时调用。当readyState值被改变时，会激发一个readystatechange事件，可以使用onreadystatechange属性来注册该回调事件处理器，代码如下：

[插图]

（6）使用send()方法发送该请求，因为这个请求使用的是HTTP的GET方式，所以可以在不指定参数或使用null参数的情况下调用send()方法，代码如下：

[插图]

当请求状态改变时，XMLHttpRequest对象调用onreadystatechange属性注册的事件处理器。因此，在处理该响应之前，事件处理器应该首先检查readyState的值和HTTP状态。当请求完成加载（readyState值为4）并且响应已经成功（HTTP状态值为200）时，就可以调用一个JavaScript函数来处理该响应内容，代码如下：

[插图]

最后，如果单击“Ajax提交”按钮后发现网页上出现了“Hello Ajax!”，那么就完成了第1个Ajax调用。如图6-2所示。

[插图]

图6-2 第1个Ajax示例

以上就是实现XMLHttpRequest对象使用的所有细节，它不必将Web页面的所有内容都发送到服务器，而是按需发送。使用JavaScript启动一个请求并处理相应的返回值，然后使用浏览器的DOM方法更新页面中的数据。显然，这种无刷新的模式能给网站带来更好的用户体验。但是XMLHttpRequest对象的很多属性和方法，对于想快速入门Ajax的人来说，似乎并不是个容易的过程。

幸运的是，jQuery提供了一些日常开发中需要的快捷操作，例如load、ajax、get和post等，使用jQuery开发Ajax将变得极其简单。这样开发人员就可以将程序开发集中在业务和用户体验上，而不需要理会那些繁琐的XMLHttpRequest对象。下面开始介绍jQuery中的Ajax。