ASP.NET中AJAX编程开发指南

AJAX介绍

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

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

下面分别讲讲在ASP.NET开发中可以供选择的开发AJAX应用的方式：

采用纯JavaScript实现

在武侠小说中绝顶高手飞花摘叶都可以伤人，在WEB开发领域真正的高手也可以无需借助任何其它库就可以开发出AJAX应用。不适用任何第三方库开发AJAX应用就需要自己区分浏览器来实例化XMLHttpRequest对象实例，下面的代码是一个简单的调用AJAX的代码：

view plaincopy to clipboardprint?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  
<html xmlns="http://www.w3.org/1999/xhtml" >  
  
<head>  
  
    <title>获取服务器时间的例子</title>  
  
    <mce:script language="javascript" type="text/javascript"><!--   
var request=false;   
  
//实例化XMLHttpRequest   
  
function createXMLHttpRequest()   
  
{   
  
    try   
  
    {   
  
        //下面的方法有可能抛出异常，表示当前浏览器不支持此方法   
  
        request=new ActiveXObject("Msxml2.XMLHTTP");   
  
    }   
  
    catch(e1)//当通过上面的方法实例XMLHttpRequest发生异常   
  
    {   
  
        try   
  
        {   
  
            //下面的方法有可能抛出异常，表示当前浏览器不支持此方法   
  
            request=new ActiveXObject("Microsoft.XMLHTTP");   
  
        }   
  
        catch(e2)//当通过上面的方法实例XMLHttpRequest发生异常   
  
        {   
  
            request=false;   
  
        }   
  
    }   
  
    //当上面的方法都不能实例化XMLHttpRequest时，表示非IE浏览器   
  
    if(!request&&typeof XMLHttpRequest!=’undefined’)   
  
    {   
  
        //非IE浏览器实例化XMLHttpRequest的方法   
  
        request=new XMLHttpRequest();   
  
    }   
  
       
  
}   
  
//发送客户端请求的方法   
  
function getServerTime(format)   
  
{   
  
    //调用上面的方法实例化XMLHttpRequest   
  
    createXMLHttpRequest();   
  
    //要请求的URL地址，注意escape是javascript中的方法   
  
    //用于对特殊字符进行转义   
  
    var url="ServerTime.aspx?format="+escape(format);   
  
    //alert(url);//可以通过这种方法查看服务器的返回结果   
  
    //通过GET方式打开请求，第三个参数true表示异步发送请求，false则为同步   
  
    request.open("GET",url,true);   
  
    //当request的等待状态发生变化时要执行的客户端方法   
  
    request.onreadystatechange=update;//update是客户端的javascript方法   
  
    //因为在请求的url中已经附带了参数，所以这里的参数是null   
  
    //表示不再发送额外的数据   
  
    request.send(null);   
  
}   
  
//当接收到服务器的响应之后执行的客户端方法   
  
function update()   
  
{   
  
    if(request.readyState==4)   
  
    {   
  
        //alert(request.responseText);//查看服务器响应结果   
  
        document.getElementById("time").innerHTML=request.responseText;   
  
    }   
  
}   
  
       
// --></mce:script>  
  
</head>  
  
<body>  
  
<table border="0">  
  
    <tr>  
  
    <td>服务器时间</td><td><div id="time"></div></td>  
  
    </tr>  
  
    <tr>  
  
    <td><input type="button" value="完整时间" onclick="javascript:void getServerTime(’yyyy-mm-dd hh:mm:ss’);"  /></td><td><input type="button" value="年月日" onclick="javascript:void getServerTime(’yyyy-MM-dd’);"  /></td>  
  
    </tr>  
  
    <tr>  
  
    <td><input type="button" value="时分秒" onclick="javascript:void getServerTime(’hh:mm:ss’);" /></td><td><input type="button" value="月份日期"  onclick="javascript:void getServerTime(’mm-dd’);" /></td>  
  
    </tr>  
  
    </table>  
  
</body>  
  
</html>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

    <title>获取服务器时间的例子</title>

    <mce:script language="javascript" type="text/javascript"><!--
var request=false;

//实例化XMLHttpRequest

function createXMLHttpRequest()

{

    try

    {

        //下面的方法有可能抛出异常，表示当前浏览器不支持此方法

        request=new ActiveXObject("Msxml2.XMLHTTP");

    }

    catch(e1)//当通过上面的方法实例XMLHttpRequest发生异常

    {

        try

        {

            //下面的方法有可能抛出异常，表示当前浏览器不支持此方法

            request=new ActiveXObject("Microsoft.XMLHTTP");

        }

        catch(e2)//当通过上面的方法实例XMLHttpRequest发生异常

        {

            request=false;

        }

    }

    //当上面的方法都不能实例化XMLHttpRequest时，表示非IE浏览器

    if(!request&&typeof XMLHttpRequest!=’undefined’)

    {

        //非IE浏览器实例化XMLHttpRequest的方法

        request=new XMLHttpRequest();

    }

    

}

//发送客户端请求的方法

function getServerTime(format)

{

    //调用上面的方法实例化XMLHttpRequest

    createXMLHttpRequest();

    //要请求的URL地址，注意escape是javascript中的方法

    //用于对特殊字符进行转义

    var url="ServerTime.aspx?format="+escape(format);

    //alert(url);//可以通过这种方法查看服务器的返回结果

    //通过GET方式打开请求，第三个参数true表示异步发送请求，false则为同步

    request.open("GET",url,true);

    //当request的等待状态发生变化时要执行的客户端方法

    request.onreadystatechange=update;//update是客户端的javascript方法

    //因为在请求的url中已经附带了参数，所以这里的参数是null

    //表示不再发送额外的数据

    request.send(null);

}

//当接收到服务器的响应之后执行的客户端方法

function update()

{

    if(request.readyState==4)

    {

        //alert(request.responseText);//查看服务器响应结果

        document.getElementById("time").innerHTML=request.responseText;

    }

}

    
// --></mce:script>

</head>

<body>

<table border="0">

    <tr>

    <td>服务器时间</td><td><div id="time"></div></td>

    </tr>

    <tr>

    <td><input type="button" value="完整时间" onclick="javascript:void getServerTime(’yyyy-mm-dd hh:mm:ss’);"  /></td><td><input type="button" value="年月日" onclick="javascript:void getServerTime(’yyyy-MM-dd’);"  /></td>

    </tr>

    <tr>

    <td><input type="button" value="时分秒" onclick="javascript:void getServerTime(’hh:mm:ss’);" /></td><td><input type="button" value="月份日期"  onclick="javascript:void getServerTime(’mm-dd’);" /></td>

    </tr>

    </table>
</body>

</html> 

注意XMLHttpRequest.readyState共有５种状态，其可能值和对应描述如下：

0：请求未初始化，还没有调用 open()。 

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

2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。 

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

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

从上面的代码中可以看出每次实例化XMLHttpRequest对象都需要判断，一些常用的操作也可以封装一下，利用Prototype这个JavaScript脚本库就可以轻松做到这一点，实际上早期很多人就用到了Prototype来开发AJAX应用，并且在Prototype中还封装了其它很多通用的方法，大大提高了我们的开发效率。

使用Prototype

在Prototype中提供了一个Ajax对象，这样开发人员就可以直接使用Ajax对象而不必考虑如何判断浏览器类型再决定如何实例化XMLHttpRequest对象的实例了。下面的代码是使用了Protype之后的代码：

view plaincopy to clipboardprint?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
<html xmlns="http://www.w3.org/1999/xhtml">   
  <head>   
    <title>使用Prototype获取服务器时间的例子</title>  
  
    <mce:script type="text/javascript" language="javascript" src="prototype.js" mce_src="prototype.js"></mce:script>  
  
    <mce:script language="javascript" type="text/javascript"><!--   
        function getServerTime(format) {   
  
            //要请求的URL地址，注意escape是javascript中的方法   
  
            //用于对特殊字符进行转义    
            var url = "ServerTime.aspx";    
             var params = "format=" + escape(format);       
           var ajax = new Ajax.Request(   
  
                url,    
                  {    
                method: ’get’,    
                parameters:params,   
  
                onComplete:update   
            }   
            );   
        }      
        //当接收到服务器的响应之后执行的客户端方法   
  
        function update(request) {    
            $("time").innerHTML = request.responseText;    
          }           
// --></mce:script>    
</head>  
  
<body>   
<table border="0">     
    <tr>  
    <td>服务器时间</td><td><div id="time"></div></td>   
      </tr>   
    <tr>   
    <td><input type="button" value="完整时间" onclick="javascript:void getServerTime(’yyyy-mm-dd hh:mm:ss’);"  /></td><td><input type="button" value="年月日" onclick="javascript:void getServerTime(’yyyy-MM-dd’);"  /></td>    
    </tr>   
    <tr>   
    <td><input type="button" value="时分秒" onclick="javascript:void getServerTime(’hh:mm:ss’);" /></td><td><input type="button" value="月份日期"  onclick="javascript:void getServerTime(’mm-dd’);" /></td>      
    </tr>   
    </table>   
   </body>   
</html>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
    <title>使用Prototype获取服务器时间的例子</title> 
    <mce:script type="text/javascript" language="javascript" src="prototype.js" mce_src="prototype.js"></mce:script> 
    <mce:script language="javascript" type="text/javascript"><!--
        function getServerTime(format) { 
            //要请求的URL地址，注意escape是javascript中的方法 
            //用于对特殊字符进行转义 
            var url = "ServerTime.aspx"; 
            var params = "format=" + escape(format); 
            var ajax = new Ajax.Request( 
                url, 
                { 
                method: ’get’, 
                parameters:params, 
                onComplete:update 
            } 
            ); 
        } 
        //当接收到服务器的响应之后执行的客户端方法 
        function update(request) { 
            $("time").innerHTML = request.responseText; 
        } 
// --></mce:script>
</head>
<body>
<table border="0"> 
    <tr> 
    <td>服务器时间</td><td><div id="time"></div></td> 
    </tr> 
    <tr> 
    <td><input type="button" value="完整时间" onclick="javascript:void getServerTime(’yyyy-mm-dd hh:mm:ss’);"  /></td><td><input type="button" value="年月日" onclick="javascript:void getServerTime(’yyyy-MM-dd’);"  /></td> 
    </tr> 
    <tr> 
    <td><input type="button" value="时分秒" onclick="javascript:void getServerTime(’hh:mm:ss’);" /></td><td><input type="button" value="月份日期"  onclick="javascript:void getServerTime(’mm-dd’);" /></td> 
    </tr> 
    </table>
</body>
</html> 

时间： 2024-04-01 09:13:45

ASP.NET中AJAX编程开发指南的相关文章

asp.net中ajax技术是否可以实现停止服务器端正在运行的按钮事件

问题描述 asp.net中ajax技术是否可以实现停止服务器端正在运行的按钮事件 给予B/S的webform项目 在服务器端有一个按钮事件 执行时间较长 所以就添加了一个按钮用来可以随时停止正在运行的耗时较长的按钮 问题是那个正在服务器端运行的按钮是否可以被其他按钮终止呢?求解答 解决方案 不可以.首先将长时间操作的任务放在按钮事件中就是错误的.按钮事件在页面回传前调用,ajax回发根本在页面加载后.你应该用消息队列.后台服务去执行长时间的任务. 解决方案二: 这个理论上是可以实现的. 服务器端

ASP.NET中Ajax怎么使用_实用技巧

在ASP.NET中应用Ajax的格式如下: 前台代码(用JQuery库) $.ajax({ type: "POST", async: true, url: "../Ajax/ajax.ashx", dataType: "html", data: null success: function (result) { //do successful sth }, error: function (XMLHttpRequest, textStaus, e

揭开ASP.NET中Cookie编程的奥秘

asp.net|cookie|编程 简介 Cookie 为 Web 应用程序保存用户相关信息提供了一种有用的方法.例如,当用户访问您的站点时,您可以利用 Cookie 保存用户首选项或其他信息,这样,当用户下次再访问您的站点时,应用程序就可以检索以前保存的信息. 本文概要介绍 Cookie 在 ASP.NET 应用程序中的应用,为您展示在 ASP.NET 中应用 Cookie 的技术细节,例如编写 Cookie.然后再读取它们.同时,还将为您介绍 Cookie 的各种特性和各种特殊情况,以及 A

ASP.NET中Cookie编程的基础知识(1)

asp.net|cookie|编程 简介 Cookie 为 Web 应用程序保存用户相关信息提供了一种有用的方法.例如,当用户访问您的站点时,您可以利用 Cookie 保存用户首选项或其他信息,这样,当用户下次再访问您的站点时,应用程序就可以检索以前保存的信息. 本文概要介绍 Cookie 在 ASP.NET 应用程序中的应用,为您展示在 ASP.NET 中应用 Cookie 的技术细节,例如编写 Cookie.然后再读取它们.同时,还将为您介绍 Cookie 的各种特性和各种特殊情况,以及 A

ASP.NET中Cookie编程简明参考

asp.net|cookie|编程|参考 一 写入Cookie 1. Name 和 Value 属性由程序设定,默认值都是空引用. 2. Domain属性的默认值为当前URL的域名部分,不管发出这个cookie的页面在哪个目录下的. 例如,http://www.kent.com/application1/login.aspx 页面中发出一个cookie,Domain属性缺省就是www.kent.com ,可以由程序设置此属性为需要的值. 3. Path属性的默认值是根目录,即 "/"

ASP.NET中AJAX 调用实例代码_jquery

1前言 最近在ASP.NET中做了一个AJAX调用 : Client端先从ASP.NET Server后台取到一个页面模板,然后在页面初始化时再从Server中取一些相关数据以实现页面模板的动态显示.具体实现为: 1) Client向 ASP.NET后台发送HTTP GET 请示 2) 后台给Client发送一个HTML模板,同时在内存中存储一个XML String (包含页面模板动态显示所需的数据) 3) Client在初始化页面时,发送AJAX请求,拿到XML String 4) 利用拿到的

关于Asp.Net中的编程实现下载

经常在论坛看见有人求Asp.Net中编程实现下载的代码,有些还希望能断点续传什么的.其实问题的关键在于权限.B/S和C/S不仅仅是外观上的区别而已. 下载,顾名思义是客户端要下,所以载.你硬塞給人家那不叫下载,那其实是"从服务器'上传'到客户端". 有些人的想法是向客户端"写一个"你打算他下载的"文件",在C/S结构中是没有问题的,因为C端来写.但是在Asp.net却是不行的,一定会弹出权限的错误,因为B/S结构中没有个C端給你,S端是不可能获得

ASP.NET中AJAX乱码解决方法

ajax乱码是一个程序员经常会碰到的问题,今天我们要讲的是关于asp教程.net中ajax乱码解决方法哦,下面先详细的介绍了处理方法,然后再举例说明 利用asp.net教程 string s = system.text.encoding.utf8.getstring(request.binaryread(request.contentlength));   system.collections.specialized.namevaluecollection form = httputility.

ASP.NET中Cookie编程的基础知识(2)

asp.net|cookie|编程 2Cookie 的限制 在开始讨论 Cookie 的技术细节之前,我想先介绍一下 Cookie 应用的几条限制.大多数浏览器支持最多可达 4096 字节的 Cookie,如果要将为数不多的几个值保存到用户计算机上,这一空间已经足够大,但您不能用一个 Cookie 来保存数据集或其他大量数据.在实际应用中,您可能并不希望在 Cookie 中保存大量的用户信息,而只希望保存用户编号或其他标识符.之后,当用户再次访问您的站点时,您就可以使用该用户 ID 在数据库中查