web2.0中AJAX技术应用
|
源代码网整理以下 最近互联网上比较火热的话题当然是关于WEB2.0的应用,其中AJAX又是WEB2.0的核心之一。AJAX是Asynchronous JavaScript and XML 的缩写。它并不是一门新的语言或技术,它实际上是几项技术按一定的方式组合在一在同共的协作中发挥各自的作用,它包括:使用XHTML和CSS标准化呈现;使用DOM实现动态显示和交互;使用XML和XSLT进行数据交换与处理;使用XMLHttpRequest进行异步数据读取;最后用 JavaScript绑定和处理所有数据。 源代码网整理以下 Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,从而达到节约ISP的空间及带宽租用成本的目的。 源代码网整理以下 本人在我要OK网 http://www.51-ok.cn 应用了一些AJAX技术。效果真的不错。AJAX 技术很强大。我只是学了点皮毛。 源代码网整理以下 我们以两个验证通行证帐号是否存在的例子来讲述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 (完成) 源代码网整理以下 参考网站: 我要OK网 http://www.51-ok.cn 源代码网供稿. |
