首页 > 代码库 > ASP.NET之Ajax系列(三)
ASP.NET之Ajax系列(三)
我们通过前两篇文章的学习,已经大致掌握了Ajax的实现方法,同时也可以对比出两种方式的优劣。但是我们还是没有搞清楚真正的ajax的实现原理,以及最原始的,未经过封装的ajax是什么样的,今天我们一起来探索这些之前不了解的地方。
首先在上一篇也提到过,Ajax是异步的Javascript和XML,那么聪明的你应该已经猜到,js脚本是必不可少的。我们在这里先引入一个浏览器对象:XMLHttpRequest,可能大家对这个对象比较陌生,那么我们就先从它的属性开始了解。它主要有三个属性:onreadystatechange 属性、readyState 属性和responseText 属性,从名字上我们大致可以看出,第一个属性,也就是onreadystatechange 是用来在状态变更的时候处理服务器响应的函数,第二个属性是保存服务器响应的状态(如常见的200 OK,404 Not Found等等),第三个属性是获取服务器响应后的信息。
介绍完三个属性之后,我们开始进入正题,和所有的过程一样,我们需要先初始化XMLHttpRequest这个对象,但是由于浏览器的问题,在不同的浏览器初始化时,需要进行不同的方式:
<script type="text/javascript"> var xmlhttp; function checkUser() { xmlhttp = null; var Name = document.getElementById("txtId").value; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); }//这里适用于火狐,谷歌还有高版本IE浏览器 else if (window.ActiveXObject) { xmlhttp = new ActiveXObject("Microsoft.XMLHttp"); }//这里适用于低版本IE,如IE4,IE5等等 xmlhttp.open("GET", "Handler1.ashx?name=" + Name, true); xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4) { if (xmlhttp.status == 200) { document.getElementById("lblShow").innerHTML = xmlhttp.responseText; } } } xmlhttp.send(null); } </script>
从代码中我们再一次验证了微软当年的“不走寻常路”,说句题外话,做了这么久的B/S,发现兼容性真是个头疼的问题,尤其是IE,每个版本之间兼容性都不一致,写Js的时候苦不堪言,推荐使用JQuery,它的兼容性非!常!好!在初始化对象之后,我们便开始了发送请求之旅,这次我们依然是向ashx提交并进行处理。xmlhttp.open("GET", "Handler1.ashx?name=" + Name, true);这句代码中有3个参数,第一个参数用于指定get提交或是post提交,这里需要注意大写;第二个参数是要提交的url,第三个参数指定是否为异步模式。接下来我们需要处理服务端状态改变后的函数,先判断服务器响应的状态信息:0为请求未初始化(在调用 open() 之前),1为请求已提出(调用 send() 之前),2为请求已发送(这里通常可以从响应得到内容头部),3为请求处理中(响应中通常有部分数据可用,但是服务器还没有完成响应),4为请求已完成(可以访问服务器响应并使用它)。
我们知道服务器是个大忙人,它要处理很多东西,如果打断了可不好,所以我们必须等待它的状态为4,才能进行下一步的处理,于是乎,在4之后判断响应是否为200(这里属于Http协议,不再详细阐述,有兴趣可以找下资料),然后再处理服务器的响应文本。好的,介绍完原理之后呢,我们就开始运行:
依然输入我们亲爱的豆豆。。。由前两篇的数据库我们“已经知道”豆豆这个昵称是存在的,所以我们没猜到过程,就已经猜到了结果,嘿嘿。接下来我们看看服务器端:
我们发现已经成功进入了断点,表明我们之前的请求已经成功!偶也,因为这次的方法比前两次都要复杂,所以我也是尝试了好几次,比较兴奋一些。注释掉的部分是上一篇中处理的方法,我记得ajax配合ashx使用时,貌似一次请求就要对应一个ashx文件(这里不确定,欢迎大家指正),真正的干货是下面没被注释掉的部分,获取传进来的参数,然后去对比。
因为我们已经“预知”了结果,所以出现这个情况也是意料之中,不过也表明我们今天的ajax实现方法已经成功,再来一个没注册的图:
好了,我们今天的教程到此为止,Ajax其实就是这样的原理,发送请求-等待响应-响应完成-后续处理,只是它可以在整个页面不回发的情况下单独进行处理,所以受到了人民的青睐。Ajax系列已经完结,不知道各位是否有收获呢?如果还有什么疑问或者想法,还可以在评论区中提出来,大家一起讨论。最后再给大家一个建议,实现的时候最好使用第二种jQuery+ashx的方式实现,简单暴力流!希望大家喜欢,谢谢!