JavaScript 之 ajax

1. AJAX 的概念

AJAX，即 Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

- 同步：前面的代码不执行完毕，后面的代码无法执行
- 异步：前面的代码不执行完毕，后面的代码也可正常执行
作用：在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页，实现异步无刷新
运用场景：表单验证，搜索框输入，论坛，博客等

2. XMLHttpRequest 对象

XMLHttpRequest 用于在后台与服务器交换数据

创建XMLHttpRequest 对象

var xmlhttp;
if(window.XMLHttpRequest){
    //ie7以上、谷歌、火狐支持
    xmlhttp = new XMLHttpRequest();
}else{
    //老版本的ie5、6使用ActiveX
    xmlhttp = new ActiveXObject();
}

向服务器发送请求
- 　　open(请求类型get/post，发送地址，同步true/异步false)
- 　　send(string仅用于post请求)

xmlhttp.open("get","01.txt",true); 
xmlhttp.send();

- 　　当选择同步时，规定在响应处于 onreadystatechange(存储函数，当 readyState 属性改变时调用)事件中的就绪状态时执行的函数
  - 　　readyState 存有XMLHTTPRequest的状态
    - 0: 请求未初始化
    - 1: 服务器连接已建立
    - 2: 请求已接收
    - 3: 请求处理中
    - 4: 请求已完成，且响应已就绪
  - 　　status 存储
    - 200: "OK"
    - 404: 未找到页面

xmlhttp.onreadystatechange=function(){
　　//表示响应已就绪
　　if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
　　　　document.getElementById("box").innerHTML = xmlhttp.responseText;
   }
}

- 　　当选择异步时（不推荐，但可用于小型请求），无需编写 onreadystatechange 函数，把代码放到 send() 语句后面即可

注：JavaScript 会等到服务器响应就绪才继续执行。若服务器繁忙或缓慢，应用程序会挂起或停止。

get 方式请求数据

<input type="button" id="btn" value="获取数据">
<div id="box"></div>
<script>
    window.onload = function(){
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            var xmlhttp;
            if(window.XMLHttpRequest){
                xmlhttp = new XMLHttpRequest();
            }else{
　　　　　　　    xmlhttp = new ActiveXObject();
            }
            xmlhttp.open("get","01.txt",true);
            xmlhttp.send();
            xmlhttp.onreadystatechange = function(){
                if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                    document.getElementById("box").innerHTML = xmlhttp.responseText;
                }
            }
        }
    }
</script>

注：get 方式发送的请求会有缓存现象，为避免这种情况，向url添加一个唯一的ID，如下：

//方法一
xmlhttp.open("get","01.txt?t=" + Math.random(),true);
//方法二
xmlhttp.open("get","01.txt?t=" + new Date().getTime(),true);

post 方式请求数据

<input type="button" id="btn" value="获取数据">
<div id="box"></div>
<script>
    window.onload = function(){
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            var xmlhttp;
            if(window.XMLHttpRequest){
                xmlhttp = new XMLHttpRequest();
            }else{
                xmlhttp = new ActiveXObject();
            }
            xmlhttp.open("post","02.php",true);
            xmlhttp.send();
            xmlhttp.onreadystatechange = function(){
                if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
        　　 　　 　　document.getElementById("box").innerHTML = xmlhttp.responseText;
                }
            }
        }
    }
</script>

注：如需像 HTML 表单那样 POST 数据，用 setRequestHeader(头名称，头的值) 添加 HTTP 头。如下：

xmlhttp.open("post","02.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send();

3. 服务器响应格式

responseText 获得字符串形式的响应数据，返回字符串形式的响应

document.getElementById("box").innerHTML = xmlhttp.responseText;

responseXML 获得 XML 形式的响应数据

<input type="button" id="btn" value="获取数据">
<div id="box"></div>
<script>
    window.onload = function () {
        var btn = document.getElementById("btn");
        btn.onclick = function () {
            var xmlhttp;
            if(window.XMLHttpRequest){
                xmlhttp = new XMLHttpRequest();
            }else{
                xmlhttp = new ActiveXObject();
            }
            xmlhttp.open("get","03.xml?t=" + Math.random(),true);
            xmlhttp.send();
            xmlhttp.onreadystatechange = function () {
                if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                    var obj = xmlhttp.responseXML;
                    var arrs = obj.getElementsByTagName("title");
                    var str = "";
                    for(var i = 0;i < titles.length;i++){
                        str += arrs[i].innerHTML;
                        document.getElementById("box").innerHTML = str;
                    }
                }
            }
        }
    }
</script>

JSON 格式

<input type="button" id="btn" value="获取数据">
<ul id="list"></ul>
<script>
    window.onload = function () {
        var btn = document.getElementById("btn");
        btn.onclick = function () {
            var xmlhttp;
            if(window.XMLHttpRequest){
                xmlhttp = new XMLHttpRequest();
            }else{
                xmlhttp = new ActiveXObject();
            }
            xmlhttp.open("get","04.json?t=" + Math.random(),true);
            xmlhttp.send();
            xmlhttp.onreadystatechange = function () {
                if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                    var res = JSON.parse(xmlhttp.responseText);
                    var arr = res.students;
                    for(var i = 0;i < arr.length;i++){
                        var li = document.createElement("li");
                        li.innerHTML = arr[i].name;
                        document.getElementById("list").appendChild(li);
                    }
                }
            }
        }
    }
</script>

4. Callback 函数

callback 函数是一种以参数形式传递给另一个函数的函数。

当存在多个 AJAX 任务时，则为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。

function myFunction(){
    loadXMLDoc("ajax_info.txt",function(){
 　　　　if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
    　　　　document.getElementById("box").innerHTML = xmlhttp.responseText;
    　　}
  　});
}