
Cary的最新文章:
- 转载文章,报销上网费
- 17岁“黑客”入侵学校网站 帮差生提成绩“恶搞”优秀生
- [设计佳作]我们的一生
- 中学生应用E-file技术建网站——刘航求知求是网站简介
- 八强网诚邀网络爱好者报道所关注的网站
- 06年IT界21大丑闻 索尼电池着火居首
- 如何提高网站的Google PR值
- 电子商务出现新BforC模式 B2C格局将变
- 美国视频网站竞争加剧 高价购买原创视频
- 专家提醒消费者域名投资暗藏风险
- 警惕IE浏览器被劫持
- 截至2006上半年,我国未成年人网民达1830万
- 互联网协会正式公布“恶意软件”最终定义
- 中国企业网站为何未进入爆发期
- [欣赏] 中式网站之古典风格
- 研究发现医生诊断也Google 搜索结果准确率58%
- 人因素(Human Factor)介绍
- 用户中心设计的概念
- 发一封邮件做一道数学题 100%剿灭垃圾邮件?
- 盖茨质疑WEB2.0 称新名词无非是赶时髦
- 2005中国行业电子商务网站TOP100榜单
- 网易也推出免费个性域名邮箱
- 12招让你充分管理操作系统
- 新威胁 十大Web2.0下的攻击方式
- Web2.0进入快速发展期
- 我能让WEB2.0赢利
- 网猎模式发挥WEB2.0优势获取人才
- 互联网的冬天,个人站站应该做些什么?
- 建立Web2.0网站需要解决的问题
- 特别报道:20年最强病毒排行榜
- 制作3D效果的LOGO旋转
- ActionScript 3.0 概要
- Flash MX常用快捷键一览
- 20个Flash制作漂亮动画的经典问题问答
- 搜索引擎不收录网站页面16种原因
- 网页版POPO盛秋清凉登场
- 世界互联网正处于剧变前夜
- 请不要主动地置隐私信息于危险之中
- 网易首页今日全新上线
- Net Live时代最佳建站系统——E-file
- Digg创始人:Web1.0是Emai Web2.0是IM
- 当web2.0遇上企业时
- 文明办团中央等出台举措变网瘾少年为网创人才
- 国内10大域名注册商
- shtml和html的区别
- 做网站,你的前途出路在那里?
- Google sitelinks的两个核心要素
- Google中文网站“谷歌”消失 疑为技术出错
- Google Earth V4.0.2091 Beta
- Google Sitelinks分析
| Web 2.0中AJAX技术应用详解 |
| www.fh888.com 2006-5-27 13:26:47 |
| 媒体:cg艺术 作者:无一问 发布:Cary |
今年互联网上比较火热的话题当然是关于WEB2.0的应用,其中AJAX又是WEB2.0的核心之一。AJAX是Asynchronous JavaScript and XML 的缩写。它并不是一门新的语言或技术,它实际上是几项技术按一定的方式组合在一在同共的协作中发挥各自的作用,它包括:使用XHTML和CSS标准化呈现;使用DOM实现动态显示和交互;使用XML和XSLT进行数据交换与处理;使用XMLHttpRequest进行异步数据读取;最后用JavaScript绑定和处理所有数据。 Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,从而达到节约ISP的空间及带宽租用成本的目的。 我们以两个验证通行证帐号是否存在的例子来讲述AJAX在实际中的应用: (1)用文本字符串的方式返回服务器的响应来验证网易通行证帐号是否存在; (2)以XMLDocument对象方式返回响应来验证金山通行证帐号是否存在; 首先,我们需要用JavaScript来创建XMLHttpRequest 类向服务器发送一个HTTP请求, XMLHttpRequest 类首先由Internet Explorer以ActiveX对象引入,被称为XMLHTTP。 后来Mozilla﹑Netscape﹑Safari 和其他浏览器也提供了XMLHttpRequest类,不过它们创建XMLHttpRequest类的方法不同。 对于Internet Explorer浏览器,创建XMLHttpRequest 方法如下: xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //3.0或4.0, 5.0
由于在不同Internet Explorer浏览器中XMLHTTP版本可能不一致,为了更好的兼容不同版本的Internet Explorer浏览器,因此我们需要根据不同版本的Internet Explorer浏览器来创建XMLHttpRequest类,上面代码就是根据不同的Internet Explorer浏览器创建XMLHttpRequest类的方法。 对于Mozilla﹑Netscape﹑Safari等浏览器,创建XMLHttpRequest 方法如下: xmlhttp_request = new XMLHttpRequest();
如果服务器的响应没有XML mime-type header,某些Mozilla浏览器可能无法正常工作。 为了解决这个问题,如果服务器响应的header不是text/xml,可以调用其它方法修改该header。 xmlhttp_request = new XMLHttpRequest();
在实际应用中,为了兼容多种不同版本的浏览器,一般将创建XMLHttpRequest类的方法写成如下形式: try{
在定义了如何处理响应后,就要发送请求了。可以调用HTTP请求类的open()和send()方法,如下所示: xmlhttp_request.open("GET", URL, true); xmlhttp_request.send(null);
open()的第一个参数是HTTP请求方式—GET,POST或任何服务器所支持的您想调用的方式。 按照HTTP规范,该参数要大写;否则,某些浏览器(如Firefox)可能无法处理请求。 第二个参数是请求页面的URL。 第三个参数设置请求是否为异步模式。如果是TRUE,JavaScript函数将继续执行,而不等待服务器响应。这就是"AJAX"中的"A"。 用JavaScript来创建XMLHttpRequest 类向服务器发送一个HTTP请求后,接下来要决定当收到服务器的响应后,需要做什么。这需要告诉HTTP请求对象用哪一个JavaScript函数处理这个响应。可以将对象的onreadystatechange属性设置为要使用的JavaScript的函数名,如下所示:xmlhttp_request.onreadystatechange =FunctionName; FunctionName是用JavaScript创建的函数名,注意不要写成FunctionName(),当然我们也可以直接将JavaScript代码创建在onreadystatechange之后,例如: xmlhttp_request.onreadystatechange = function(){
在这个函数中。首先要检查请求的状态。只有当一个完整的服务器响应已经收到了,函数才可以处理该响应。XMLHttpRequest 提供了readyState属性来对服务器响应进行判断。 readyState的取值如下: 0 (未初始化) 1 (正在装载) 2 (装载完毕) 3 (交互中) 4 (完成) 所以只有当readyState=4时,一个完整的服务器响应已经收到了,函数才可以处理该响应。具体代码如下: if (http_request.readyState == 4) {
当readyState=4时,一个完整的服务器响应已经收到了,接着,函数会检查HTTP服务器响应的状态值。完整的状态取值可参见W3C文档。当HTTP服务器响应的值为200时,表示状态正常。 在检查完请求的状态值和响应的HTTP状态值后,就可以处理从服务器得到的数据了。有两种方式可以得到这些数据: (1) 以文本字符串的方式返回服务器的响应。 (2) 以XMLDocument对象方式返回响应 实例一: 用文本字符串的方式返回服务器的响应来验证网易通行证帐号是否存在 首先,我们登陆网易通行证注册页面,可以看到检测用户名是否存在是将用户名提交给checkssn.jsp页面进行判断,格式为: reg.163.com/register/checkssn.jsp?username=用户名 根据上面讲到的方法,我们可以利用AJAX技术对网易通行证用户名进行检测: 第一步:新建一个基于Xhtml标准的网页,在区域插入Javascript函数如下:
在区域建立一个文本框,id为163id 再建一个id为messsge的空白区域用来显示返回字符串(也可以通过Javascript函数截取一部分字符串显示): 这样,一个基于AJAX技术的用户名检测页面就做好了,不过这个页面将返回服务器响应生成页面的所有字符串,当然还可以对返回的字符串进行一些操作,便于应用到不同的需要当中。 实例二: 以XMLDocument对象方式返回响应来验证金山通行证帐号是否存在 在上面的例子中,当服务器对HTTP请求的响应被收到后,我们会调用请求对象的reponseText属性。该属性包含了服务器返回响应文件的内容。现在我们以XMLDocument对象方式返回响应,此时将不再需要reponseText属性而使用responseXML属性。 首先登陆金山通行证注册页面,我们发现金山通行证用户名的检测方式为: pass.kingsoft.com/ksgweb/jsp/login/uid.jsp?uid=用户名,并且返回XML数据:
当result值为-1时表示此用户名已被注册,当result值为-2时表示此用户名尚未注册,因此通过对result值的判断可以知道用户名是否被注册。 对上例代码进行修改: 首先找到
改为:
通过以上两个实例说明了AJAX的客户端基础应用,采用的是网易和金山现成的服务器端程序,当然为了开发合适自己页面的程序,还需要对自己编写服务器端程序,这设计到程序语言及数据库的操作,对于有一定程序基础的读者一定不是很难的事情。 |
| 【声明】网页天堂刊载此文不代表同意其说法或描述,仅为提供更多信息,也不构成任何投资建议。转载请注明出处。 |
| 我也说两句 |
| 发表须知: 一、用户须严格遵守国家法律和政策,包括但不限于《全国人大常委会关于维护互联网安全的决定》、《信息网络传播权保护条例》等规定,审慎、合法地利用伊妃(E-file)平台发表言论、作品。 二、用户的言论、行为若涉嫌违法或侵权,用户可能被强制承担因该行为直接或间接导致的全部法律责任。依照法律法规规定,伊妃(E-file)运营方有义务提供用户资料,有义务和权利采取删除、屏蔽、断开链接等各种必要措施。 三、伊妃(E-file)中心授权网络法律专业研究服务机构“网络法苑”为用户及客户提供包括免费咨询在内的全方位的法律支持。 |
