【Java Web】异步的 JavaScript 和 XML（AJAX）

AJAX的全称为Asynchronous JavaScript and XML，意思是异步的JavaScript和XML，它是一种可以在不重新加载整个页面的情况下与服务器进行数据交互并局部更新页面内容的方法而并非是一门新的语言。

AJAX的使用与平台以及浏览器无关，也不需要任何插件，只需浏览器支持JavaScript便可。

工作原理

AJAX的工作原理很简单，通过XmlHttpRequest对象向服务器发送一个异步的请求，然后从服务器获得数据，然后使用JavaScript来操作DOM元素，进而实现在不刷新页面的情况下局部更新页面内容的功能。

其中，最为核心的便是XmlHttpRequest对象，所有的操作都是围绕这个对象进行的，而异步请求实现的主要功臣便是XmlHttpRequest对象中的onreadystatechange函数。

对象创建

目前所有的浏览器均支持XMLHttpRequest对象，而IE 5和IE 6使用的则是ActiveXObject对象。

因为我们不知道用户使用的是哪一种类型的浏览器，因此我们需要检查浏览器是否支持XMLHttpRequest对象。

var ajaxobj;
// 判断浏览器是否支持 XMLHttpRequest 对象
if (window.XMLHttpRequest) {
    ajaxobj = new XMLHttpRequest();
} else {
    // 由于IE 5、IE 6不支持 XMLHttpRequest 对象
    // 所以创建 ActiveXObject 对象
    ajaxobj = new ActiveXObject("Microsoft.XMLHTTP");
}

发送请求

在这一步中，我们需要使用XMLHttpRequest对象的两个方法：

open(method, url, async)方法；
send(postData)方法。

open(method, url, async)方法的作用是设置请求的方式是GET还是POST（当然还有PUT、DELETE），设置请求的服务器资源URL，设置是否为异步请求。

send(postData)方法的作用是将请求发送出去，在GET方式下，不用传入参数，而在POST方式下，则需要填写传入参数postData。

举个例子：

ajaxobj.open("GET", "https://www.vingyun.com/ajaxTest?nickname=ving", true);
ajaxobj.send();

请求状态

XMLHttpRequest对象中包含了两种用于储存状态的属性：

readyState属性；
status属性。

readyState属性用于表示XMLHttpRequest对象的状态，值与描述如下表：

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

status属性用于表示该HTTP连接的状态，值与含义参考HTTP协议，我们只需要知道status=200代表该请求被成功地完成，并且所请求的资源发送到客户端。

另外，XMLHttpRequest对象包含了一个监听函数onreadystatechange，每当readyState属性发生改变，都会执行该函数，这也是为什么可以实现异步请求的关键。

因此，我们可以通过下面的代码很轻松地根据请求状态来执行下一步任务：

xmlhttp.onreadystatechange = function()
{
    if (ajaxobj.readyState == 4 && ajaxobj.status==200)
    {
        // 成功后的操作代码
    }
}

响应内容

XMLHttpRequest对象中还包含了服务器响应的内容，以字符串和XML两种形式在两个属性中保存：

responseText属性；
responseXML属性。

responseText属性中保存了字符串形式的响应数据，解析数据的时候按处理字符串的方式即可。

responseXML属性中保存了XML形式的响应数据，解析数据的时候需要按照XML文档的解析方式。

完整请求例子

var ajaxobj;
// 判断浏览器是否支持 XMLHttpRequest 对象
if (window.XMLHttpRequest) {
    ajaxobj = new XMLHttpRequest();
} else {
    // 由于IE 5、IE 6不支持 XMLHttpRequest 对象
    // 所以创建 ActiveXObject 对象
    ajaxobj = new ActiveXObject("Microsoft.XMLHTTP");
}
// 发送请求
ajaxobj.open("GET", "https://www.vingyun.com/ajaxTest?nickname=ving", true);
ajaxobj.send();
// 根据请求状态来执行下一步任务
xmlhttp.onreadystatechange = function()
{
    if (ajaxobj.readyState == 4 && ajaxobj.status==200)
    {
        // 成功后的操作代码
    }
}

使用回调函数

上面的例子有一个不便之处在于请求成功之后的操作代码是写死在该请求中的，不能复用。

因此我们引出了回调函数的概念，举一个通俗的例子：

我要去拜访一位朋友（我要执行一个函数），但是那位朋友不在家（但是时机未到），我不知道他什么时候回来（而我却不知道时机什么时候到），按一般的做法，我可以下次再来（只能不停地循环试探时机是否成熟），但是下次有可能还是不在（不停地失败），我一次次地拜访而朋友都不在家的话，花费的时间太多了（这样开销太大），于是我请朋友的佣人在朋友回家的时候告诉我一下（时机到了主动告知我），我便可以登门拜访（函数的执行）。

所以我们可以吧上面的例子改成下面这种样子：

var ajaxobj;
// 判断浏览器是否支持 XMLHttpRequest 对象
if (window.XMLHttpRequest) {
    ajaxobj = new XMLHttpRequest();
} else {
    // 由于IE 5、IE 6不支持 XMLHttpRequest 对象
    // 所以创建 ActiveXObject 对象
    ajaxobj = new ActiveXObject("Microsoft.XMLHTTP");
}
// 发送请求
ajaxobj.open("GET", "https://www.vingyun.com/ajaxTest?nickname=ving", true);
ajaxobj.send();
// 根据请求状态来执行下一步任务
// 这是一个函数的引用，而不是函数的调用，因此务必确保不要加括号
xmlhttp.onreadystatechange = ajaxSuccess;

// 我是一个独立的函数，独立的！！！
function ajaxSuccess()
{
    if (ajaxobj.readyState == 4 && ajaxobj.status==200)
    {
        // 成功后的操作代码
    }
}