一、简介

AJAX（Asynchronous JavaScript And XML），指异步JavaScript及XML，它不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术，其本质就是JavaScript技术，与XML其实没有太大关系。

通过AJAX，可使用JavaScript的XMLHttpRequest对象来直接与服务器进行通信。通过这个对象，JavaScript可在不重载页面的情况与 Web 服务器交换数据。

AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求），这样就可使网页从服务器请求少量的信息，而不是整个页面，因而可使因特网应用程序更小、更快，更友好。

【当然AJAX也支持同步数据传输，不过意义不大。之所以用AJAX，就是因为其异步传输的优点】。

 

二、使用方法

1. 创建Ajax引擎对象XMLHttpRequest

2. 调用open方法与Ajax引擎建立连接，并告诉Ajax引擎我们的请求方式为get，请求url及采用异步方式

3. 告诉Ajax引擎处理完后，如何把结果反馈给我们，我们通常指定一个方法句柄，那么Ajax就会调用我们指定的方法，从而就可以得到Ajax引擎返回的数据（这种方式一般称为回调机制）

4. 最后巧用send方法设置的参数发送给Ajax引擎

 

具体代码示例（验证修改密码与登录时session中原密码是否相等）：

javascript脚本代码：

var xmlHttp;

function createXMLHttpRequest() {

    if(window.XMLHttpRequest) {

        xmlHttp = new XMLHttpRequest();

    } else if(window.ActiveXObject) {

        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

    }

}

 

function validate() {

    var oldPassword = document.getElementByIdx_x_x("oldPassword");

    if(oldPassword.value.length != 0) {

        createXMLHttpRequest();

        var url = "../servlet/PasswordValidateServlet?oldPassword=" + oldPassword.value;

        xmlHttp.open("GET", url, true);

        //方法地址，处理完成后自动调用，即回调（调用隐含函数）

        //这里利用的是隐含函数，该funtion()函数可独立出来。

        //如新定义一个函数 function back(){ }

        //之后与xmlHttp关联 xmlHttp.onreadystatechange=back;  注意这里back不要写成back()

        xmlHttp.onreadystatechange=function() {

            if(xmlHttp.readyState == 4) {

                if(xmlHttp.status == 200) {

                    if (xmlHttp.responseText != "") {

                        document.getElementByIdx_x_x("oldPasswordSpan").innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>";

                    } else {

                        document.getElementByIdx_x_x("oldPasswordSpan").innerHTML = "";

                    }

                } else {

                    alert("请求失败！错误码=" + xmlHttp.status);

                }

            }

        };

        xmlHttp.send(null);

    }else {

        document.getElementByIdx_x_x("oldPasswordSpan").innerHTML = "";

    }

}

 

html代码（其他代码略）：

<td>

    <input type="password" size="25" onblur="validate()"><span></span>

</td>

 

java代码（也可以是其他语言，这里的代码是由服务器端执行的，所以服务端程序是由什么开发的就用什么语言写即可）：

import java.io.IOException;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import com.wang.drp.sysmgr.domain.User;

 

public class PasswordValidateServlet extends HttpServlet{
 

    @Override

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //清理浏览器缓存

        //如果没有这步，使用Ajax会产生一些莫名其妙的错误

        response.setContentType("text/xml");

        response.setHeader("Cache-Control","no-sotre");

        response.setHeader("Pragma","no-cache");

        response.setDateHeader("Expires",0);
  

        response.setContentType("text/html; charset=GB18030");

        User user = (User)request.getSession().getAttribute("login_user");

        String oldPassword = request.getParameter("oldPassword");

        if (!oldPassword.equals(user.getPassword())) {

            response.getWriter().println("输入密码与原密码不符！");

        }

    }

}

 

三、相关说明

1. Ajax中XMLHttpRequest是最为关键的一个核心对象。

2. XMLHttpRequest提供了readyState属性来对服务器响应进行判断。

readyState的取值如下：0 (初始化)、1 (正在装载)、2 (装载完毕)、3 (交互中)、4 (完成)

所以只有当readyState=4时，一个完整的服务器响应已经收到了，函数才可以处理该响应。

3. XMLHttpRequest的status属性：

由服务器返回的HTTP状态代码，如200表示成功，而404表示"Not Found"错误。

4. XMLHttpRequest的responseText属性：

目前为止从服务器接收到的响应体（不包括头部），或者如果还没有接收到数据的话，就是空字符串。而这个相应即对应response.getWriter()中输出的内容。

 

 

相关阅读：XMLHttpRequest Ajax 实例简介