ajax实例驱动教程（转载+ 改编）

最新推荐文章于 2024-09-14 12:59:51 发布

charles1900

最新推荐文章于 2024-09-14 12:59:51 发布

阅读量635

点赞数

分类专栏： Java 文章标签： ajax xmlhttprequest javascript 服务器 asynchronous xml

本文链接：https://blog.csdn.net/charles1900/article/details/2064907

版权

Java 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

整理这篇文章可费了不少精力，不过都是工作之外时间完成，就像我的直接老大说的“时间就像牛奶，只要肯挤肯定会有“！

由于工作的需要需要对Ajax、JavaScript方面的知识进行一番学习，又想快速的接受、吸收，但是从网上找到的一些学习文章存在明显的知识、概念断层现象，当然这个不是文章作者的责任，怪就怪我对基础不佳，就不如人，嘿嘿！所以自己将学习的资料好好整理一番，从零起步（基本上），初学者也很容易看懂喔！其中针对文章中出现的个人认为陌生的概念或技术会以括号+红色字体的形式进行特殊显示，这样大家就可以清晰明了，可以循序渐进了！

另外目前，“项目驱动式“教学应用广泛，我这不算教学，所以暂不叫“项目驱动”，咱叫“实例驱动式“，哈哈！可以说”实例驱动“是”项目驱动“的一个子集，一个开始！

实例

描述：使用Ajax技术实现客户端每隔十秒，从服务器端取回一个随机的字符串，在不重新刷新页情况下，自动更新部分页面内容。

（Ajax：即"Asynchronous JavaScript And XML"的缩写，可翻译为异步JavaScript及XML技术。其核心是一个寄宿在浏览器中名为XMLHTTPRequest的类。通过此类，可以做到无需提交表单就可以实现与服务器的连接；无需刷新整个页面，就可以动态更新页面中一部分的内容。XMLHTTPRequest通常使用XML作为数据交换的载体，但也可使用其他的载体，如纯文本。简单来说，就是通过XMLHTTPRequest发送信息给服务器，异步接收服务器处理并返回信息，然后通过JavaScript动态更新页面的部分内容。）因为其非常之简单AJAX近来非常火爆，但AJAX并非新的技术，正如其名所示，只不过是JavaScript加上XML的技术罢了。

文件：例子仅用到了两个Jsp文件，client.jsp及server.jsp
应用AJAX的流程
    1、定义一个事件处理器
   2、获取XMLHTTPRequest，并将事件处理器注册给它
    3、与服务器连接
    4、发送信息
    5、服务器返回处理完毕的信息
    6、每当XMLHTTPRequest的状态发生变化，自动触发事件处理器
    7、事件处理器动态更新页面

由上面可知：Ajax整个流程中事件处理器是关键所在，XMLHTTPRequest是实现关键的途径！
编码
client.jsp

  <%@page contentType="text/html"%>
<%@page pageEncoding="gb2312"%>
<!DOCTYPE HTML PUBLIC "-//W 3C //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 οnlοad="getGiftFromServer()">
        <h1>AJAX例子</h1>
        <div id="output"></div>
    </body>
</html>

待会在介绍server.jsp的代码段，不要着急！
当服务器段加载页面时，将调用JavaScript的getGiftFromServer()函数，此函数完成了上面所提的应用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属性用来判断服务器返回信息的状态。其值是一个从0至4的整数，对应于：
    0：对象已创建，但未初始化（未调用open()方法）
    1：对象已创建，但未调用send()方法
    2：已调用send()方法，但status及headers还未可用
    3：已经传回部分数据，但status及headers还未完全可用
    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文档，并通过xmlHttp的responseXML来读取相应的节点。如下例：

    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动态更新