AJAX，是一种创建交互式网页的开发技术，能够实现通过少量的数据交换，实现网页的异步刷新。

当你使用Google搜索时，输入几个字便会提示相关的提示词条信息，地图页面中无刷新地加载整个地图页面，其背后都是通过AJAX来和服务器进行交互，从而实现良好的用户体验。

XMLHttpRequest

大多数的浏览器（包括IE7+、Firefox、Chrome、Safari 以及 Opera）都支持XMLHttpRequest。

可以通过下列语句创建一个XMLHttpRequest对象：

1
var xmlHttp = new XMLHttpRequest();

下面语句将向服务器发送一个GET异步请求：

1
2
3
4
5
6
7
8
9
10
11
12
var xmlHttp = new XMLHttpRequest();
var resText;
xmlHttp.open("GET", "url", true);
xmlHttp.send();
xmlHttp.onreadystatechange = function () {
    if (xmlHttp.readyState==4 && xmlHttp.status==200) {
        resText = xmlHttp.responseText;
        /*
         *  回调方法
         */
    }
}

如果需要发送一个包含form表单的POST请求，参考以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
var xmlHttp = new XMLHttpRequest();
var resText;
xmlHttp.open("POST", "url", true);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.send("no=001&name=test");
xmlHttp.onreadystatechange = function () {
    if (xmlHttp.readyState==4 && xmlHttp.status==200) {
        resText = xmlHttp.responseText;
        /*
         *  回调方法
         */
    }
}

这里需要注意两点：

  1. onreadystatechange方法：当发送XMLHttpRequest异步请求之后，该方法会处理监听状态，当获得服务器响应之后，执行该方法中的内容。该方法主要用于异步请求，若请求是同步的（这其实很少见），只需将回调方法置于xmlHttp.send();之后即可。在本文的内容中会有更多的涉及。
  2. setRequestHeader：定义请求头的内容格式。

服务器响应

通过xmlHttp.responseText()或xmlHttp.responseXML()来获取。

readyState属性

上面已经初步涉及到了onreadystatechange方法，当请求发出后，readyState改变就会触发onreadystatechange方法。
XMLHttpRequest 的状态。从 0 到 4 发生变化:

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成，且响应已就绪

这看起来不错，但还是显得很是些麻烦。不过，谢天谢地，还好有JQuery。