在静态HTML文件中使用微软ASP.NET AJAX (1) -- 实现GET方法

(原文自 http://www.forhandi.com/users/handi/633020307285156250.aspx )

 

微软 ASP.NET AJAX Extension 是微软官方对 asp.net 开发的AJAX扩展，可以从下面这个网址下载： http://ajax.asp.net，开始写这篇文章的时候，最新的版本是 ASP.NET 1.0 BETA。

 

ASP.NET AJAX Extension 很好的支持了ASP.NET 2.0服务器端控件，相关的文档已经很多，本文主要描述在非ASP.NET环境中使用其客户端脚本。

 

ajax.asp.net 有三个AJAX相关下载：

 

ASP.NET AJAX 1.0 RC 微软提供的 AJAX

ASP.NET AJAX Control Toolkit 基于 ASP.NET AJAX的工具包，提供了更多的可复用组建

ASP.NET 2.0 AJAX Future December CTP 拥有更多功能的客户体验版本

 

下载安装ASP.NET AJAX后，在 C:/Program Files/Microsoft ASP.NET/ASP.NET 2.0 AJAX Extensions/v1.0.61025/MicrosoftAjaxLibrary/System.Web.Extensions/1.0.61025.0 路径下是客户端脚本，Debug 是可读性比较好的代码，Release是文件大小比较小的代码。

 

下面介绍如何在静态HTML使用此脚本库。 

1. 建立一个工作目录，然后把MicrosoftAjax.js 文件拷贝过来。本文只用这一个文件就可以了，以后文章会说明其它文件的用法。
2. 建立一个新的HTML文件，假设叫index.htm。
3. 创建一个按钮

<button id="Button1" οnclick="On_ClickGetWebRequest()" type="button">Test</button> 

4. 创建一个容器，用来呈现返回的页面。

<div id="ResultsID"></div> 

5. 创建JavaScript脚本，定义On_ClickGetWebRequest() 函数。

<script type ="text/javascript" language="javascript">

function On_ClickGetWebRequest()

    {

        // 目标页面

            var targetUrl= "http://www.sina.com.cn";

                       

        // 创建测试类的实例

        var ewrequest =

            new Samples.ExercisingWebRequest(targetUrl, "GET");

  

                    // 设置返回容器

            ewrequest.Set_ResultsId("ResultsID");

 

        // 执行

        ewrequest.Get_WebRequest();

    }

</script>

 

6. 引用JavaScript文件

<script type="text/javascript" src="MicrosoftAjax.js" language="javascript"></script>

<script type="text/javascript" src="WebRequest.js" language="javascript"></script>

第一个文件是刚才拷贝过来的文件。

第二个是我们将要建立的JavaScript文件

 

7. 在相同目录下建立WebRequest.js，该文件中调用ASP.NET AJAX 脚本的WebRequest 类，使用GET方法，获得指定的资源。
   主要的调用在 Get_WebRequest函数中 

        // 设置目标页面

        this._wRequest.set_url(this._targetPage);

       

        // 设置GET/POST方法

        this._wRequest.set_httpVerb(this._verb);

 

        // 设置超时时间

        this._wRequest.set_timeout(100000);

              

        // 当invoke完成后，执行的回调函数

        this._wRequest.add_completed(this.On_WebRequestComplete);

          

        // 使用XMLHTTP 来执行 WebRequest

        var executor = new Sys.Net.XMLHttpExecutor();

        this._wRequest.set_executor(executor);

       

        // 执行

        this._wRequest.invoke();

 

文件太长，点 此处下载。

 

测试一下。应该就可以获得目标资源的数据，并且显示在index.htm的ResultsID容器中。

 

虽然本文只写了1天，但是当写完文章的时候，突然发现最新版本已经变成ASP.NET AJAX 1.0 RC了。重新修改了一些地方，程序依然可以跑通。

 

本文参考了官方文章 http://ajax.asp.net/docs/ClientReference/Sys.Net/WebRequestClass/default.aspx 代码，对其代码进行了简化，精简其面向对象的封装，以更好的说明其引用的过程。

 

全文的代码 这里下载，不过别忘了把MicrosoftAjax.js文件拷贝到相同目录。