★★★★★FireGrass★★★★★

※※※※※ΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞジ
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

揭开AJAX神秘面纱

Posted on 2006-08-17 13:48  火草  阅读(220)  评论(0编辑  收藏  举报
AJAX,即"Asynchronous JavaScript And XML"的缩写,可翻译为异步JavaScriptXML技术。其核心是一个寄宿在浏览器中名为XMLHTTPRequest的类。通过此类,可以做到无需提交表单就可以实现与服务器的连接;无需刷新整个页面,就可以动态更新页面中一部分的内容。XMLHTTPRequest通常使用XML作为数据交换的载体,但也可使用其他的载体,如纯文本。简单来说,就是通过XMLHTTPRequest发送信息给服务器,异步接收服务器处理并返回信息,然后通过JavaScript动态更新页面的部分内容。

尽管AJAX近来非常火爆,但AJAX并非新的技术,正如其名所示,只不过是JavaScript加上XML的技术罢了。而且使用上非常简单。

应用AJAX的流程:
1、定义一个事件处理器
2
、获取XMLHTTPRequest,并将事件处理器注册给它
3
、与服务器连接
4
、发送信息
5
、服务器返回处理完毕的信息
6
、每当XMLHTTPRequest的状态发生变化,自动触发事件处理器
7
、事件处理器动态更新页面

本文通过一个简单的例子来说明如何在IE6中使用AJAX技术。在这例子中,客户端每隔十秒,从服务器端取回一个随机的字符串,在不重新刷新页情况下,自动更新部分页面内容。例子仅用到了两个jsp文件,client.jspserver.jsp。为了方便说明,我用server.jsp来代替本应作为ServletServer.java

先看client.jsp内容:
<%@page contentType="text/html"%>
<%@page pageEncoding="gb2312"%>

<!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=gb2312">
        <title>AJAX Demo</title>
        <script language="JavaScript">
            var xmlHttp;
            
            function getGiftFromServer() {
                var url = "http://localhost:8084/ajax/server.jsp";
                if (window.ActiveXObject) {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                }

                xmlHttp.onreadystatechange = showGift;

                xmlHttp.open("GET", url, true);
                xmlHttp.send("null");
                
                setTimeout("getGiftFromServer()",10000);
            }

            function showGift() {
                if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
                    document.getElementById("output").innerHTML = "Time is for " + xmlHttp.responseText + ".";
                }
            }
        </script>
    </head>
    <body onload="getGiftFromServer()">

        <h1>AJAX
例子</h1>

        <div id="output"></div>
    </body>
</html>


加载页面时,将调用JavaScriptgetGiftFromServer()函数,此函数完成了上面所提的应用AJAX的流程中第1至第4步,同时设定了一个每隔十秒自动调用此函数的定时器。而showGift()函数完成所提流程中的第5至第7步。下面详细说明每一步骤。

1
、定义事件处理器,此处理器将在服务器端返回数据时自动被触发执行。
    function showGift() {
        if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
            document.getElementById("output").innerHTML = "Time is for " + xmlHttp.responseText + ".";
        }
    }


因为我们这里使用异步,readyState属性用来判断服务器返回信息的状态。其值是一个从04的整数,对应于:

    0
:对象已创建,但未初始化(未调用open()方法)
    1
:对象已创建,但未调用send()方法
    2
:已调用send()方法,但statusheaders还未可用
    3
:已经传回部分数据,但statusheaders还未完全可用
    4
:已经收到所有数据,可使用所有数据


2
、获取XMLHTTPRequest,并将事件处理器注册给它

注意:要使用XMLHTTPRequest,需要IE5.0以上的版本。

2.1
取得XMLHTTPRequest

IE7.0之前获得XMLHTTPRequest,使用如下代码:
    if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }


而在IE7.0中:
    if (window.XMLHttpRequest) {
       xmlHttp = new XMLHttpRequest
    }


2.2
注册事件处理器
xmlHttp.onreadystatechange = showGift;


showGift
为传入的方法名,每当XMLHTTPRequest的状态发生改变时,将执行此方法

3.
与服务器连接并发送

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


其方法签名如下:

    
xmlHttp.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword)


其中:
    bstrMethod:
连接方式,可用的有GET, POST, PUT, or PROPFIND
      bstrUrl:
服务器的url
      varAsync
(可选): 调用是否异步,默认为true(调用立即返回)
    bstrUser
(可选):用户名,如果url需要验证时附上
    bstrPassword
(可选):密码,如果url需要验证时附上

open()
方法可以直接打开一个xml文档,并通过xmlHttpresponseXML来读取相应的节点。如下例:
    xmlHttp.open("GET","http://localhost/books.xml", false);
      xmlHttp.send();
      var book = xmlhttp.responseXML.selectSingleNode("//book[@id='bk101']");


4
、发送信息

    
xmlHttp.send(null)


其方法签名如下:

    
xmlHttp.send( [varBody])


    varBody
(可选): 可为字符串或xml等数据,可以为null。无返回值

此方法在open()设为异步时,立即返回;在open()设为同步时,必须等到reponse对象从服务器中返回时才返回。

5
、服务器返回处理完毕的信息

此时,该是服务器端工作了,server.jsp的代码如下:
<%
    String[] str = new String[] {"Love", "Power", "Peace"};
    int number = new java.util.Random().nextInt(2+1);
    response.getWriter().write(str[number]);
%>


从三个字符串中随机挑选一个写入到response中,返回客户端。

6
、客户端自动探知XMLHTTPRequest的状态已经发生变化,自动触发事件处理器

7
、事件处理器动态更新页面

处理器读取xmlHttp.responseText的值,并通过JavaScript动态更新<div id="output">的内容。

    
document.getElementById("output").innerHTML = "Time is for " + xmlHttp.responseText + ".";



结语:

由上7步可见,AJAX并不复杂,远比想像中要简单得多。牢牢记住这一点,“AJAX让我们在不用刷新页面的情况下,可以动态地更新网页部分内容,然后运用到各种需要用到这种性能的场合,将使我们的网页更有创意。