AJAX,全称为AsynchronousJavaScriptand XML,是一种在不刷新整个页面的情况下,与服务器交换数据并更新部分网页的技术。本文将探讨AJAX在ASP.NET应用中的实现方式,并讨论其优缺点。
AJAX技术最早由微软在1999年提出,当时被称为“DHTML / JavaScript web application with remote calls”。其核心思想是允许浏览器异步地向远程页面/服务发送HTTP请求,并在不刷新整个页面的情况下,用接收到的结果更新当前网页。这种技术的出现,旨在改善用户体验,使HTTP页面的体验更接近于Windows应用程序。
随着浏览器的支持和谷歌、亚马逊、eBay等巨头的广泛应用,AJAX技术已经重生,并被认为是任何动态网页的自然组成部分,为用户提供了更高级的体验。
本文提出的解决方案是一种简单而有效的AJAX功能实现方式。它易于维护和修改,不需要开发者具备特殊技能,并且据所知,它是跨浏览器兼容的。
一个典型的AJAX实现包括两个主要部分:客户端HTML页面(包含发起AJAX调用并接收响应的JavaScript代码),以及远程页面(可以接收请求并返回所需信息)。客户端页面的JavaScript代码负责实例化一个XmlHttp对象,然后为该对象提供一个回调方法,用于处理接收到的信息,最后通过XmlHttp对象向远程页面发送请求。所有这些操作都是通过JavaScript代码完成的。
方案旨在用于ASP.NET应用程序,并考虑了以下可能的场景:
将JavaScript方法分为两部分:特定于调用页面的JavaScript方法和所有调用页面通用的AJAX JavaScript方法。特定方法包括回调方法,它负责更新页面内容。通用AJAX方法负责实例化XmlHttp对象并发送异步请求到远程页面。
获取XmlHttp对象的方式取决于浏览器类型。区分了两种基本类型:微软浏览器(IE系列)和Mozilla浏览器(Mozilla Firefox、Netscape或Safari)。也在Opera浏览器上测试了代码,但不能保证它总是能很好地工作。
function GetXmlHttpObject(handler) {
var objXmlHttp = null;
if (!window.XMLHttpRequest) {
// Microsoft
objXmlHttp = GetMSXmlHttp();
if (objXmlHttp != null) {
objXmlHttp.onreadystatechange = handler;
}
} else {
// Mozilla | Netscape | Safari
objXmlHttp = new XMLHttpRequest();
if (objXmlHttp != null) {
objXmlHttp.onload = handler;
objXmlHttp.onerror = handler;
}
}
return objXmlHttp;
}
现在已经有了XmlHttp对象,可以发送异步请求。
function SendXmlHttpRequest(xmlhttp, url) {
xmlhttp.open('GET', url, true);
xmlhttp.send(null);
}
现在有了所有需要的方法来调用远程页面。为了做到这一点,需要将回调方法名称传递给GetXmlHttpObject方法,然后将URL字符串传递给SendXmlHttpRequest方法。
var xmlHttp;
function ExecuteCall(url) {
try {
xmlHttp = GetXmlHttpObject(CallbackMethod);
SendXmlHttpRequest(xmlHttp, url);
} catch (e){}
}
// CallbackMethod将在状态改变时触发,即数据被接收回来
function CallbackMethod() {
try {
// readyState的4或'complete'表示数据已返回
if (xmlHttp.readyState == 4 || xmlHttp.readyState == 'complete') {
var response = xmlHttp.responseText;
if (response.length > 0) {
// 更新页面
document.getElementById("elementId").innerHTML = response;
}
}
} catch (e){}
}
最后一个问题是如何在调用页面中调用ExecuteCall JS方法。这取决于页面正在执行的操作。在某些情况下,ExecuteCall方法可以在JS事件触发时被调用。如果不是这种情况,可以在页面的代码后台中使用相应的C#代码将该方法注册为页面启动脚本。
Page.RegisterStartupScript("ajaxMethod", String.Format("", url));
让看看远程页面可能是什么样子。如果这是一个ASP.NET页面(假设是),只对代码后台感兴趣。可以轻松地从.aspx文件中移除所有代码:它不会影响页面的行为。
例如,使用一个公共的Web服务,将摄氏温度值转换为华氏温度,反之亦然。该服务在此处可用。如果将这个URL作为Web引用添加到项目中,Visual Studio将在当前的命名空间中生成一个名为com.developerdays.ITempConverterservice的代理类。远程ASP.NET页面,将其命名为getTemp.aspx,将接受一个名为“temp”的查询字符串参数,它应该包含一个摄氏温度的整数值以进行转换。因此,目标URL将如下所示:
http://localhost/getTemp.aspx?temp=25
页面的代码后台如下所示:
private void Page_Load(object sender, EventArgs e) {
Response.Clear();
string temp = Request.QueryString["temp"];
if (temp != null) {
try {
int tempC = int.Parse(temp);
string tempF = getTempF(tempC);
Response.Write(tempF);
} catch {
}
}
Response.End();
}
private string getTempF(int tempC) {
com.developerdays.ITempConverterservice svc = new ITempConverterservice();
int tempF = svc.CtoF(tempC);
return tempF.ToString();
}