本文共 2081 字，大约阅读时间需要 6 分钟。

AJAX技术

AJAX（Asynchronous JavaScript And XML）技术是一种用于实现异步Web应用的技术，它通过在浏览器端直接与服务器通信而无需重新加载页面，来实现数据的动态更新。AJAX的核心是XMLHttpRequest对象，它允许客户端在不影响用户体验的情况下，单独与服务器进行交互。

AJAX第一例

1.1 准备工作

AJAX技术也需要像传统的Web应用一样，与服务器进行通信。因此，我们需要编写一个简易的Servlet来处理AJAX请求。这个Servlet非常简单，只需要能够返回一个“Hello AJAX~~”的响应即可。

public class AServlet extends HttpServlet {
    @Override
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("Hello AJAX~~");
        response.getWriter().print("Hello AJAX~");
    }
}

1.2 AJAX核心：XMLHttpRequest对象

AJAX的核心是XMLHttpRequest对象，这是一个在浏览器端本地创建的对象。所有的AJAX交互都通过这个对象来完成。虽然现代浏览器大多数都支持DOM2规范的XMLHttpRequest，但IE浏览器的实现方式有所不同。

创建XMLHttpRequest对象

为了处理不同浏览器的兼容性，我们可以使用以下方法来创建XMLHttpRequest对象：

function createXMLHttpRequest() {
    var xmlHttp;
    try {
        xmlHttp = new XMLHttpRequest();
    } catch (e) {
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
        }
    }
    return xmlHttp;
}

打开与服务器的连接

在创建了XMLHttpRequest对象后，我们可以调用其open()方法来打开与服务器的连接。open()方法的参数包括：

• method：请求方式，通常为GET或POST。
• url：请求的服务器地址。
• async：表示是否是异步请求，默认值为true。

xmlHttp.open("GET", "/ajaxdemo1/AServlet", true);

发送请求

在打开连接后，我们可以调用send()方法来发送请求。对于GET请求，参数可以直接在URL中追加；对于POST请求，需要在请求体中添加参数。

xmlHttp.send(null);

接收服务器响应

当请求发送完成后，服务器会返回响应。我们可以通过readystatechange事件来接收响应。XMLHttpRequest对象的状态共有五种：

通常，我们只关心第五种状态，即响应结束状态。我们可以通过以下方式接收服务器的响应：

xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
        alert("Hello~");
        alert(xmlHttp.responseText);
    }
};

1.6 AJAX第一例小结

通过以上步骤，我们可以完成一个简单的AJAX交互。总结一下关键步骤：

XMLHttpRequest对象的五种状态是：

通过readystatechange事件，我们可以根据readyState属性获取服务器的响应状态码和响应内容。只有在readyState为4且status为200时，才能获取到完整的响应内容。

转载地址：http://qtbo.baihongyu.com/