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

本文介绍如何在非ASP.NET环境下利用微软ASP.NET AJAX Extension进行客户端脚本开发,通过具体示例展示了如何使用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" onclick="On_ClickGetWebRequest()" type="button">Test</button> 

  1. 创建一个容器,用来呈现返回的页面。
<div id="ResultsID"></div> 
  1. 创建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>
 
  1. 引用JavaScript文件
<script type="text/javascript" src="MicrosoftAjax.js" language="javascript"></script>
<script type="text/javascript" src="WebRequest.js" language="javascript"></script>
第一个文件是刚才拷贝过来的文件。
第二个是我们将要建立的JavaScript文件
 
  1. 在相同目录下建立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文件拷贝到相同目录。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值