首页 > 编程笔记 > JavaScript笔记 阅读：79

Ajax是什么，Ajax的用法（附带实例）

Ajax（Asynchronous JavaScript And XML，异步 JavaScript和XML）是在客户端（如浏览器）与服务器进行后台数据交换的一种编程方法。

那么，Ajax 有什么实际用途呢？从用户的角度看，如果每次从服务器获取新的数据都刷新整个页面，页面总是会“闪一下”，而且会传输大量的重复数据。那么，使用 Ajax 的作用就是，客户端不需要刷新整个页面，而是通过 Ajax 与服务器进行交流，只获取页面中需要更新的一小部分内容。

这么做，一方面可以减少服务器负载和网络传输数据量，另一方面也可以实现更加友好、更加丰富的交互体验。

请注意，这里并没有什么新技术，只是 JavaScript 代码和 XMLHttpRequest 对象的综合应用，而且，读者也不需要被 XML 所迷惑，使用 Ajax 可以从服务器接收多种格式的数据，而 XML 只是其中一种。

下面先了解一下 Ajax 的主角——XMLHttpRequest 对象的应用。

XMLHttpRequest对象

现代浏览器对 XMLHttpRequest 对象的支持已经非常全面了，所以，在代码中可以很方便地创建 XMLHttpRequest 对象，如下面的代码：
var xhr = new XMLHttpRequest();
下表是 XMLHttpRequest 对象的一些常用属性：

属性 描述
onreadystatechange 指定服务器返回状态改变时的响应函数。
readyState 表示服务器返回的状态值，4 表示成功完成。请注意，服务器返回状态 4 并不表示正确获取资源，还需要 status 属性确认。
status 返回获取资源的状态码。200 表示从服务器成功获取，304 表示资源没有变化，可以缓存中获取资源，这两种状态时都有可用的资源。
statusText 返回获取资源状态的文本描述，如 200 状态码对应的描述文本就是“OK”。
responseText 从服务器返回的文本内容。
responseXML 从服务器返回的 XML 数据。

XMLHttpRequest 对象中常用的方法如下表所示：

方法 描述
abort() 取消向服务器请求的操作。
getAllResponseHeaders() 获取服务器返回的所有首部信息。
getResponseHeader() 获取服务器返回的指定首部信息。
open() 设置请求信息。
send() 向服务器独立发送请求。
setRequestHeader() 设置请求时的首部信息。

下面以一个请求文本内容的操作为例。首先，在服务器创建一个文本文件（/demo/msg.txt），修改文件内容如下：

您好！这是来自Web服务器的消息。


下面的代码使用 Ajax 读取 /demo/msg.txt 文件： 
<!doctype html>
<html>
<head>
     <meta charset="utf-8" />
     <title></title>
</head>
<body>
     <h1 id="msg"></h1>
</body>
</html>
<script>
    window.onload = function () {
        var xhr = new XMLHttpRequest();
        if (xhr === null) return;
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200 || xhr.status === 304) {
                    var e = document.getElementById("msg");
                    e.innerText = xhr.responseText;
                    xhr = null;
                }
            }
        };
        // var url = "/demo/msg.txt";
        xhr.open("GET", url, true);
        xhr.send(null);
    };
</script>
首先看一下执行效果，如下图所示：


创建 XMLHttpRequest 对象后，首先，设置 onreadystatechange 属性值，定义为一个函数，结构如下：
xhr.onreadystatechange = function () {
    // 对服务器状态的响应
};
其次，通过 open() 方法设置请求（request）信息，参数包括：
send() 方法会向服务器发起请求，如果数据发送方式设置为 POST，需要在 send() 方法的参数中设置发送的数据；数据发送方式为 GET 或没有需要发送的数据时，send() 方法的参数就设置为 null。

向服务器发送请求后，就可以通过 onreadystatechange 属性设置的函数响应服务器返回的状态和数据，如下面的代码：
if (xhr.readyState === 4) {
    if (xhr.status === 200 || xhr.status === 304) {
        var e = document.getElementById("msg");
        e.innerText = xhr.responseText;
        xhr = null;
    }
}
从服务器获取资源时，首先需要 readyState 属性返回 4，即服务器正确地进行了响应；其次，status 属性值为 200 或 304 时都有可用的资源。

如果只需要从服务器获取最新的资源，只响应 status 属性值为 200 时的状态。这里有一个小技巧，向服务器发起请求时，可以添加一个动态的参数避免使用缓存的资源。

如下面的代码动态添加了一个时间戳参数： 
var url = "article.php?id=123&ts=" + new Date().getTime();
以上就是通过 Ajax 从服务器获取文本的完整操作过程。

接下来再看一下从服务器获取 XML 数据的示例。首先，还是在服务器中创建一个 XML 文件，内容如下： 
<?xml version="1.0" encoding="utf-8" ?>
<records>
    <record>
        <userid>1</userid>
        <username>Tom</username>
    </record>
    <record>
        <userid>2</userid>
        <username>Jerry</username>
    </record>
    <record>
        <userid>3</userid>
        <username>John</username>
    </record>
</records>
代码的第一行声明了文件类型是 XML，字符集为 utf-8，接下来的内容才是 XML 数据内容。其中，根节点为 records，然后，每一个 record 节点都包含了两个子节点，即 userid 和 username 节点，这两个节点的子节点就是具体的数据，在 XML 中称为文本节点。

下面的代码在页面中通过 Ajax 获取 XML 数据： 
<script>
    window.onload = function () {
        var xhr = new XMLHttpRequest();
        if (xhr === null) return;
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200 || xhr.status === 304) {
                    var records = xhr.responseXML.getElementsByTagName("record");
                    for (var i = 0; i < records.length; i++) {
                        document.write("userid : " + records[i].getElementsByTagName("userid")[0].firstChild.nodeValue);
                        document.write("<br>");
                        document.write("username : " + records[i].getElementsByTagName("username")[0].firstChild.nodeValue);
                        document.write("<br>");
                    }
                    xhr = null;
                }
            }
        };
        var url = "/demo/records.xml";
        xhr.open("GET", url, true);
        xhr.send(null);
    };
</script>
代码执行结果如下图所示：


实际应用中，使用 Ajax 获取数据主要包括四种情况，即使用 POST 或 GET 方式传递参数，分别获取文本内容或 XML 数据。下面针对这四种情况进行代码封装。

Ajax操作封装

下面的代码在 /lib/js/ajax.js 文件中创建 ajaxGetText() 函数，其功能是通过 GET 方式传递参数，并获取文本内容。 
// 使用 GET 方式传递参数，获取文本内容
function ajaxGetText(url, param, fn) {
    var xhr = new XMLHttpRequest();
    if (xhr === null) return;
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status === 200 || xhr.status === 304) {
                fn(xhr.responseText);
                xhr = null;
            }
        }
    };
    xhr.open("GET", url + "?" + param, true);
    xhr.send(null);
}
其中，ajaxGetText() 函数有三个参数，分别是：
使用 ajaxGetText() 函数的基本格式如下： 
ajaxGetText(url, param, function(txt) {
    // 处理服务器返回的 txt 格式的内容
});

下面的代码测试了 ajaxGetText() 函数的应用： 
<script src="/lib/js/ajax.js"></script>
<script>
    var url = "/demo/msg.txt";
    ajaxGetText(url, null, function (txt) {
        alert(txt);
    });
</script>
代码执行结果如下图所示：


下面的代码（/lib/js/ajax.js）继续创建 ajaxPostText() 函数，它的功能是通过 POST 方式向服务器传递数据，并返回文本内容：
// 使用 POST 方式传递参数，获取文本内容
function ajaxPostText(url, param, fn) {
    var xhr = new XMLHttpRequest();
    if (xhr === null) return;
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status === 200 || xhr.status === 304) {
                fn(xhr.responseText);
                xhr = null;
            }
        }
    };
    xhr.open("POST", url, true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
    xhr.send(param);
}

接下来分别通过 GET 和 POST 方式向服务器传递参数，并返回 XML 数据的函数，如下面的代码（/lib/js/ajax.js）： 
// 使用 GET 方法传递参数，获取 XML 数据
function ajaxGetXml(url, param, fn) {
    var xhr = new XMLHttpRequest();
    if (xhr === null) return;
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status === 200 || xhr.status === 304) {
                fn(xhr.responseXML);
                xhr = null;
            }
        }
    };
    xhr.open("GET", url + "?" + param, true);
    xhr.send(null);
}

// 使用 POST 方法传递参数，获取 XML 数据
function ajaxPostXml(url, param, fn) {
    var xhr = XMLHttpRequest();
    if (xhr === null) return;
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status === 200 || xhr.status === 304) {
                fn(xhr.responseXML);
                xhr = null;
            }
        }
    };
    xhr.open("POST", url, true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
    xhr.send(param);
}

相关文章