AJAX 工作原理

最新推荐文章于 2024-09-25 11:57:12 发布

javazhuanzai

最新推荐文章于 2024-09-25 11:57:12 发布

阅读量282

点赞数

分类专栏： javase 文章标签： ajax 工作 xmlhttprequest 服务器 javascript http服务器

javase 专栏收录该内容

806 篇文章 1 订阅

订阅专栏

======================================================
注：本文源代码点此下载
======================================================

以前做项目,很少去关注原理这东西,只要能在最短的时间能把功能完成了就行,或许是时间问题把,趁这阵子有时间,可以好好整理下之前的东西了,哈哈;

ajax的核心是javascript对象xmlhttprequest。该对象在internet explorer

5中首次引入,它是一种支持异步请求的技术。简而言之,xmlhttprequest使您可以使用javascript向服务器提出请求并处理响应,而不阻塞用户。

在创建web站点时,在客户端执行屏幕更新为用户提供了很大的灵活性。下面是使用ajax可以完成的功能:

动态更新购物车的物品总数,无需用户单击update并等待服务器重新发送整个页面。

提升站点的性能,这是通过减少从服务器下载的数据量而实现的。例如,在某购物车页面,当更新篮子中的一项物品的数量时,会重新载入整个页面,这必须下载整个页面的数据。如果使用ajax计算新的总量,服务器只会返回新的总量值,因此所需的带宽仅为原来的百分之一。

消除了每次用户输入时的页面刷新。例如,在ajax中,如果用户在分页列表上单击next,则服务器数据只刷新列表而不是整个页面。

直接编辑表格数据,而不是要求用户导航到新的页面来编辑数据。对于ajax,当用户单击edit时,可以将静态表格刷新为内容可编辑的表格。用户单击done之后,就可以发出一个ajax请求来更新服务器,并刷新表格,使其包含静态、只读的数据。

一切皆有可能!但愿它能够激发您开始开发自己的基于ajax的站点。然而,在开始之前,让我们介绍一个现有的web站点,它遵循传统的提交/等待/重新显示的范例,我们还将讨论ajax如何提升用户体验。

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函数如下:

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); } } }

在区域建立一个文本框,id为163id

再建一个id为messsge的空白区域用来显示返回字符串(也可以通过javascript函数截取一部分字符串显示):

这样,一个基于ajax技术的用户名检测页面就做好了,不过这个页面将返回服务器响应生成页面的所有字符串,当然还可以对返回的字符串进行一些操作,便于应用到不同的需要当中。

实例二: 以xmldocument对象方式返回响应来验证金山通行证帐号是否存在

在上面的例子中,当服务器对http请求的响应被收到后,我们会调用请求对象的reponsetext属性。该属性包含了服务器返回响应文件的内容。现在我们以xmldocument对象方式返回响应,此时将不再需要reponsetext属性而使用responsexml属性。

首先登陆金山通行证注册页面,我们发现金山通行证用户名的检测方式为:

pass.kingsoft.com/ksgweb/jsp/login/uid.jsp?uid=用户名,并且返回xml数据:

isexisteduid -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的客户端基础应用,采用的是网易和金山现成的服务器端程序,当然为了开发合适自己页面的程序,还需要对自己编写服务器端程序,这设计到程序语言及数据库的操作,对于有一定程序基础的读者一定不是很难的事情。

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/