AJAX开发基础及原生JS操作步骤

AJAX是什么？

1. AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
2. AJAX = 异步 JavaScript和XML技术。
3. AJAX 是一种独立于 Web 服务器软件的浏览器技术。

AJAX用来做什么？
前端页面向服务器后端请求数据

AJAX用在哪里？
主要在前端开发过程中，需要向服务器请求数据的时候。

AJAX核心？—操作XMLHttpRequest

实现AJAX操作步骤：

1. 创建XMLHttpRequest对象
2. 打开接口的连接，并发送请求
3. 获取服务器返回的数据，DOM操作渲染到我们的网页中

1、创建XMLHttpRequest对象

var _http;//声明一个变量，存放XMLHttpRequest对象
if(window.XMLHttpRequest) {
    _http = new XMLHttpRequest();
} else {
    //创建IE浏览器中的XMLHttpRequest对象
     _http = new ActiveXObject("Microsoft.XMLHTTP");
}

if(window.XMLHttpRequest),是为了防止一些浏览器既不支持ActiveX控件,也不支持XMLHttpRequest组件而进行的判断.其中XMLHttpRequest也不是window对象的标准属性,但可以用来判断浏览器是否支持XMLHttpRequest组件.

else,用来判断是否使用IE浏览器.其中ActiveXOject并不是Windows对象的标准属性,而是IE浏览器中专有的属性,可以用于判断浏览器是否支持ActiveX控件.通常只有IE浏览器或以IE浏览器为核心的浏览器才能支持Active控件.
2、打开接口的连接，并发送请求

_http.open(method,URL，flag,name,password);
_http.send();

代码中的参数解释如下所示:

method:指定http的请求的方式，一共有get、post、head、put、delete五种方法，常用的方法为get和post。
URL：该参数用于指定HTTP请求的URL地址，可以是绝对URL，也可以是相对URL。
flag：该参数为可选参数，参数值为布尔型。该参数用于指定是否使用异步方式。true表示异步方式、false表示同步方式，默认为true。
name：该参数为可选参数，用于输入用户名。如果服务器需要验证，则必须使用该参数。
password：该参数为可选参数，用于输入密码。如果服务器需要验证，则必须使用该参数。
3、获取服务器返回的数据，DOM操作渲染到我们的网页中

_http.onreadystatechange = function() {
        if(_http.readyState == 4 && _http.status == 200){
            var _content = _http.responseText;//接受数据
            console.log(_content);
            var _jsonArr = JSON.parse(_content);// 将字符串转换成JSON对象
            console.log(_jsonArr);
            for(var i = 0; i < _jsonArr.length; i++) {
                var _li = document.createElement("li");
                _li.textContent = _jsonArr[i].className;
                _ct.appendChild(_li);
            }
        }
    }

从创建XMLHttpRequest对象开始，到发送数据、接收数据、XMLHttpRequest对象一共会经历以下5中状态。

   ⑴未初始化状态。在创建完XMLHttpRequest对象时，该对象处于未初始化状态，此时XMLHttpRequest对象的readyState属性值为0。

   ⑵初始化状态。在创建完XMLHttpRequest对象后使用open()方法创建了HTTP请求时，该对象处于初始化状态。此时XMLHttpRequest对象的readyState属性值为1。

   ⑶发送数据状态。在初始化XMLHttpRequest对象后，使用send()方法发送数据时，该对象处于发送数据状态，此时XMLHttpRequest对象的readyState属性值为2。

   ⑷接收数据状态。Web服务器接收完数据并进行处理完毕之后，向客户端传送返回的结果。此时，XMLHttpRequest对象处于接收数据状态，XMLHttpRequest对象的readyState属性值为3。

只有在XMLHttpRequest对象完成了以上5个步骤之后，才可以获取从服务器端返回的数据。因此，如果要获得从服务器端返回的数据，就必须要先判断XMLHttpRequest对象的状态。