JavaScript使用AJAX（附带实例）

本节讲解一个通过传统的 JavaScript 应用 AJAX 的实例，主要实现从服务器端获取文本的功能。

【实例】通过传统的 JavaScript 应用 AJAX 从服务器端获取文本。
1) 声明一个空对象来保存 XMLHttpRequest 对象，代码如下：

var xmlhttp = null;

2) 创建 XMLHttpRequest 对象，代码如下：

function createXMLHttpRequest() {
    if(window.ActiveXObject) { // 浏览器为 IE
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }else if(window.XMLHttpRequest) { // 浏览器非 IE
        xmlhttp = new XMLHttpRequest();
    }
}

3) 编写 startRequest() 方法，使用 open() 方法初始化 XMLHttpRequest 对象，指定要使用的服务器 URL。代码如下：

var url = "index.php"; // 要使用的服务器URL

默认情况下，使用 XMLHttpRequest 对象发送的 HTTP 请求是异步的，但是可以显式地把 async 参数值设置为 true。

4) XMLHttpRequest 对象提供了用于指定状态改变时所触发的事件处理器的属性 onreadystatechange。在 AJAX 中，每个状态改变时都会触发指定的事件处理器，通常会调用一个 JavaScript 函数。当请求状态改变时，XMLHttpRequest 对象触发 onreadystatechange 属性指定的事件处理器。因此在处理该事件之前，事件处理器应该首先检查 readyState 属性值和 HTTP 状态值。

当请求完成（readyState 属性值为 4）并且事件已经成功（HTTP 状态值为 200）时，就可以调用一个 JavaScript 函数来处理该事件内容。代码如下：

xmlhttp.onreadystatechange = function(){
    if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
        alert(xmlhttp.responseText);
    }
}

5) 调用 send() 方法提交请求。因为请求使用的是 HTTP 的 get 方式，所以可以在不指定参数或使用 null 参数的情况下调用 send() 方法。代码如下：

xmlhttp.send(null);

6) 将源代码文件存放到 AppServ/www 目录下，然后根据目录地址对其进行访问，如下图所示：

图 1 将源代码存放到AppServ/www目录下

当前目录文件访问地址：http：//localhost/7/7-1/index.html。Apache 端口号如果为 80，可以不用写入访问地址，如果为其他端口号则需要写入访问地址。比如 Apache 端口号为 8080，则访问地址为 http：//localhost：8080/7/7-1/index.html。

7) 单击“获取服务器端文本”按钮，可以看到网页弹出的提示对话框中显示“我的第一个 AJAX 实例！”，运行效果如下图所示。

图 2 通过JavaScript应用AJAX

以上就是通过传统的 JavaScript 应用 AJAX 的所有细节，该方式不必将页面的全部内容发送给服务器，只需要将用到的部分发送即可。显然这种无刷新模式能给用户带来更好的浏览体验。

但是使用 XMLHttpRequest 对象的很多属性和方法对于想快速入门 AJAX 技术的开发人员来说并不容易，而 jQuery 提供了一些日常开发中经常需要用的快捷方法，例如 load()、$ajax()、$get()、$post()、$getJSON() 等，它们可以使简单的工作变得更简单，复杂的工作变得不再复杂。

JavaScript使用AJAX（附带实例）

相关文章