一个 Ajax 的实现的 Demo

在以前，当人们想要提交一个网页表单的时候，必须提交整个页面，这种操作方式不仅浪费了 CPU 带宽等硬件资源，并且也降低了用户体验，Ajax 技术的出现解决了这一问题。

Ajax（Asynchronous Javascript And XML），是一种通过 JavaScript 来发送 HTTP 请求并且接受 HTTP 响应的方式，JavaScript 在通过 DOM 对 HTML 页面的操作方式下可以在不提交整个表单的时候，实现网页页面的局部与服务器通信并且刷新。

一个典型的 Ajax 实现如下所示，该示例程序可以获取指定 URL 的 HTTP 响应信息：

// 定义一个请求变量
var req;
// 执行页面操作后所执行的方法，
function checkName(){
    // 新建请求
    req = new XMLHttpRequest();
    // 初始化请求参数
    req.open("GET","url",true);
    // 发送请求
    req.send(null);
    // 接受请求，获得服务器返回的 Text 类型的值
    var value = req.responseText;
    /* 当 req 的 readyState 发生改变的时候，调用 callback 方法 */
    req.onreadystatechange = callback;
}

function callback(){
    document.getElementById("msg").innerText = req.readyState;
    // 当 req 的 readyState 等于 4 时
    if(req.readyState == 4){
        // 当 req 的 status 等于 200 时
        if(req.status == 200){
            // 获得服务器返回的 XML 类型的值
            var msg = req.responseXML.getElementsByTagName("")[0].childNodes[0].nodeValue;
        }
    }
}

其中，req.onreadystatechange = callback;代码快表示：当 req 的 onreadystatechange 发生改变的时候，调用 callback() 方法。