一个简单例子教你揭开AJAX神秘面纱

wss11265

wss11265

2016-02-19 22:31

下面图老师小编要跟大家分享一个简单例子教你揭开AJAX神秘面纱,简单的过程中其实暗藏玄机,还是要细心学习,喜欢还请记得收藏哦!

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

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

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

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

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

先看client.jsp内容:

   "http://www.w3.org/TR/html4/loose.dtd"            meta http-equiv="Content-Type" content="text/html; charset=gb2312"                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    

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

AJAX例子

加载页面时,将调用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的代码如下:从三个字符串中随机挑选一个写入到response中,返回客户端。6、客户端自动探知XMLHTTPRequest的状态已经发生变化,自动触发事件处理器7、事件处理器动态更新页面处理器读取xmlHttp.responseText的值,并通过JavaScript动态更新
的内容。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

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

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

展开更多 50%)
分享

猜你喜欢

一个简单例子教你揭开AJAX神秘面纱

Web开发
一个简单例子教你揭开AJAX神秘面纱

揭开AJAX神秘的面纱(AJAX个人学习笔记)

Web开发
揭开AJAX神秘的面纱(AJAX个人学习笔记)

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

揭开ASP神秘面纱(4)

ASP
揭开ASP神秘面纱(4)

揭开ASP神秘面纱(1)

ASP
揭开ASP神秘面纱(1)

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

揭开ASP神秘面纱(2)

ASP
揭开ASP神秘面纱(2)

揭开ASP神秘面纱(5)

ASP
揭开ASP神秘面纱(5)

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

AJAX技术在PHP开发中的简单应用

AJAX技术在PHP开发中的简单应用

开发保留标准的浏览器功能的AJAX应用

开发保留标准的浏览器功能的AJAX应用
下拉加载更多内容 ↓