解析Ajax如何处理响应信息

<script type="text/javascript"><!-- google_ad_client = "pub-2947489232296736"; /* 728x15, 创建于 08-4-23MSDN */ google_ad_slot = "3624277373"; google_ad_width = 728; google_ad_height = 15; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
<script type="text/javascript"><!-- google_ad_client = "pub-2947489232296736"; /* 160x600, 创建于 08-4-23MSDN */ google_ad_slot = "4367022601"; google_ad_width = 160; google_ad_height = 600; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

户的交互操作(interaction)驱动着Web站点。理解如何处理响应信息,特别是在使用新的交互操作形式(例如Ajax)的时候,这一点非常重要的。Kris Hadloc解释了Ajax请求-响应过程的本质,你应该了解这些内容,更好地为用户交互操作服务。

请求和响应

Ajax引擎分很多个方面,每个方面都很重要。如果引擎执行发送请求和接收响应信息的事务,那么它就有很多的处理响应信息的方法。响应信息是处理过程中的一个重要的部分,这是因为用户最终会与响应信息交互操作。本文详细解释了如何处理Ajax响应信息,并为用户提供反馈信息,根据需要进行更新。我们从请求的就绪状态开始,接着解释响应信息的状态、回调(callback)和分析响应信息。本文还解释了响应信息的其它一些方面,例如加载消息、错误处理和显示响应信息。

我建立了一个示例可供大家下载。这个示例包含了一个面向对象的Ajax引擎,你可以在任何Ajax应用程序中再次使用它。在讨论响应信息之前,我要指出如何建立Ajax引擎并发出请求。首先,让我们来看看Ajax引擎的代码(没有带上响应信息处理部分):

document.write("");

function Ajax()

{

 this.toString = function() { return "Ajax"; }

 this.http = new HTTP();

 this.makeRequest = function(_method, _url, _callbackMethod)

 {

this.request = (window.XMLHttpRequest)?

new XMLHttpRequest(): new ActiveXObject("MSXML2.XMLHTTP");

this.request.onreadystatechange = _callbackMethod;

this.request.open(_method, _url, true);

this.request.send(_url);

 }

}

为了建立这个对象并发出请求,你只需要使用下面两行代码:

var Ajax = new Ajax();

Ajax.makeRequest('GET', 'xml/content.xml', onResponse);

上面的第二行代码反映了你选择的请求方法、XML的路径或请求的服务器端脚本、当接收到响应信息时你希望调用的回调方法。现在你对Ajax引擎和如何发出请求已经有了一定的了解,我们来看看如何处理请求。

就绪(Ready)状态

就绪状态由回调方法来处理,当我们做出请求的时候,回调方法就已经设置好了。在例子中,onResponse被设置为回调方法,它在本文中被用于处理所有的分析代码的操作。我们将使用下面的代码来检测回调方法中的Ajax对象的就绪状态:

function onResponse()

{

 if(Ajax.checkReadyState('body', 'loading...', 'loading...', 'loading...') == "OK")

 {

// 此处是分析代码

 }

}

上面的代码显示,我们将向checkReadyState方法传递四个参数。第一个参数是我们希望显示的加载(loading)消息div的ID、其它三个参数都是自定义的对应于不同状态的加载消息。我选择的用于加载消息的div的名字是body,它使得新数据在被载入的时候,内容和加载消息是合并在一起的。下面是实际的checkReadyState方法,它处理了我们刚才讨论的代码,并在div中向我们传递进去的参数来显示它。这个方法也被包含在示例Ajax引擎中了。

this.checkReadyState = function(_id, _1, _2, _3)

{

 switch(this.request.readyState)

 {

case 1:

 document.getElementById(_id).innerHTML = _1;

 break;

case 2:

 document.getElementById(_id).innerHTML = _2;

 break;

case 3:

 document.getElementById(_id).innerHTML = _3;

 break;

case 4:

 document.getElementById(_id).innerHTML = "";

 return this.http.status(this.request.status);

 }

}

checkReadyState方法为用户提供页面状态的反馈信息是有用处的。下表显示了它检测的值:

值 状态 0 Uninitialized(未初始化) 1 Loading(正在载入) 2 Loaded(已经载入) 3 Interactive(交互) 4 Complete(完成)

你可以为每种加载状态添加一个自定义的消息--它可以是一个简单的字符串,也可以是字符串格式的图片标签(例如显示一个动画的加载GIF)。下面就是一个例子:

var loader = "〈IMG src="http://images.51cto.com/wuyou/images/loader.gif"〉";

Ajax.checkReadyState('body', loader, loader, loader);

 

不仅checkReadyState方法处理请求状态,它所包含的HTTP对象也会检测和返回请求的状态。

用户的交互操作(interaction)驱动着Web站点。理解如何处理响应信息,特别是在使用新的交互操作形式(例如Ajax)的时候,这一点非常重要的。Kris Hadloc解释了Ajax请求-响应过程的本质,你应该了解这些内容,更好地为用户交互操作服务。

请求和响应

Ajax引擎分很多个方面,每个方面都很重要。如果引擎执行发送请求和接收响应信息的事务,那么它就有很多的处理响应信息的方法。响应信息是处理过程中的一个重要的部分,这是因为用户最终会与响应信息交互操作。本文详细解释了如何处理Ajax响应信息,并为用户提供反馈信息,根据需要进行更新。我们从请求的就绪状态开始,接着解释响应信息的状态、回调(callback)和分析响应信息。本文还解释了响应信息的其它一些方面,例如加载消息、错误处理和显示响应信息。

我建立了一个示例可供大家下载。这个示例包含了一个面向对象的Ajax引擎,你可以在任何Ajax应用程序中再次使用它。在讨论响应信息之前,我要指出如何建立Ajax引擎并发出请求。首先,让我们来看看Ajax引擎的代码(没有带上响应信息处理部分):

document.write("");

function Ajax()

{

 this.toString = function() { return "Ajax"; }

 this.http = new HTTP();

 this.makeRequest = function(_method, _url, _callbackMethod)

 {

this.request = (window.XMLHttpRequest)? new XMLHttpRequest():

new ActiveXObject("MSXML2.XMLHTTP");

this.request.onreadystatechange = _callbackMethod;

this.request.open(_method, _url, true);

this.request.send(_url);

 }

}

为了建立这个对象并发出请求,你只需要使用下面两行代码:

var Ajax = new Ajax();

Ajax.makeRequest('GET', 'xml/content.xml', onResponse);

上面的第二行代码反映了你选择的请求方法、XML的路径或请求的服务器端脚本、当接收到响应信息时你希望调用的回调方法。现在你对Ajax引擎和如何发出请求已经有了一定的了解,我们来看看如何处理请求。

就绪(Ready)状态

就绪状态由回调方法来处理,当我们做出请求的时候,回调方法就已经设置好了。在例子中,onResponse被设置为回调方法,它在本文中被用于处理所有的分析代码的操作。我们将使用下面的代码来检测回调方法中的Ajax对象的就绪状态:

function onResponse()

{

 if(Ajax.checkReadyState('body', 'loading...', 'loading...', 'loading...') == "OK")

 {

// 此处是分析代码

 }

}

上面的代码显示,我们将向checkReadyState方法传递四个参数。第一个参数是我们希望显示的加载(loading)消息div的ID、其它三个参数都是自定义的对应于不同状态的加载消息。我选择的用于加载消息的div的名字是body,它使得新数据在被载入的时候,内容和加载消息是合并在一起的。下面是实际的checkReadyState方法,它处理了我们刚才讨论的代码,并在div中向我们传递进去的参数来显示它。这个方法也被包含在示例Ajax引擎中了。

this.checkReadyState = function(_id, _1, _2, _3)

{

 switch(this.request.readyState)

 {

case 1:

 document.getElementById(_id).innerHTML = _1;

 break;

case 2:

 document.getElementById(_id).innerHTML = _2;

 break;

case 3:

 document.getElementById(_id).innerHTML = _3;

 break;

case 4:

 document.getElementById(_id).innerHTML = "";

 return this.http.status(this.request.status);

 }

}

checkReadyState方法为用户提供页面状态的反馈信息是有用处的。下表显示了它检测的值:

值 状态 0 Uninitialized(未初始化) 1 Loading(正在载入) 2 Loaded(已经载入) 3 Interactive(交互) 4 Complete(完成) 

你可以为每种加载状态添加一个自定义的消息--它可以是一个简单的字符串,也可以是字符串格式的图片标签(例如显示一个动画的加载GIF)。下面就是一个例子:

var loader = "〈IMG src="http://images.51cto.com/wuyou/images/loader.gif"〉";

Ajax.checkReadyState('body', loader, loader, loader);

不仅checkReadyState方法处理请求状态,它所包含的HTTP对象也会检测和返回请求的状态。

< <script type="text/javascript"><!-- google_ad_client = "pub-2947489232296736"; /* 728x15, 创建于 08-4-23MSDN */ google_ad_slot = "3624277373"; google_ad_width = 728; google_ad_height = 15; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
<script type="text/javascript"><!-- google_ad_client = "pub-2947489232296736"; /* 160x600, 创建于 08-4-23MSDN */ google_ad_slot = "4367022601"; google_ad_width = 160; google_ad_height = 600; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
阅读更多
个人分类: xml ajax
上一篇--==vb6中用图片框任意大小播放AVI电影(New)==--
下一篇在VB、VFP应用系统中收发邮件
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭