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; }
function GetMSXmlHttp() { var xmlHttp = null; var clsids = ["Msxml2.XMLHTTP.6.0","Msxml2.XMLHTTP.5.0","Msxml2.XMLHTTP.4.0","Msxml2.XMLHTTP.3.0", "Msxml2.XMLHTTP.2.6","Microsoft.XMLHTTP.1.0", "Microsoft.XMLHTTP.1","Microsoft.XMLHTTP"]; for(var i=0; i<clsids.length && xmlHttp == null; i++) { xmlHttp = CreateXmlHttp(clsids[i]); } return xmlHttp; }
function CreateXmlHttp(clsid) { var xmlHttp = null; try { xmlHttp = new ActiveXObject(clsid); lastclsid = clsid; return xmlHttp; } catch(e) {} }由于MSXML5只是为Office设计的,因此,我们可以不考虑MSXML5。所以GetMSXmlHttp方法可以简化为以下形式:
function GetMSXmlHttp() { var xmlHttp = null; var clsids = ["Msxml2.XMLHTTP.6.0","Msxml2.XMLHTTP.4.0","Msxml2.XMLHTTP.3.0"]; for(var i=0; i<clsids.length && xmlHttp == null; i++) { xmlHttp = CreateXmlHttp(clsids[i]); } return xmlHttp; } |
我们可以看出,GetXmlHttpObject方法有一个handle参数,这个参数指向一个回调方法,这个回调方法将被定义在每一个需要刷新的aspx页中。现在我们已经有了一个XmlHttp对象,接下来我们可以发送一个异步的HTTP请求了。
function SendXmlHttpRequest(xmlhttp, url) { xmlhttp.open('GET', url, true); xmlhttp.send(null); } |
在以上代码中我使用了一个GET HTTP请求发送了一个URL,你可以很容易修改以上的JavaScript代码,使其发送其它的HTTP方法。
写在aspx页中的方法
现在我们已经编写完调用远程页面的所有方法。为了执行这些方法,我们需要为GetXmlHttpObject方法传递一个回调方法名,然后向SendXmlHttpRequest方法传递一个URL字符串。下面是相应的实现代码:
var xmlHttp;
function ExecuteCall(url) { try { xmlHttp = GetXmlHttpObject(CallbackMethod); SendXmlHttpRequest(xmlHttp, url); } catch(e){} }
//CallbackMethod will fire when the state //has changed, i.e. data is received back function CallbackMethod() { try { //readyState of 4 or 'complete' represents //that data has been returned if (xmlHttp.readyState == 4 || xmlHttp.readyState == 'complete') { var response = xmlHttp.responseText; if (response.length > 0) { //update page document.getElementById("elementId").innerHTML = response; CallbackMethod方法负责更新页面。在我们的例子中,它只更新了指定的HTTP对象的inner HTML。但在实际应用中,可以更新更多的内容。
最后要解决的问题是我们如何在aspx页中调用ExecuteCall方法。如何调用ExecuteCall方法取决于这个页面要做什么。在一些情况下,ExecuteCall方法可以在JavaScript事件出发时调用。如果这样做,我们还可以使用相应的aspx页后端C#代码将这个方法注册为启动脚本。
Page.RegisterStartupScript("ajaxMethod", String.Format("<script>ExecuteCall('{0}');</script>", url)); |
我们可以将上面代码加到ASP.NET后端代码的Page_Prerender或Page_Load方法中。
服务端页面
让我们看看服务端页面象什么。如果它是一个ASP.NET页(我们假设的),我们仅仅对它的后端代码感性趣。我们可以将.aspx文件中代码都删除,这样丝毫不会影响这个aspx页的功能。
例如,我们有一个将摄氏度转换为华氏度的web service。如果你将这个web service的URL的引用加入到你的工程中,Visual Studio将产生一个叫"com.developerdays.ItempConverterservice"的代理类,这个代理类使用当前的命名空间。有一个名为getTemp.aspx的aspx页,它接收一个叫"temp"的查询参数,这参数包含一个整数的摄氏度值。如http://localhost/getTemp.aspx?temp=25。这个aspx页的后端代码如下:
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(); } |
现在我们要建立一个可以调用上面的getTemp.aspx页的请求字符串,这个字符串将传递到RegisterStartupScript方法中。代码如下:
int tempC = 25; string url = String.Format("http://localhost/" + "getTemp.aspx?temp={0}", tempC); |
在一些简单情况,如果要传递的只是简单的文本,可以通过URL直接传给ExecuteCall方法。
结论
本文举了一个在任何ASP.NET程序都可以使用AJAX技术的简单例子。AJAX除了能给用户一些全新的体验外,也有一些缺点和不足。至于是否使用AJAX技术,这完全取决于开发人员自身,在本文中我只是举了个简单的例子,学习它并不需要太多的时间,也不需要任何特殊的技能。
} } } catch(e){} }
| |