基于AJAX的异步请求对多数据处理页面的优化

摘要：在网站实际的开发中，总会因为客户端和服务器端频繁的交互而大大降低了网页的浏览速度，在本文中首先对AJAX的技术要点作出了初步的介绍，并在实际开ASP.Net中发中让网站开发语言和AJAX相结合，实现HTTP的异步请求以对网页的加载进行优化。

关键字：AJAX，线程，异步请求

1.什么是AJAX
　　
　　1.1初识AJAX

其实Ajax不是一个技术，它更像是一个模式----标志并描述有用的设计技巧的一种方法，AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。它有机地包含了以下几种技术：
基于web标准（standards-based presentation）XHTML+CSS的表示；
使用 DOM（Document Object Model）进行动态显示及交互；
使用 XML 和 XSLT 进行数据交换及相关操作；
使用 XMLHttpRequest 进行异步数据查询、检索；
使用 JavaScript 将所有的东西绑定在一起。

　　1.2 AJAX与传统开发的比较
　
传统的web应用允许用户填写表单(form)，当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单，然后返回一个新的网页。这个做法浪费了许多带宽，因为在前后两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。与此不同，AJAX应用可以仅向服务器发送并取回必需的数据，它使用SOAP或其它一些基于XML的web service接口，并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少，结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成，所以Web服务器的处理时间也减少了。

图 传统的开发与AJAX处理交互的比较

传统web应用与AJAX应用的比较：交互模式

2.基于Ajax的应用程序架构

浏览器端框架被划分成两大类：
·应用程序框架：提供浏览器的功能，但是常以包括窗口小部件抽象和另外的部件而出名，其功能主要围绕桌面GUI框架。
·基本结构框架：提供基本的管道和可移植的浏览器抽象，让开发者去创建内容。典型的功能：
* 针对XMLHttpRequest的包装器以封装浏览器-服务器的交互。(所有的框架都提供这一功能)。
* XML操作和查询。
* 根据来自XMLHttpRequest的应答执行DOM操作。
* 在一些情况中，与另外的浏览器端技术如Flash(和潜在的Java applets)集成在一起。
而服务器端框架通常以下面两种方式工作(尽管它们在这里根据语言的不同进行了分类)：
·HTML/JS生成：服务器提供完整的HTML/Javascript代码生成和浏览器-服务器协调，结果是只有浏览器端编码可以被定制。
·远程调用：Javascript调用直接被路由到服务器端功能(例如Java方法)并返回到Javascript回叫处理器；或者Javascript调用服务器以提取信息，例如会话细节，数据库查询等。

3. .NET使用AJAX的异步Http请求对网页加载的优化一个例子

3.1 问题

事实上，用户在操作计算机时，如果等待时间超过大约200毫秒，他们一般都感到厌烦。当你的基于万维网的应用程序使用一个需要耗费许多秒甚至几分钟的进程时，这可能成为一个问题。显然，你不可能仅通过建立一个进度条对话框或一等待光标就算万事大吉。
创建一个页面-它用于为五个不同的急症病人报告当前的体温温、血压和另外一些信息。页面装载事件代码为数据格子创建一个数据集。然后，迅速处理多个病人并且调用该web服务以得到数据。然后，该方法把数据从web服务填充到该数据集并且把它依附于一个DATAGRID控件.Web服务要花费大约五秒钟来取得每一项数据。因此，如果我让该页面加载运行，那么在服务器返回一页面前要花费大约一分钟-这对于任何用户都是无法接受的等待时间。

3.2 传统开发中对于多数据查询页面加载的处理方法

　　* 线程解决方案：使用多线程的技术对页面周期性地得到处理的更新
* 查询解决方案：页面将每隔一个时间间隔向它自己回寄一个查询到的数据。请求工作在第一个页面中就开始了。此后，该页面将通过钩住工作的数据输送到页面中的数据格子来监视页面的输出。

3.3 使用AJAX解决方案

页面的Javascript中部分函数及其功能：
StartHTTPRequest:开始创建一个HTTP请求
function createHTTPRequest( handler )
{
var req = null;
if (typeof window.ActiveXObject != 'undefined' )
{
// Build the Microsoft variation
req = new ActiveXObject("Microsoft.XMLHTTP");
req.onreadystatechange = handler;
}
else
{
// Build the standards compliant variation
req = new XMLHttpRequest();
req.onload = handler;
}
return req;
}
addField：它增加从服务器中以XML形式返回的不同字段

function addField( sid, stitle )
{
s_fields.push( { id: sid, title: stitle } );//其中s_fiels是上边定义的一个变量
}
getData：调用createHTTPRequest开始一个请求
var s_req = null;
function getData()
{
s_req = createHTTPRequest( handleResponse );
try {
s_req.open( 'GET', s_url+"&count="+s_reqcount, true );
s_reqcount += 1;
s_req.send( "" );
} catch( e ) {
alert( e.toString() );
}
}
handleResponse：函数分析XML并且为该数据表格创建一些新的HTML-这个HTML将被放置到"grid"标签中
在Internet　Explorer中的页面重载会在页面变成一片空白并等待重载之时造成一次听得见的鼠标击键和一次屏幕闪动。如果它每隔两秒发生一次，这可能相当烦人。AJAX提供了一种选择-只有一个页面加载并且页面中的Javascript请求每隔500毫秒请求状态时，才动态地更新页面
在页面中的Javascript首先激活addField调用。startup页面开始第一次到服务器的请求。getData通过调用createHTTPRequest开始一个请求。这个函数通过具有跨平台的代码来构建HTTP请求对象。该HTTP请求是异步的。在请求完成时，调用handleResponse函数分析XML并且为该数据表格创建一些新的HTML-这个HTML将被放置到"grid"标签中。代码中的page_load启动以上工作，然后用数据请求页面的URL设置隐藏的输入字段。另创建一个get_data.aspx页面使用一个请求ID并且返回一个当前数据集合的XML描述。该页面代码显示于下:
//get_data.aspx
<%@Page Language="c#" Codebehind="get_data.aspx.cs" AutoEventWireup="false" Inherits="background.get_data"%>
页面的后台代码，-它首先把响应的内容类型设置为"text/xml"。如果在浏览器中不存在该AJAX代码，那么就不会从响应中生成一个XML文档。此后，代码得到请求并且要求DataSet生成该XML。当请求完成时页面加载完成!

4 结论
在.Net中使用AJAX技术对上多数据查询处理，和多客户端/服务器端交互的页面存在的问题有着很多方面的完善：因为异步的HTTP请求，使Web页面不用打断交互流程进行重新加裁，就可以动态地更新。在B/S模式的开发中，客户端用户不必因为频繁的刷新而烦恼!为复杂的客户端和服务器端交互页面提供了一个更加完美交互体系 (这也是很多人将AJAX称之为无刷新技术的一个主要原因) !

5 参考文献

《AJAX技术汇总》

《AJAX+ASP.NET解决网页打开等待问题》