[今天又去]()了周公博客逛了一下,看到他写的关于 Ajax 的文章,又想起他《Asp.net 夜话》一书中提到的相关 Ajax 技术,所以也想写一篇关于 Ajax 实现的文章了。
讲 Ajax 技术的相关文章实在是太多了,而且我在此领域最多刚入门而已,因此我不想、也不敢乱花文字在介绍它上面。关于它的相关定义及其他介绍,请参见 ajax 在百度百科的网页:http://baike.baidu.com/view/1641.htm  总的来说,AJAX即“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建异步交互式网页应用的网页开发技术。

AJAX概要

其实AJAX应用的核心就是XMLHttpRequest,通过现象看本质,即使使用微软的AJAX服务器控件最终也是需要这些的,只不过使用微软AJAX服务器控件开发AJAX应用时我们不需要关心JS脚本的实现,只需关心业务逻辑就可以了,因而可以简化开发和提高开发速度。AJAX的基础是XHTML、CSS、DOM、JavaScript、XML及XMLHttpRequest。

正确使用AJAX技术可以改善用户体验,是用户与服务器的交互更流畅,某些情况下还能减少服务器流量。在以前AJAX只是作为一种比较炫的技术为一些大型网站所使用,现今这个比云计算还要流行了,至少云计算更多地还是停留在人们的概念里,而AJAX确确实实应用在WEB开发当中了。WEB开发人员的招聘都是言必精通AJAX技术。

**

在 Asp.net 中实现 Ajax

**在 asp.net 中实现 Ajax 的方式有很多种了,主要包括有三种:

使用纯 Javascript 实现;

使用第三方 Javascript 框架平台实现;

使用第三方托管平台实现。

[**使用纯 Javascript 实现 Ajax

**]()

由于 Ajax 的本质是由 Javascript 与 xml 异步数据处理,因此只要是 Ajax,它总是由 Javascript 的 XmlHttpRequest 实现的。因此纯 Javascript 是能够实现 Ajax 的,可以使用Javascript创建 XmlHttpRequest 对象,然后使用XmlHttpRequest 对象的相关方法来完成整个 Ajax 调用的全过程。其具体步骤大致是这样的:

1  创建 XmlHttpRequest 对象配置;

2  XmlHttpRequest 对象中的请求内容;

3  使用XmlHttpRequest 对象相关方法发送请求;

4  使用在此前已给XmlHttpRequest 对象相关赋值的回调来对服务返回的结果做相应处理。

而且在上述第3步与第4步之间,用户是可以做其他事情的,也就是说整个操作是异步的,用户不需要等待此 Ajax 调用才可以进行其他操作。

由于各浏览器具有不兼容性,而且在事实上各浏览器创建XmlHttpRequest 对象的方法确有不一致的地方。因此,要想使我们编写的 Ajax 程序在不同的浏览器中能执行出相同的结果来,则我们应该写出具有兼容性的代码。如下代码能够在绝大多数支持使用XmlHttpRequest 对象进行 Ajax 调用的浏览器中创建一个非空的 XmlHttpRequest 对象:

    function creatXMLHTTP() {

        var xmlHttp = null;

        if (window.ActiveXObject) {

            var arrXmlHttpTypes = [‘MSXML2.XMLHTTP’, ‘Microsoft.XMLHTTP’, ‘MSXML2.XMLHTTP.6.0’, ‘MSXML2.XMLHTTP.5.0’, ‘MSXML2.XMLHTTP.4.0’, ‘MSXML2.XMLHTTP.3.0’];

            for (var i = 0; i < arrXmlHttpTypes.length; i++) {

                try {

                    xmlHttp = new ActiveXObject(arrXmlHttpTypes[i]);

                    break;

                }

                catch (ex) { }

            }

        }

        else if (window.XMLHttpRequest) {

            xmlHttp = new XMLHttpRequest();

        }

        return xmlHttp;

    }

在使用纯 Javascript 编写 XmlHttpRequest 请求的整个过程时,需要一步一步把请求都写清楚,如下代码可以将一个请求发送到服务器端,并要求返回“ServerTimeService.aspx”页面,在此例子中,这个 ServerTimeService.aspx 页用于向客户端输出无缓存的系统时间值。

    function GetServerTime() {

        var XmlRequest = creatXMLHTTP();   //调用上面的函数创建一个 XmlHttpRequest 对象

        if (null != XmlRequest) {

            // 当 XmlHttpRequest 对象的状态发生改变时的处理,它是一个回调

            XmlRequest.onreadystatechange = function() { if (XmlRequest.readyState == 4) {document.getElementById(‘TimeSpan’).innerHTML = XmlRequest.responseText; } }

            XmlRequest.open(“Get”, “ServerTimeService.aspx”, true);  //打开对象

            XmlRequest.send(null); //无需发任其他额外信息

        }

    }

事实上,纯 Javascript 编写的 Ajax 调用脚本可以放置在任何静态 html 页上。关于此代码的使用方法,请参照本文的示例代码文件:Ajax_OnlyJs.html(这是一个静态页面)。为了体现它的异步操作的实质,特意制作了具有相同效果的 aspx 页,它的名字是 Ajax_OnlyJs.aspx,这个 aspx 上会有一个 Label 用于显示页面载入时服务器的时间。

注意在上述代码中,处理了一个onreadystatechange 事件。它在每当 XMLHttpRequest.readyState 的值发生改变时被触发,意思是当前 XmlHttpRequest 对象的状态已发生变化,此状态的值共有5种,其可能值和对应描述如下:

0:请求未初始化,还没有调用 open()

1:请求已经建立,但是还没有发送,还没有调用 send()。

2:请求已发送,正在处理中(通常现在可以从响应中获取内容头)。

3:请求在处理中;通常响应中已有部分数据可用了,没有全部完成。

4:响应已完成;您可以获取并使用服务器的响应了。  

从上面的代码中可以看出每次实例化XMLHttpRequest对象都需要判断,而且一些常用的操作也可以封装。所以第三方 Javascript 框架平台正好实现了这一点,而且除此之外,这些框架还提供了其他令人兴奋的便捷实现;还有一点不得不提的一点是,第三方 Javascript 框架平台使用了已完成的代码解决了大部分浏览器的兼容性问题,这是十分可贵的。

返回页首

[**使用第三方 Javascript 框架平台实现 Ajax

**]()

早期比较成熟的第三方Javascript 框架有很多了,比较有名的是 Prototype。Prototype就已经实现了 Ajax 的封装,关于 Prototype 实现 Ajax 的代码,请参照周公的文章:http://blog.csdn.net/zhoufoxcn/archive/2009/12/07/4954645.aspx

不过,在这里,我想引用一下周公使用 jQuery 实现 Ajax 的实例。由于他的例子有点复杂,为了说明我们这里的话题,我继续上面的示例,重写了套示例文件。由于 jQuery 也是纯 Javascript 框架,因此它也可以直接使用在静态文件中,因此此部分的示例文件也包括 Ajax_jQyery.html 和 Ajax_jQuery.aspx 两个具有相同效果的示例文件,后者用于说明在 asp.net 中的无刷新体验的实现。

使用 jQuery 框架前,需要引入它的主文件,然后使用它提供的便捷方式实现 Ajax。下面是脚本代码,您可以在示例文件中体会它们的用法。关于 jQuery 的使用方法,请参照其他资料。

 

返回页首

[**使用第三方托管平台实现 Ajax

**]()

在上面的方式中无论使用自己写全部JavaScript脚本还是利用 jQuery 这类框架的方式,都是需要写一些JS脚本的。那么有没有尽可能少写脚本的方式呢?毕竟我们知道JS脚本调试起来相对较为困难些。答案是有的,那就是使用托管平台。我们知道 Asp.net 本身就是托管服务器脚本的一个很好的实例,它用来托管生成 html;那可不可以托管生成 js 呢?答案是有的!无私的开发人员开发出了众多的 Ajax 托管平台,比较成熟的有 Asp.net 本身的页面回调(CallBack)、 AjaxPro 和 微软 Ajax 控件库。

Asp.net 本身提供了便利的 CallBack 回调功能,可以很轻松地实现 Ajax 调用;透过 ASP.NET 的 Client Callback 技术,可让 JavaScript 和 .NET 直接作沟通,并且远快于下面即将提到的微软 Ajax 扩展的 UpdatePanel 控件的速度,高速执行 Web 应用程序。关于回调技术,请参照 MSDN 的相关介绍,因为它是 .Net 的成员;

前面几种开发AJAX应用的方式不管怎么做都还没有完全脱离JavaScript,一些初学者(就是那些感觉做ASP.NET开发就只是拖拽控件)感觉这个还是有些难度,还是需要写JavaScript来操作HTML页面,为了彻底减轻这部分人掌握ASP.NET中AJAX开发,微软推出了AJAX服务器端控件。关于微软 Ajax 库,请参照微软在 www.asp.net 上提供的相关文档及视频资料来学习,使用微软 AJAX 服务器端控件可以在做简单设置的情况下满足开发环境中的大部分简单需求。

这里,我们来看关注另一个第三方托管平台:AjaxPro   (网站:http://ajaxpro.info)AjaxPro 为 Ajax 调用后台过程筑就了类似在后台调用一样的效果,整个过程让我们感到如此自然如此轻松。我不得佩服作者的能力,虽然它也有一些缺点(一些文章称它与 Forms 鉴别有冲突,但我在 AjaxPro 提供的 Web.Config 中找到了相关配置,认为其应该支持 Forms 鉴别,不过目前尚未证实)。

下在的例子中,我在页面 .cs 代码中写了一个函数,并用它来返回系统当前的时间,并在它前面为它标注 [AjaxPro.AjaxMethod] 属性:

    [AjaxPro.AjaxMethod]

    public string GetServerTime()

    {

        return DateTime.Now.ToString();

    }

而且在 Page_Load() 事件中使用下面的语句向 AjaxPro 注册当前页面的类:

AjaxPro.Utility.RegisterTypeForAjax(typeof(AjaxDemo_Ajax_Ajaxpro));

这样,我便可以在此页的前台代码中直接使用上面定的函数,这里是前台的脚本代码:

        function GetServerTime() {

           // 下面的语句调用了后台的函数,就像是直接调用似的!

            var serverTime = AjaxDemo_Ajax_Ajaxpro.GetServerTime().value;

            document.getElementById(‘TimeSpan’).innerHTML = serverTime;

        }

这样,每当我在页面中调用 GetServerTime() 即可获取服务器上的时间了,AjaxPro 完全把 Ajax 调用隐藏得无隐无踪!这便是托管代码的艺术。

需要注意的是,AjaxPro 自身也是 .Net 程序集,而且供前台调用的函数放在后台代码中,因此它与前述几种技术不同,它只能在 .Net 中使用。因此,此例,我只提供了 aspx 页的示例:Ajax_AjaxPro.aspx。

此外,要想在 .Net  中正确地使用 AjaxPro,需要使用如下方法将它引进我们正在制作的工程:

★ 将AjaxPro 的类库 AjaxPro.2.dll 放在网站 bin 目录中;

★ 在 VS 中使用“网站”菜单中的“添加引用”(以“新建网站”的方式)或者在解决方案浏览器中右击当前 Web 项目、选择“添加引用”(以“Web 项目”的方式)来将AjaxPro.2.dll 程序集引用于网站中

★ 再按本示例的方式正确地配置 Web.Config 文件(Web.Config 配置方法在 AjaxPro 的文档中有相关说明)

返回页首

相关示例文件: AjaxDemo.rar (107.30 kb)