ASP.NET Web应用程序的简单AJAX实现

2017 年 12 月 4 日4070

  作者:朱先忠编译

  提要 本文描述了使用一种简单的方式来实现在ASP.NET web应用程序中加入AJAX功能。

  一、 简介

  本文描述了一种简单的方式来实现在ASP.NET web应用程序中加入AJAX功能。我们还将讨论使用AJAX的优缺点。为了说明问题,本文还提供了一些可用的JavaScript和C#.NET代码。

  二、 为什么使用AJAX

  大多数读者可能已经知道,AJAX代表了异步JavaScript+XML。这种技术首先由微软在1999年引入,并以"使用远程调用的DHTML/JavaScript web应用程序"著称。这一技术的基本思想是,允许一个互联网浏览器向一个远程页面/服务作异步的HTTP调用,并且用收到的结果更新一个当前web页面而不必刷新整个页面。根据这种技术创建者的意见,这种技术应能够改进客户端的体验-使得HTTP页面外观与使用感觉很类似于Windows桌面应用程序。

  因为这种技术的核心实现是基于互联网浏览器功能,所以其用途在当时是很有限的。但是,几年过去了,随着新一代浏览器的支持和大量的应用实践(例如Google,Amazon.com,eBay等),这种技术已经重新焕发生机。

  今天,它以AJAX著名,被作为任何提供高级用户体验的动态页面的自然的构成部分。

  三、 方案描述

  在本文中我们所推荐的方案尽管很简单,然而却十分有效地实现了AJAX功能。这个程序很容易维护和修改,不要求开发者具备任何特别的技巧;而且,根据我们的经验,它还是跨浏览器兼容的。

  基本上,一个常规的类似AJAX的实现包括两个主要组成部分:一个使用JavaScript代码进行AJAX调用并接收响应的客户端HTML页面;一个远程页面-它能够接收一个请求并对请求的信息加以响应。在客户端页面中的JavaScript代码负责实例化一个XmlHttp对象,然后提供给这个对象一个回调方法-它负责处理收到的信息,最后把请求经由XmlHttp对象发送到远程页面。所有这些都是通过JavaScript代码来实现的。

  我们的方法主要是针对于ASP.NET应用程序中的应用,并且考虑下列可能的情形:

  · AJAX调用可以发生于web应用程序的不同的ASP.NET页面上甚至是远程页面上;

  · 一远程页面URL可能包含动态计算的参数,并且可能在ASP.NET页面的code-behind处构建一个URL字符串更为方便些;

  · 在更新一个HTML页面之前,一个远程页面可能响应于一个复杂的数据分析要求;

  · 一远程页面可能或者是一个外部的第三方页面,或者是该Web应用程序自己的页面或服务。

  所有的这些考虑都显示在下图中:

ASP.NETWeb应用程序的简单AJAX实现

ASP.NET应用程序中的应用

  四、 实现

  (一) 基本AJAX JavaScript方法

  我把所有的JavaScript方法分成两部分:调用页面特定的JavaScript方法,和通用于所有调用页面的AJAX JavaScript方法。特定的方法还包括一个回调函数,由于它负责更新页面内容。通用的AJAX方法负责实例化一个XmlHttp对象并向远程页面发送异步请求。

  得到一个XmlHttp对象的过程因浏览器的不同而有所不同。我把它们区分为两种不同的基本类型:微软浏览器(IE家族之一)和Mozilla浏览器(它是指Mozilla Firefox,Netscape,或Safari之一)。我还在Opera浏览器上测试了本文中的代码,但是我不可能保证它会一直工作良好。

function GetXmlHttpObject(handler){
 var objXmlHttp = null;
 if (!window.XMLHttpRequest) {
  //微软
  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) {}
}

  如你所见,GetXmlHttpObject方法接受一个处理器参数-它是一个应该在页面特定的代码定义的回调方法的名字。现在,既然我们已经有了一个XmlHttp对象,那么我们就可以发送异步的请求了。

function SendXmlHttpRequest(xmlhttp, url) {
 xmlhttp.open('GET', url, true);
 xmlhttp.send(null);
}

  我使用一个指向一个给定URL的GET HTTP方法,但是这可以通过修改上面的JS代码加以改变。

0 0