据我所知这项技术最初是由Microsoft在年提出来的也就是我们所熟知的使用远程调用（remote calls）的DHTML / JavaScript web应用程序这项技术的核心就是通过浏览器发出一个异步的HTTP请求来调用服务端的网页或服务在返回结果后无需刷新就可以更新整个网页这项技术经过不断地完善到目前为此使用AJAX的web程序从表现上看已经非常类似于Windows程序了
由于这项技术的实现需要依赖于前端的浏览器因此它的使用受到了限制但在最近的几年由于浏览器功能的加强和一些公司如Google的许多基于AJAX的应用的不俗表现终于使这项技术凤凰涅磐欲火重生
现在AJAX的使用已经非常广泛任何带有丰富用户体验的动态网页都会不约而同地使用AJAX
解决方案
本文所描述的使用AJAX的方法非常简单而且效率很高同时这种方法还非常容易维护并且开发人员无需任何的特殊技巧就可以实现它而且使用这种方法还可以跨浏览器
一个基本的AJAX实现需要两个主要部分一个使用JavaScript代码编写的客户端HTML页这些JavaScript用来向服务端发送请求和接收响应一个可以接收请求和向客户端发送响应信息的远程页面客户端的JavaScript代码的任务是建立一个XmlHttp对象然后向服务端发送请求信息最后通过回调方式处理服务端返回的响应信息这一切都是由JavaScript代码实现的
本文的例子使用ASPNET程序实现在实现上要做到以下几点AJAX可以在不同的ASPNET页上向不同的服务端页发送请求
远程页面URL可以包含动态可计算的参数这样做可以在ASPNET的后端代码中更方便地建立URL字符串
远程页在更新HTML页之前可以使用复杂的数据进行响应这也可以由ASPNET的后端代码完成
一个服务端页面可以是一个扩展的第三方的页面也可以是本身的web页或服务
以上的几点如图所示
)thisstylewidth=; border= twffan=done>
图
实现基本的AJAX JavaScript方法我将JavaScript方法分成两部分调用特殊页的JavaScript方法和一般的JavaScript方法特殊的方法包括一个回调方法它的作用是更新页面内容而其它的AJAX方法负责建立一个XmlHttp对象并向服务端发出一个异步的HTTP请求
建立的XmlHttp对象因客户端浏览器的不同而有所差异本文只考虑两种浏览器一个是Microsoft的IE系列浏览器另一个是Mozilla系列浏览器包括Mozilla FirefoxNetscape和Safari我也在Opera浏览器上测试过但我不能保证本文的代码可以很好地运行Opera浏览器上下面是如何建立XmlHttp对象的代码
borderColorDark=#ffffff cellPadding=
width=
align=center borderColorLight=#
border=
>e
e
>
function GetXmlHttpObject(handler){var objXmlHttp = null;if (!windowXMLHttpRequest){// MicrosoftobjXmlHttp = GetMSXmlHttp();if (objXmlHttp != null){objXmlHttponreadystatechange = handler;}}else{// Mozilla | Netscape | SafariobjXmlHttp = new XMLHttpRequest();if (objXmlHttp != null){objXmlHttponload = handler;objXmlHttponerror = handler;}}return objXmlHttp;}function GetMSXmlHttp(){var xmlHttp = null;var clsids = [MsxmlXMLHTTPMsxmlXMLHTTP
MsxmlXMLHTTPMsxmlXMLHTTPMsxmlXMLHTTPMicrosoftXMLHTTPMicrosoftXMLHTTPMicrosoftXMLHTTP];for(var i=; ixmlHttp = createXmlHttp(clsids[i]);}return xmlHttp;}function createXmlHttp(clsid) {var xmlHttp = null;try {xmlHttp = new ActiveXObject(clsid);lastclsid = clsid;return xmlHttp;}catch(e) {} }
由于MSXML只是为Office设计的因此我们可以不考虑MSXML
所以GetMSXmlHttp方法可以简化为以下形式
borderColorDark=#ffffff cellPadding=
width=
align=center borderColorLight=#
border=
>e
e
>
function GetMSXmlHttp() {var xmlHttp = null;var clsids = [MsxmlXMLHTTP
MsxmlXMLHTTPMsxmlXMLHTTP];for(var i=; ixmlHttp = createXmlHttp(clsids[i]);}return xmlHttp; }
我们可以看出GetXmlHttpObject方法有一个handle参数这个参数指向一个回调方法这个回调方法将被定义在每一个需要刷新的aspx页中现在我们已经有了一个XmlHttp对象接下来我们可以发送一个异步的HTTP请求了
borderColorDark=#ffffff cellPadding=
width=
align=center borderColorLight=#
border=
>e
e
>
function SendXmlHttpRequest(xmlhttp url) {xmlhttpopen(GET url true);xmlhttpsend(null);}
在以上代码中我使用了一个GET HTTP请求发送了一个URL你可以很容易修改以上的JavaScript代码使其发送其它的HTTP方法
写在aspx页中的方法
现在我们已经编写完调用远程页面的所有方法为了执行这些方法我们需要为GetXmlHttpObject方法传递一个回调方法名然后向SendXmlHttpRequest方法传递一个URL字符串下面是相应的实现代码
borderColorDark=#ffffff cellPadding=
width=
align=center borderColorLight=#
border=
>e
e
>
var xmlHttp;function executeCall(url){try{xmlHttp = GetXmlHttpObject(CallbackMethod);SendXmlHttpRequest(xmlHttp url);}catch(e){}}//CallbackMethod will fire when the state//has changed ie data is received backfunction CallbackMethod(){try{//readyState of or complete represents//that data has been returnedif (xmlHttpreadyState == ||
xmlHttpreadyState == complete){var response = xmlHttpresponseText;if (responselength > ){//update pagedocumentgetElementById(elementId)
innerHTML = response;}}}catch(e){} }
CallbackMethod方法负责更新页面在我们的例子中它只更新了指定的HTTP对象的inner HTML但在实际应用中可以更新更多的内容
最后要解决的问题是我们如何在aspx页中调用executeCall方法如何调用executeCall方法取决于这个页面要做什么在一些情况下executeCall方法可以在JavaScript事件出发时调用
如果这样做我们还可以使用相应的aspx页后端C#代码将这个方法注册为启动脚本
PageRegisterStartupScript(ajaxMethod StringFormat( url));
我们可以将上面代码加到ASPNET后端代码的Page_Prerender或Page_Load方法中
服务端页面
让我们看看服务端页面象什么如果它是一个ASPNET页(我们假设的)我们仅仅对它的后端代码感性趣我们可以将aspx文件中代码都删除这样丝毫不会影响这个aspx页的功能
例如我们有一个将摄氏度转换为华氏度的web service如果你将这个web service的URL的引用加入到你的工程中Visual Studio将产生一个叫comdeveloperdaysItempConverterservice的代理类这个代理类使用当前的命名空间有一个名为getTempaspx的aspx页它接收一个叫temp的查询参数这参数包含一个整数的摄氏度值如x?temp=这个aspx页的后端代码如下
borderColorDark=#ffffff cellPadding= width= align=center borderColorLight=# border=>ee>
private void Page_Load(object sender EventArgs e){ResponseClear();string temp = RequestQueryString[temp];if (temp != null){try{int tempC = intParse(temp);string tempF = getTempF(tempC);ResponseWrite(tempF);}catch{}}ResponseEnd();}private string getTempF(int tempC){comdeveloperdaysITempConverterservicesvc = new ITempConverterservice();int tempF = svcCtoF(tempC);return tempFToString();}
