Ajax基础知识（二）

接上一篇  Ajax基础知识（一）

在上一篇博客里，抛弃了VS中新建aspx页面，拖个button写上C#代码的方式。使用ajax的方式，异步向服务器请求数据。我们让服务器只简单的返回一个“Hello World”字符串给客户端。实例代码也放出，但是对于掌握Ajax到底是个什么东西，还有些疑惑点。首先，那个JS函数GetInfoByAjax里面的XmlHttpRequest是个什么东西，为什么open里面放的是get，回调函数这些都是什么。

一、XmlHttpRequest

这是一个对象，所有现代浏览器都支持这个对象，用于在后台与服务器交换数据，它提供了在网页加载后与服务器进行通信的方法（所谓的异步加载数据）。在IE5和IE6时代，使用的叫ActiveXObject。在上一篇的JS代码中，GetInfoByAjax首先就实例化了一个XmlHttpRequest对象。当然，那样的代码是略有问题的，至少在IE5、6下是会报错的。对GetInfoByAjax进行修改，增加对浏览器的判断。

function GetInfoByAjax() {
    //创建xmlHttpRequest对象
    var xmlHttp;

    if (window.XMLHttpRequest) {  //判断浏览器是否支持XMLHttpRequst
        xmlHttp = new XMLHttpRequest();
    } else {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    //配置XmlHttpRequest对象
    xmlHttp.open("get", "Handlers/SimpleAjax.ashx");
    //设置回调函数
    xmlHttp.onreadystatechange = function () {
        if (xmlHttp.readyState = 4 && xmlHttp.status == 200) {
            document.getElementById("DataDiv").innerHTML = xmlHttp.responseText;
        }
    }
    //发送请求
    xmlHttp.send(null);
}

二、open里面的参数是什么

创建完xmlHttp对象后，就该使用它了。其实它就是去向服务器请求自己需要的文档，如果知道这个文档存放的位置，就可以把这个地址（URL）写上去就好了。至于请求的文件是什么，可以是纯文本文件，xml文件，html文件等等（Handler/SimpleAjax.ashx则是我们请求的文件）。当然，那是向服务器请求一个静态的文件，当我们需要向服务器请求的文件并不是一成不变，而是需要服务器进行处理的文件呢。可能还会需要向服务器发送点东西，服务器根据接收到的内容再返回相应的内容给客户端。再拿省市区联动的例子说事，当我在浏览器上选择了自己所在的省，比如吉林，那服务器得根据收到的省去查询这个省下的市，把这些市返回给我，而不是又一股脑把所有省下的市都抛给了我。这个get就是向服务器发送数据的方式，另一种方式叫post。二者的区别在于，get会将发送的数据显示在浏览器的地址栏上（经常会看到地址栏上显示？username=xxxx&email=XXXX），对于发送数据量少，且安全性要求不高的使用get发送方便。post发送的数据大小不限，且不明显显示在地址栏上。比较遗憾，GetInfoByAjax方法并未向服务器发送任何数据，假设向服务器post了一个用户名的数据，则相应的代码需要修改成如下。

function GetInfoByAjax() {
    //创建xmlHttpRequest对象
    var xmlHttp;
    var userName = 'user123';
    if (window.XMLHttpRequest) {  //判断浏览器是否支持XMLHttpRequst
        xmlHttp = new XMLHttpRequest();
    } else {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    //配置XmlHttpRequest对象
    xmlHttp.open("post", "Handlers/SimpleAjax.ashx");
    //设置请求头
    xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    //设置回调函数
    xmlHttp.onreadystatechange = function () {
        if (xmlHttp.readyState = 4 && xmlHttp.status == 200) {
            document.getElementById("DataDiv").innerHTML = xmlHttp.responseText;
        }
    }
    //发送请求
    xmlHttp.send("username=" + userName);
}

三、回调函数

回想一下上一篇啰嗦的浏览网页发生的过程，现在向服务器请求的事情都干完了。服务器也把该准备的内容准备好了，发给客户端以后怎么办呢？这里的回调函数，干的就是把服务器根据我请求的内容返回的内容给更新到当前的页面上。XmlHttpRequest有三个非常重要的属性：onreadystatechange、status、readyState。readyState保存了XmlHttpRequest的状态，每当它的值变化，就会触发onreadystatechange事件。

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面

从上面的表中看到，GetInfoByAjax中onreadystatechange指定到一个匿名函数中，该函数判断XmlHttpRequest对象的状态是已经请求完成，响应就绪。则把返回的内容写到了页面中的div中。这样，这个使用Ajax的过程就差不多完成了。下一篇，会完成上一篇中提到的省市区三级联动的程序。

Reference： W3school

版权声明：本文为博主原创文章，未经博主允许不得转载。