技术开发 频道

ASP.NET中的AJAX应用开发详解

  【IT168 技术文档】其实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的代码:

<!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>  
        
<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;  
        }  
}  
        
</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对象都需要判断,一些常用的操作也可以封装一下,利用Prototype或者jQuery这个JavaScript脚本库就可以轻松做到这一点,实际上早期很多人就用到了Prototype或者jQuery来开发AJAX应用,并且在Prototype或者jQuery中还封装了其它很多通用的方法,大大提高了我们的开发效率。

0
相关文章