ASP.NET之Ajax系列（三）

　　我们通过前两篇文章的学习，已经大致掌握了Ajax的实现方法，同时也可以对比出两种方式的优劣。但是我们还是没有搞清楚真正的ajax的实现原理，以及最原始的，未经过封装的ajax是什么样的，今天我们一起来探索这些之前不了解的地方。

　　首先在上一篇也提到过，Ajax是异步的Javascript和XML，那么聪明的你应该已经猜到，js脚本是必不可少的。我们在这里先引入一个浏览器对象：XMLHttpRequest，可能大家对这个对象比较陌生，那么我们就先从它的属性开始了解。它主要有三个属性：onreadystatechange 属性、readyState 属性和responseText 属性，从名字上我们大致可以看出，第一个属性，也就是onreadystatechange 是用来在状态变更的时候处理服务器响应的函数，第二个属性是保存服务请求的状态（这里可能的值为0-4之间），第三个属性是获取服务器响应后的信息。

　　介绍完三个属性之后，我们开始进入正题，和所有的过程一样，我们需要先初始化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的方式实现，简单暴力流！希望大家喜欢，谢谢！