AJAX介绍
其实AJAX应用的核心就是XMLHttpRequest通过现象看本质即使使用微软的AJAX服务器控件最终也是需要这些的只不过使用微软AJAX服务器控件开发AJAX应用时我们不需要关心JS脚本的实现只需关心业务逻辑就可以了因而可以简化开发和提高开发速度AJAX的基础是XHTMLCSSDOMJavaScriptXML及XMLHttpRequest
正确使用AJAX技术可以改善用户体验是用户与服务器的交互更流畅某些情况下还能减少服务器流量在以前AJAX只是作为一种比较炫的技术为一些大型网站所使用现今这个比云计算还要流行了至少云计算更多地还是停留在人们的概念里而AJAX确确实实应用在WEB开发当中了WEB开发人员的招聘都是言必精通AJAX技术
下面分别讲讲在ASPNET开发中可以供选择的开发AJAX应用的方式
采用纯JavaScript实现
在武侠小说中绝顶高手飞花摘叶都可以伤人在WEB开发领域真正的高手也可以无需借助任何其它库就可以开发出AJAX应用不适用任何第三方库开发AJAX应用就需要自己区分浏览器来实例化XMLHttpRequest对象实例下面的代码是一个简单的调用AJAX的代码
viewplaincopytoclipboardprint?
<!DOCTYPEhtmlPUBLIC"//WC//DTDXHTMLTransitional//EN""
<htmlxmlns="
<head>
<title>获取服务器时间的例子</title>
<mce:scriptlanguage="javascript"type="text/javascript"><!
varrequest=false;
//实例化XMLHttpRequest
functioncreateXMLHttpRequest()
{
try
{
//下面的方法有可能抛出异常表示当前浏览器不支持此方法
request=newActiveXObject("MsxmlXMLHTTP");
}
catch(e)//当通过上面的方法实例XMLHttpRequest发生异常
{
try
{
//下面的方法有可能抛出异常表示当前浏览器不支持此方法
request=newActiveXObject("MicrosoftXMLHTTP");
}
catch(e)//当通过上面的方法实例XMLHttpRequest发生异常
{
request=false;
}
}
//当上面的方法都不能实例化XMLHttpRequest时表示非IE浏览器
if(!request&&typeofXMLHttpRequest!=’undefined’)
{
//非IE浏览器实例化XMLHttpRequest的方法
request=newXMLHttpRequest();
}
}
//发送客户端请求的方法
functiongetServerTime(format)
{
//调用上面的方法实例化XMLHttpRequest
createXMLHttpRequest();
//要请求的URL地址注意escape是javascript中的方法
//用于对特殊字符进行转义
varurl="ServerTimeaspx?format="+escape(format);
//alert(url);//可以通过这种方法查看服务器的返回结果
//通过GET方式打开请求第三个参数true表示异步发送请求false则为同步
requestopen("GET"urltrue);
//当request的等待状态发生变化时要执行的客户端方法
requestonreadystatechange=update;//update是客户端的javascript方法
//因为在请求的url中已经附带了参数所以这里的参数是null
//表示不再发送额外的数据
requestsend(null);
}
//当接收到服务器的响应之后执行的客户端方法
functionupdate()
{
if(requestreadyState==)
{
//alert(requestresponseText);//查看服务器响应结果
documentgetElementById("time")innerHTML=requestresponseText;
}
}
//></mce:script>
</head>
<body>
<tableborder="">
<tr>
<td>服务器时间</td><td><divid="time"></div></td>
</tr>
<tr>
<td><inputtype="button"value="完整时间"onclick="javascript:voidgetServerTime(’yyyymmddhh:mm:ss’);"/></td><td><inputtype="button"value="年月日"onclick="javascript:voidgetServerTime(’yyyyMMdd’);"/></td>
</tr>
<tr>
<td><inputtype="button"value="时分秒"onclick="javascript:voidgetServerTime(’hh:mm:ss’);"/></td><td><inputtype="button"value="月份日期"onclick="javascript:voidgetServerTime(’mmdd’);"/></td>
</tr>
</table>
</body>
</html>
<!DOCTYPEhtmlPUBLIC"//WC//DTDXHTMLTransitional//EN""
<htmlxmlns="
<head>
<title>获取服务器时间的例子</title>
<mce:scriptlanguage="javascript"type="text/javascript"><!
varrequest=false;
//实例化XMLHttpRequest
functioncreateXMLHttpRequest()
{
try
{
//下面的方法有可能抛出异常表示当前浏览器不支持此方法
request=newActiveXObject("MsxmlXMLHTTP");
}
catch(e)//当通过上面的方法实例XMLHttpRequest发生异常
{
try
{
//下面的方法有可能抛出异常表示当前浏览器不支持此方法
request=newActiveXObject("MicrosoftXMLHTTP");
}
catch(e)//当通过上面的方法实例XMLHttpRequest发生异常
{
request=false;
}
}
//当上面的方法都不能实例化XMLHttpRequest时表示非IE浏览器
if(!request&&typeofXMLHttpRequest!=’undefined’)
{
//非IE浏览器实例化XMLHttpRequest的方法
request=newXMLHttpRequest();
}
}
//发送客户端请求的方法
functiongetServerTime(format)
{
//调用上面的方法实例化XMLHttpRequest
createXMLHttpRequest();
//要请求的URL地址注意escape是javascript中的方法
//用于对特殊字符进行转义
varurl="ServerTimeaspx?format="+escape(format);
//alert(url);//可以通过这种方法查看服务器的返回结果
//通过GET方式打开请求第三个参数true表示异步发送请求false则为同步
requestopen("GET"urltrue);
//当request的等待状态发生变化时要执行的客户端方法
requestonreadystatechange=update;//update是客户端的javascript方法
//因为在请求的url中已经附带了参数所以这里的参数是null
//表示不再发送额外的数据
requestsend(null);
}
//当接收到服务器的响应之后执行的客户端方法
functionupdate()
{
if(requestreadyState==)
{
//alert(requestresponseText);//查看服务器响应结果
documentgetElementById("time")innerHTML=requestresponseText;
}
}
//></mce:script>
</head>
<body>
<tableborder="">
<tr>
<td>服务器时间</td><td><divid="time"></div></td>
</tr>
<tr>
<td><inputtype="button"value="完整时间"onclick="javascript:voidgetServerTime(’yyyymmddhh:mm:ss’);"/></td><td><inputtype="button"value="年月日"onclick="javascript:voidgetServerTime(’yyyyMMdd’);"/></td>
</tr>
<tr>
<td><inputtype="button"value="时分秒"onclick="javascript:voidgetServerTime(’hh:mm:ss’);"/></td><td><inputtype="button"value="月份日期"onclick="javascript:voidgetServerTime(’mmdd’);"/></td>
</tr>
</table>
</body>
</html>
注意XMLHttpRequestreadyState共有５种状态其可能值和对应描述如下
请求未初始化还没有调用open()
请求已经建立但是还没有发送还没有调用send()
请求已发送正在处理中（通常现在可以从响应中获取内容头）
请求在处理中通常响应中已有部分数据可用了没有全部完成
响应已完成您可以获取并使用服务器的响应了
从上面的代码中可以看出每次实例化XMLHttpRequest对象都需要判断一些常用的操作也可以封装一下利用Prototype这个JavaScript脚本库就可以轻松做到这一点实际上早期很多人就用到了Prototype来开发AJAX应用并且在Prototype中还封装了其它很多通用的方法大大提高了我们的开发效率
使用Prototype
在Prototype中提供了一个Ajax对象这样开发人员就可以直接使用Ajax对象而不必考虑如何判断浏览器类型再决定如何实例化XMLHttpRequest对象的实例了下面的代码是使用了Protype之后的代码
viewplaincopytoclipboardprint?
<!DOCTYPEhtmlPUBLIC"//WC//DTDXHTMLTransitional//EN""
<htmlxmlns="
<head>
<title>使用Prototype获取服务器时间的例子</title>
<mce:scripttype="text/javascript"language="javascript"src="prototypejs"mce_src="prototypejs"></mce:script>
<mce:scriptlanguage="javascript"type="text/javascript"><!
functiongetServerTime(format){
//要请求的URL地址注意escape是javascript中的方法
//用于对特殊字符进行转义
varurl="ServerTimeaspx";
varparams="format="+escape(format);
varajax=newAjaxRequest(
url
{
method:’get’
parameters:params
onComplete:update
}
);
}
//当接收到服务器的响应之后执行的客户端方法
functionupdate(request){
$("time")innerHTML=requestresponseText;
}
//></mce:script>
</head>
<body>
<tableborder="">
<tr>
<td>服务器时间</td><td><divid="time"></div></td>
</tr>
<tr>
<td><inputtype="button"value="完整时间"onclick="javascript:voidgetServerTime(’yyyymmddhh:mm:ss’);"/></td><td><inputtype="button"value="年月日"onclick="javascript:voidgetServerTime(’yyyyMMdd’);"/></td>
</tr>
<tr>
<td><inputtype="button"value="时分秒"onclick="javascript:voidgetServerTime(’hh:mm:ss’);"/></td><td><inputtype="button"value="月份日期"onclick="javascript:voidgetServerTime(’mmdd’);"/></td>
</tr>
</table>
</body>
</html>
<!DOCTYPEhtmlPUBLIC"//WC//DTDXHTMLTransitional//EN""
<htmlxmlns="
<head>
<title>使用Prototype获取服务器时间的例子</title>
<mce:scripttype="text/javascript"language="javascript"src="prototypejs"mce_src="prototypejs"></mce:script>
<mce:scriptlanguage="javascript"type="text/javascript"><!
functiongetServerTime(format){
//要请求的URL地址注意escape是javascript中的方法
//用于对特殊字符进行转义
varurl="ServerTimeaspx";
varparams="format="+escape(format);
varajax=newAjaxRequest(
url
{
method:’get’
parameters:params
onComplete:update
}
);
}
//当接收到服务器的响应之后执行的客户端方法
functionupdate(request){
$("time")innerHTML=requestresponseText;
}
//></mce:script>
</head>
<body>
<tableborder="">
<tr>
<td>服务器时间</td><td><divid="time"></div></td>
</tr>
<tr>
<td><inputtype="button"value="完整时间"onclick="javascript:voidgetServerTime(’yyyymmddhh:mm:ss’);"/></td><td><inputtype="button"value="年月日"onclick="javascript:voidgetServerTime(’yyyyMMdd’);"/></td>
</tr>
<tr>
<td><inputtype="button"value="时分秒"onclick="javascript:voidgetServerTime(’hh:mm:ss’);"/></td><td><inputtype="button"value="月份日期"onclick="javascript:voidgetServerTime(’mmdd’);"/></td>
</tr>
</table>
</body>
</html>
