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

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内容:

<%@page contentType="text/html"%><%@page pageEncoding="gb2312"%>

   "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>        

        

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

的内容。

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

结语:

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

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索服务器
, 处理器
, xmlhttprequest
, 事件
, xmlhttp
, ajax事件验证数据库
一个
揭开货币的神秘面纱、揭开诺丽的神秘面纱、揭开青蒿素的神秘面纱、揭开小智神秘面纱、揭开神秘的面纱,以便于您获取更多的相关知识。

时间: 2024-08-31 06:34:49

一个简单例子教你揭开AJAX神秘面纱的相关文章

揭开AJAX神秘面纱

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

web.config文件自定义配置节的使用方法的一个简单例子

web web.config文件自定义配置节的使用方法的一个简单例子用来演示的程序名为MyApp,Namespace也是MyApp 1.编辑web.config文件 添加以下内容,声明一个Section <configSections>    <section name="AppConfig" type="MyApp.AppConfig, MyApp" /> </configSections>   声明了一个叫AppConfig的

filenamefilter-关于FilenameFilter的一个简单例子,但总是有空指针异常,哪位大侠帮忙看看吧

问题描述 关于FilenameFilter的一个简单例子,但总是有空指针异常,哪位大侠帮忙看看吧 public class Demo { public static void main(String[] args) { File dir=new File("D:\test"); JavaTest filter=new JavaTest("java"); File[] files=dir.listFiles(filter); for(File a:files){ Sy

测试期结束 AVG即将揭开MultiMi神秘面纱

近日,安全公司AVG宣布: 经过为期一年的测试,其社交网络聚合器MultiMi即将闪亮登场.如果你对MultiMi还比较陌生,不妨先在这里了解一下:MultiMi的过人之处在于它就像一个社交网络聚合器一样,把来自多个平台的更新汇集到了一起,包括Youtube.Facebook.Picasa.Flickr.Gmail.LinkedIn等等,其设计理念是让用户与他们生活中有重要关系的人保持联系.498)this.w idth=498;' onmousewheel = 'javascript:retu

Python操作json数据的一个简单例子_python

更多的信息,可以参考python内部的json文档: python>>> help(json) 或者官方文档: http://docs.python.org/library/json.html#module-json. 下面给出一个使用python解析json的简单例子: 复制代码 代码如下: #!/usr/bin/python import json #Function:Analyze json script #Json is a script can descript data st

看CIO如何向CEO揭开云计算神秘面纱,并找到新出口

我们在做哪种云计算?进行的是否够深入?该采用了哪些云策略?公司董事会,CEO甚至业务部门领导都在云计算向CIO提出这些问题. CIO们该怎样为公司领导揭开云计算的神秘面纱呢?以下关于云计算的探讨应该可以回答这些问题. 1."云计算"大多名不副实 现在许多公司认为自己在云计算方面的发展永远落后于他人,认为全世界都走在云计算的前沿.但结合以下数字发现,大多所谓的"云计算"并不能称得上真正的云计算.Dr. Dobbs杂志与Forrester公司曾对1021家开发商进行调查

揭开AJAX神秘的面纱(AJAX个人学习笔记)第1/5页_AJAX相关

AJAX技术是多种计算机技术的结晶,它的名称来自:Asynchronism(异步).JavaScript.And.XML这4个单词首字母,即异步JavaScript请求处理XML技术.简单的描述就是数据异步传输网页局部刷新的技术.AJAX很流行,WEB程序设计中如果不应用AJAX技术,可以说是不完善的设计.就好象黑白电视机与彩电一样,AJAX就是后者,是一种技术更新的革命! 本人学习AJAX时间并不长,仅10余天,不能说百分之百掌握,但也有所领悟.现在把自己的学习经过和体会写下来,与君共分享.

npm install —— 从一个简单例子,看本地安装与全局安装的区别

npm的包安装分为本地安装(local).全局安装(global)两种,从敲的命令行来看,差别只是有没有-g而已,比如 npm install grunt # 本地安装 npm install -g grunt-cli # 全局安装 这两种安装方式有什么区别呢?从npm官方文档的说明来看,主要区别在于(后面通过具体的例子来说明):本地安装 1. 将安装包放在 ./node_modules 下(运行npm时所在的目录) 2. 可以通过 require() 来引入本地安装的包 全局安装 1. 将安装

Redux系列01:从一个简单例子了解action、store、reducer

其实,redux的核心概念就是store.action.reducer,从调用关系来看如下所示 store.dispatch(action) --> reducer(state, action) --> final state 可以先看下面的极简例子有个感性的认识,下面会对三者的关系进行简单介绍 // reducer方法, 传入的参数有两个 // state: 当前的state // action: 当前触发的行为, {type: 'xx'} // 返回值: 新的state var reduc