创建发送异步通讯对象Ajax请求、数据回调及属性状态说明

简单了解了一下 Ajax 技术，及 Ajax 的应用，顺便做个笔记。

什么是 ajax ？

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

简单地说，AJAX是一种用异请求数据的技术，发送出请求以后，不需要刷新页面就可以更新当前浏览器内的数据或内容。

1. 异步 JavaScript 和 XML

2. 是指一种创建交互式网页应用的网页开发技术

3. 异步请求数据的技术

HTML部分： #resText 接收返回的数据， #statusText 接收返回的状态

<button onclick="send()">发送Ajax</button>
<h3 id="resText"></h3>
<h3 id="statusText"></h3>

创建异步通讯对象：

XMLHttpRequest 是 JavaScript 内部对象之一，该对象用于在后台与服务器交换数据，是实现 AJAX 技术的基础。

Chrome：new XMLHttpRequest();

IE5.5/IE6：new ActiveXObject("Microsoft.XMLHTTP");

兼容 Chrome 和 IE 浏览器可以这样写：

//1.创建异步通讯对象
var xmlHttpRequest = null;
if (window.XMLHttpRequest) {
    xmlHttpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {//ie5.5,6
    xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} else {
    alert("你的浏览器太Low了，不支持HttpRequest对象！")
}

打开操作，发送请求：

如果对象不为 NULL ，发送请求 xmlHttpRequest.send() ，当发送 GET 请求时为 true ，因为直接在地址传值，当发送 POST 请求时，应该是需要传递的值。

if(xmlHttpRequest!=null){
    //2.打开操作
    //参数1：请求的方式 get，post
    //参数2：请求的地址 index.php ajax.php
    //参数3：是否异步请求 true：异步 false：同步
    xmlHttpRequest.open("GET","get.php",true);
    //3.设置回调监听函数
    xmlHttpRequest.onreadystatechange = callback;
    //4.发送请求
    // 参数：当发送GET请求时：true
    //       当发送POST请求时：需要传递的值
    xmlHttpRequest.send(true);
}

回调函数：

// 5.接收回调
console.log(xmlHttpRequest.responseText); //字符串类型

需要介绍一下两个属性：

readyStatus ：

XMLHttpRequest 对象的状态：

0：未初始化。对象已创建，未调用 open ；

1：open 方法成功调用，但 Sendf 方法未调用；

2：send 方法已经调用，尚未开始接受数据；

3：正在接受数据。Http 响应头信息已经接受，但尚未接收完成；

4：完成，即响应数据接受完成。

我们在回调的时候，如果直接 console 接收的数据，打印出多条数据。

status ：

服务器返回的 http 状态码。

200 表示“成功”；

404 表示“未找到”；

500 表示“服务器内部错误”等。

所以要判断异步请求成功并且服务器返回状态正常，再进行数据打印。所以应该这样写 👇

优化后的函数回调：

//回调函数
function callback() {
    if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){ //readyState：4 回发数据接收成功
        // 5.接收回调
        console.log(xmlHttpRequest.responseText); //字符串类型
        document.getElementById("resText").innerHTML = xmlHttpRequest.responseText;
        document.getElementById("statusText").innerHTML = xmlHttpRequest.statusText;
    }
}

其他属性说明：

Onreadystatechange ：请求状态改变的事件触发器（readyState 变化时会调用这个属性上注册的 JavaScript 函数）。

responseText ：服务器响应的文本内容。

responseXML ：服务器响应的XML内容对应的DOM对象。

statusText ：服务器返回状态的文本信息。