最近互联网上比较火热的话题当然是关于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 xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP"); xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP"); 由于在不同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(); xmlhttp_request.overrideMimeType('text/xml'); 在实际应用中,为了兼容多种不同版本的浏览器,一般将创建XMLHttpRequest类的方法写成如下形式: try{ if( window.ActiveXObject ){ for( var i = 5; i; i-- ){ try{ if( i == 2 ){ xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" ); }else{ xmlhttp_request = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" ); } xmlhttp_request.setRequestHeader("Content-Type","text/xml"); xmlhttp_request.setRequestHeader("Content-Type","gb2312"); break;} catch(e){ xmlhttp_request = false; } } }else if( window.XMLHttpRequest ){ xmlhttp_request = new XMLHttpRequest(); if (xmlhttp_request.overrideMimeType) { xmlhttp_request.overrideMimeType('text/xml'); } } }catch(e){ xmlhttp_request = false; } 在定义了如何处理响应后,就要发送请求了。可以调用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(){ // JavaScript代码段 }; 在这个函数中。首先要检查请求的状态。只有当一个完整的服务器响应已经收到了,函数才可以处理该响应。XMLHttpRequest 提供了readyState属性来对服务器响应进行判断。 readyState的取值如下: 0 (未初始化) 1 (正在装载) 2 (装载完毕) 3 (交互中) 4 (完成) 所以只有当readyState=4时,一个完整的服务器响应已经收到了,函数才可以处理该响应。具体代码如下: if (http_request.readyState == 4) { // 收到完整的服务器响应 } else { // 没有收到完整的服务器响应 } 当readyState=4时,一个完整的服务器响应已经收到了,接着,函数会检查HTTP服务器响应的状态值。完整的状态取值可参见W3C文档。当HTTP服务器响应的值为200时,表示状态正常。 在检查完请求的状态值和响应的HTTP状态值后,就可以处理从服务器得到的数据了。有两种方式可以得到这些数据: (1) 以文本字符串的方式返回服务器的响应 (2) 以XMLDocument对象方式返回响应 实例一: 用文本字符串的方式返回服务器的响应来验证网易通行证帐号是否存在 首先,我们登陆网易通行证注册页面,可以看到检测用户名是否存在是将用户名提交给checkssn.jsp页面进行判断,格式为: reg.163.com/register/checkssn.jsp?username=用户名 根据上面讲到的方法,我们可以利用AJAX技术对网易通行证用户名进行检测: 第一步:新建一个基于Xhtml标准的网页,在区域插入Javascript函数如下:<script language="javascript" type="text/javascript">
function getXMLRequester( ){
var xmlhttp_request = false;
try{
if( window.ActiveXObject ){
for( var i = 5; i; i-- ){
try{
if( i == 2 ){
xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" );
}else{
xmlhttp_request = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );
xmlhttp_request.setRequestHeader("Content-Type","text/xml");
xmlhttp_request.setRequestHeader("Content-Type","gb2312");
}
break;}
catch(e){
xmlhttp_request = false;
}
}
}else if( window.XMLHttpRequest ){
xmlhttp_request = new XMLHttpRequest();
if (xmlhttp_request.overrideMimeType) {
xmlhttp_request.overrideMimeType('text/xml');
}
}
}catch(e){
xmlhttp_request = false;
}
return xmlhttp_request ;
}
function IDRequest(n) {//定义收到服务器的响应后需要执行的JavaScript函数
url=n+document.getElementById('163id').value;//定义网址参数
xmlhttp_request=getXMLRequester();//调用创建XMLHttpRequest的函数
xmlhttp_request.onreadystatechange = doContents;//调用doContents函数
xmlhttp_request.open('GET', url, true);
xmlhttp_request.send(null);
}
function doContents() {
if (xmlhttp_request.readyState == 4) {// 收到完整的服务器响应
if (xmlhttp_request.status == 200) {//HTTP服务器响应的值OK
document.getElementById('message').innerHTML = xmlhttp_request.responseText;
//将服务器返回的字符串写到页面中ID为message的区域
} else {
alert(http_request.status);
}
}
}
</script> 在区域建立一个文本框,id为163id 再建一个id为messsge的空白区域用来显示返回字符串(也可以通过Javascript函数截取一部分字符串显示):
这样,一个基于AJAX技术的用户名检测页面就做好了,不过这个页面将返回服务器响应生成页面的所有字符串,当然还可以对返回的字符串进行一些操作,便于应用到不同的需要当中。 实例二: 以XMLDocument对象方式返回响应来验证金山通行证帐号是否存在 在上面的例子中,当服务器对HTTP请求的响应被收到后,我们会调用请求对象的reponseText属性。该属性包含了服务器返回响应文件的内容。现在我们以XMLDocument对象方式返回响应,此时将不再需要reponseText属性而使用responseXML属性。 首先登陆金山通行证注册页面,我们发现金山通行证用户名的检测方式为: pass.kingsoft.com/ksgweb/jsp/login/uid.jsp?uid=用户名,并且返回XML数据: <!--l version="1.0" encoding="UTF-8" standalone="yes"--><response></response><method>isExistedUid</method><result></result>-2 当result值为-1时表示此用户名已被注册,当result值为-2时表示此用户名尚未注册,因此通过对result值的判断可以知道用户名是否被注册。 对上例代码进行修改: 首先找到 document.getElementById('message').innerHTML = xmlhttp_request.responseText; 改为: var response = xmlhttp_request.responseXML.documentElement; var result = response.getElementsByTagName('result')[0].firstChild.data;//返回result节点数据 if(result ==-2){ document.getElementById('message').innerHTML = "用户名"+document.getElementById('163id').value+"尚未注册"; } else if(result ==-1){ document.getElementById('message').innerHTML = "对不起,用户名"+document.getElementById('163id').value+"已经注册"; } 通过以上两个实例说明了AJAX的客户端基础应用,采用的是网易和金山现成的服务器端程序,当然为了开发合适自己页面的程序,还需要对自己编写服务器端程序,这设计到程序语言及数据库的操作,对于有一定程序基础的读者一定不是很难的事情,本文着重讨论了客户端AJAX的应用体验,广大读者可以根据本文讲的原理结合各种样式表现手法作出绚丽多彩的应用,希望本文能够起到抛砖引玉的作用。
分享到:
相关推荐
WEB 2.0中AJAX应用的详细探讨 WEB 2.0中AJAX应用的详细探讨
WEB2.0中AJAX应用的详细探讨.rar
征服Ajax - Web20(4-7),很适合大家学习使用,如有什么问题,大家一起探讨,欢迎来下载。
进阶篇——深入探讨网页地图与AP元素、页框网页、网站相簿、窗体、网络多媒体应用、样版等重要技术以及网站的上传与维护技术:互动篇——重点介绍行为设置、程序代码片段、扩充程序的应用,Spry framework与...
介绍了Web 2.0技术定义及相关应用,分析了web 2.0技术在图书馆信息服务中的相关应用现状及实践研究,并且着重探讨了新的网络环境下RSS和Ajax技术辅助Web平台在图书馆个性化服务中的相关应用问题.
《javascript宝典(第7版)》内容简介:您想创建更具魅力的交互网页吗?您想更好地控制浏览器呈现内容的方式吗?经典畅销书们avascript宝典(第7版...使用ajax、e4x/xml利json推动web2.0应用 执行数据输入验证和提高安全性
同时,为适应目前web开发的新趋势,作者还全面探讨了mvc架构和zend framework,以及ajax、json、soap等web 2.0技术。书中穿插的大量软件开发实战经验和对php编程思想的感悟,将大大提升你的内在功力。
同时,为适应目前web开发的新趋势,作者还全面探讨了mvc架构和zend framework,以及ajax、json、soap等web 2.0技术。书中穿插的大量软件开发实战经验和对php编程思想的感悟,将大大提升你的内在功力。
GeoWeb始于网络地图和GIS(地理信息系统),由Web 2.0领域的LBS(基于地点服务)兴起,到开始走入多领域应用的今天,很多网络技术起到了关键作用。RIA技术与GeoWeb的结合就是一个连横共进的例子。 在本次演讲中,我...
● 使用Ajax、E4X/XML和JSON推动Web 2.0应用 ● 执行数据输入验证和提高安全性 配书光盘 配书光盘的精彩内容如下: ● 29个附赠章节,这些章节讨论了数据输入验证、脚本 调试和跨浏览器动态HTML等高级主题。 ● 可供...
Web2.0时代,RSS你会用了吗?(技术实现总结) 知识集锦:三分钟全面了解 Blog 和 RSS C#+ASP.NET开发基于Web的RSS阅读器 ASP.NET RSS Toolkit(RSS工具) Serialize Your Deck with Positron [XML Serialization, XSD, ...
同时,为适应目前Web开发的新趋势,作者还全面探讨了MVC架构和Zend Framework,以及Ajax、JSON、SOAP等Web 2.0技术。书中穿插的大量软件开发实战经验和对PHP编程思想的感悟,将大大提升你的内在功力。 内容简介 ...
本书以Struts,Hibernate,Spring,Ajax,Web Service 为核心详细的讲解了这五个组件的基础知识和基本使用方法,并通过一系列集成开发实例讲解了这五个组件在JavaEE 项目中的应用。本书对每一个组件的讲解都是以入门...
J2EE 技术进行了较深入的研究,特别是对一些Web2.0 时代新的互联网交互技术和显示架构,如ajax、extjs、struts、hibernate 等,进行了深入的探讨和应用实践,提出了客户关系管理...
深入探讨DataSource的应用 第6章 ASP.NET 2.0登录与身份验证机制 第7章 ProFile范例——制作用户配置文件 第8章 MasterPage范例——使用母版页 第9章 Theme与Skin范例 第10章 WebParts范例 第11章...
深入探讨DataSource的应用 第6章 ASP.NET 2.0登录与身份验证机制 第7章 ProFile范例——制作用户配置文件 第8章 MasterPage范例——使用母版页 第9章 Theme与Skin范例 第10章 WebParts范例 第11章...
asp.net技术是目前开发基于web的应用程序的最流行和最前沿的技术,也是公司网络开发使用最多和应用人群最广的技术。 《asp.net 4.0从入门到精通(视频实战版)》采用层层递进的方法,详细介绍了asp.net的新技术、新...
本书是jQuery经典技术教程的最新升级版,涵盖jQuery 1.10.x和jQuery 2.0.x。本书前6章以通俗易懂的方式讲解了jQuery的核心组件,包括jQuery的选择符、事件、动画、DOM操作、Ajax支持等。第7章和第8章介绍了jQuery UI...