Ajax技术的基本原理

我用一个简单的用户名验证的例子来谈一谈我对Ajax的了解:

这个例子用到了两个JSP和一个JS,我没有用后台来验证,因为原理是一样的.

1.用户注册表单页:ajaxCheckUser.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>商账追收
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax检测用户名</title>
<script type="text/javascript" src="../js/ajaxCheckUser.js"></script>
</head>
<body>
    <form action="">
        用户名：<input type="text" id="username" οnblur="checkUserAjax();"/><br/>
        <div id="msg"></div>
        密  码：<input type="password" id="password"/><br/>
        Email：<input type="text" id="email"/><br/>
        <input type="button" id="submit" value="submit" />  
        <input type="button" id="reset" value="reset" />
    </form>
</body>
</html>

2.用于说明Ajax技术的基本原理的JS文件:ajaxCheckUser.js

//当输入框失去焦点时触发些函数
function checkUserAjax(){
    //第一步:创建XMLHttpRequest对象
    var xhr = createXmlHttpRequest() ;
    //第二步:建立对服务器的调用
    /**
    * open(method,url,asynch)方法和属性介绍
    * 1.XMLHttpRequest 对象的 open 方法允许程序员用一个Ajax调用向服务器发送请求。
    * 2.method：请求类型，类似 "GET"或"POST"的字符串。
    *     若只想从服务器检索一个文件，而不需要发送任何数据，使用GET(可以在GET请求里通过附加在URL上的查询字符串来发送数据，不过数据大小限制为2000个字符)。
    *    若需要向服务器发送数据，用POST。
    * 3.url：路径字符串，指向你所请求的服务器上的那个文件。可以是绝对路径或相对路径。
    *     在某些情况下，有些浏览器会把多个XMLHttpRequest请求的结果缓存在同一个URL。
    *    如果对每个请求的响应不同，这就会带来不好的结果。把当前时间戳追加到URL的最后，就能确保URL的惟一性，从而避免浏览器缓存结果。
    *     例如:var url = "GetAndPostExample?timeStamp=" + new Date().getTime();
    * 4.asynch：表示请求是否要异步传输，默认值为true(异步)。
    *    指定true，在读取后面的脚本之前，不需要等待服务器的相应。
    *    指定false，当脚本处理过程经过这点时，会停下来，一直等到Ajax请求执行完毕再继续执行。
    */
    var username = document.getElementById("username").value ;//获得输入的用户名
    xhr.open("post","checkUser.jsp?username="+username,true) ;

    /**
    * setRequestHeader()方法和属性介绍
    * 1.当浏览器向服务器请求页面时，它会伴随这个请求发送一组首部信息。这些首部信息是一系列描述请求的元数据(metadata)。
    *      首部信息用来声明一个请求是 GET 还是 POST
    * 2.Ajax 请求中，发送首部信息的工作可以由 setRequestHeader完成
    * 3.参数header：首部的名字; 参数value：首部的值。
    * 4.如果用 POST 请求向服务器发送数据，需要将 "Content-type" 的首部设置为 "application/x-www-form-urlencoded".它会告知服务器正在发送数据，并且数据已经符合URL编码了。
    * 5.该方法必须在open()之后才能调用
    */
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")//如果发送方式为POST时,需要设置首部信息 ;

    //第三步:向服务器发送请求
    /**
    * send(data)方法和属性介绍
    * 1.open 方法定义了 Ajax 请求的一些细节。send 方法可为已经待命的请求发送指令
    * 2.data：将要传递给服务器的字符串
    * 3.若选用的是 GET 请求，则不会发送任何数据，给 send 方法传递 null 即可：xhr.send(null);
    * 4.当向send()方法提供参数时，要确保open()中指定的方法是POST，如果没有数据作为请求体的一部分发送，则使用null.
    */
    xhr.send(null) ;
    //第四步:接收服务器的处理结果
    /**
    * 用 XMLHttpRequest 的方法可向服务器发送请求。在 Ajax 处理过程中，XMLHttpRequest 的如下属性可被服务器更改：
    * 1.readyState:
    *         该属性表示Ajax请求的当前状态。它的值用数字代表:
    *         (1).0 代表未初始化。还没有调用 open 方法
    *         (2).1 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用
    *         (3).2 代表已加载完毕。send 已被调用。请求已经开始
    *         (4).3 代表交互中。服务器正在发送响应
    *         (5).4 代表完成。响应发送完毕
    *         每次 readyState 值的改变，都会触发 readystatechange 事件。
    *         如果把 onreadystatechange 事件处理函数赋给一个函数，那么每次 readyState 值的改变都会引发该函数的执行。
    *         readyState 值的变化会因浏览器的不同而有所差异。但是，当请求结束的时候，每个浏览器都会把 readyState 的值统一设为 4
    * 2.status:
    *         服务器发送的每一个响应也都带有首部信息。三位数的状态码是服务器发送的响应中最重要的首部信息，并且属于超文本传输协议中的一部分。
    *         常用状态码及其含义：
    *         (1).404 没找到页面(not found)
    *         (2).403 禁止访问(forbidden)
    *         (3).500 内部服务器出错(internal service error)
    *         (4).200 一切正常(ok)
    *         (5).304 没有被修改(not modified)(服务器返回304状态，表示源文件没有被修改 )
    *         在 XMLHttpRequest 对象中，服务器发送的状态码都保存在 status 属性里。通过把这个值和 200 或 304 比较，可以确保服务器是否已发送了一个成功的响应
    * 3.responseText:
    *         该属性包含了从服务器发送的数据。它是一个HTML,XML或普通文本，这取决于服务器发送的内容。
    *         当 readyState 属性值变成 4 时, responseText 属性才可用，表明 Ajax 请求已经结束。
    * 4.responseXML:
    *         如果服务器返回的是 XML，那么数据将储存在 responseXML 属性中。
    *         只用服务器发送了带有正确首部信息的数据时， responseXML 属性才是可用的。 MIME 类型必须为 text/xml
    */
    //指定响应处理函数
    xhr.onreadystatechange = function(){
        //对象的状态为4表示已完成
        if(xhr.readyState==4){
            //成功返回200,没有修改返回304
            if(xhr.status==200||xhr.status==304){
                //开始处理信息
                //alert(xhr.responseText) ;
                document.getElementById("msg").innerHTML = xhr.responseText ;
            }
        }
    }

}

/**
* 创建XMLHttpRequest实例(兼容IE和Firefox等浏览器)
*/
function createXmlHttpRequest(){
    var xmlhttp = null;
    try{
        //适用的浏览器Firefox, Opera 8.0+, Safari
        xmlhttp=new XMLHttpRequest();
    }catch(e){
        //IEIE7.0以下的浏览器以ActiveX组件的方式来创建XMLHttpRequest对象
        var MSXML =
        ['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0',
        'MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0',
        'MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
        for(var n = 0; n < MSXML.length; n ++){
            try{
                //根据MSXML数组循环获得支持ActiveX插件的IE版本号,如果抛出异常,那么继续判断下一个否则产生XMLHttpRequest对象跳出循环
                xmlhttp = new ActiveXObject(MSXML[n]);
                break;
            }catch(e){}}
        }
    return xmlhttp;
}

以上就OK了,我也是为了学习ExtJS所以才看了看Ajax,现在我把我的学习笔记贴上了,供大家参考,同时给予指正.

如果在后台想往前台传XML格式的结果,那么可以在上面的JS文件中加入这个方法.并且修改返回结果的JSP文件.具体如下:

ajaxCheckUser.js文件增加函数如下:

//适用于返回结果为XML格式
function checkUserAjaxXML(){
    //第一步:创建XMLHttpRequest对象
    var xhr = createXmlHttpRequest() ;
    //第二步:建立对服务器的调用
    xhr.open("post","checkUserXML.jsp",true) ;
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")//如果发送方式为POST时,需要设置首部信息 ;

    //第三步:向服务器发送请求
    var username = document.getElementById("username").value ;//获得输入的用户名
    xhr.send("username="+username) ;
    //第四步:接收服务器的处理结果
    //指定响应处理函数
    xhr.onreadystatechange = function(){
        //对象的状态为4表示已完成
        if(xhr.readyState==4){
            //成功返回200,没有修改返回304
            if(xhr.status==200||xhr.status==304){
                //开始处理信息
                //document.getElementById("msg").innerHTML = xhr.responseText ;
                //此处用XML专有的方式接收
                var xmlResult = xhr.responseXML ;
                /*
                第一种拆分XML的方法 start
                var root = xmlResult.documentElement ;//获得XML的根节点
                var codeNode = root.firstChild ;//获得Code节点
                var msgNode = root.lastChild ;//获得Msg节点
                if(codeNode.firstChild.nodeValue){
                    document.getElementById("msg").innerHTML = lastNode.msgNode.nodeValue ;
                }
                第一种拆分XML的方法 end
                */

                //第二种拆分XML的方法DOM start
                var codeNode = xmlResult.getElementsByTagName("code")[0] ;//获得code节点
                var msgNode = xmlResult.getElementsByTagName("msg")[0] ;//获得msg节点
                if(codeNode.firstChild.nodeValue){
                    document.getElementById("msg").innerHTML = msgNode.firstChild.nodeValue ;
                }
                //第二种拆分XML的方法DOM end

            }
        }
    }

}

注意:此处的下面部分,已经做了修改.

xhr.open("post","checkUserXML.jsp",true) ;

接收方式也改为.

var xmlResult = xhr.responseXML ;

之后重新建立一个checkUserXML.jsp文件,用于返回XML格式的结果.代码如下:

<%@ page language="java" contentType="text/xml; charset=UTF-8"
    pageEncoding="UTF-8"%><?xml version="1.0" encoding="UTF-8"?>
<%
    String username = request.getParameter("username") ;
    String msg = "" ;
    int code = 0 ;
    if(username!=null){
        if("admin".equals(username)){
            msg = "用户名已经存在" ;
            code = 0 ;
        }else{
            msg = "用户名可以使用" ;
            code = 1 ;
        }
    }else{
        username = "" ;
    }
    //out.print(msg) ;
%><result><code><%=code%></code><msg><%=msg%></msg></result>

注意 :

1.<?xml version="1.0" encoding="UTF-8"?>这个XML首部分,必须追加到脚本末尾,不能有回车,不然会出现意想不到的结果.... ....

2.contentType="text/xml; charset=UTF-8"中已经由原来的text/html改为text/xml了.如果不改为xml会很麻烦.

如果想在后台往回传JSON格式的内容,那么请在ajaxCheckUser.js文件中增加下面这个函数:

//适用于返回结果为JSON格式
function checkUserAjaxJSON(){
    //第一步:创建XMLHttpRequest对象
    var xhr = createXmlHttpRequest() ;
    //第二步:建立对服务器的调用
    xhr.open("post","checkUserJSON.jsp",true) ;
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")//如果发送方式为POST时,需要设置首部信息 ;

    //第三步:向服务器发送请求
    var username = document.getElementById("username").value ;//获得输入的用户名
    xhr.send("username="+username) ;
    //第四步:接收服务器的处理结果
    //指定响应处理函数
    xhr.onreadystatechange = function(){
        //对象的状态为4表示已完成
        if(xhr.readyState==4){
            //成功返回200,没有修改返回304
            if(xhr.status==200||xhr.status==304){
                //开始处理信息
                var xmlResult = xhr.responseText ;
                var msgJson = eval("("+xmlResult+")") ;//注意此处必须写"("和")",目的是先解析xmlResult的内容,再将其转换
                if(msgJson){
                    document.getElementById("msg").innerHTML = msgJson.msg ;
                    if(msgJson.code==1){
                        //如果用户名已经存在那么将光标重新定位
                        document.getElementById("msg").focus ;
                    }
                }
            }
        }
    }

}

checkUserJSON.jsp文件内容如下:

<%@ page language="java" contentType="text/json; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    String username = request.getParameter("username") ;
    String msg = "" ;
    int code = 0 ;
    if(username!=null){
        if("admin".equals(username)){
            msg = "用户名已经存在" ;
            code = 0 ;
        }else{
            msg = "用户名可以使用" ;
            code = 1 ;
        }
    }else{
        username = "" ;
    }
    //out.print(msg) ;
%>{"code":"<%=code %>","msg":"<%=msg %>"}