AJAX——使用的四大步骤

**什么是ajax?**

AJAX（Asynchronous JavaScript and XML），最早出现在 2005 年的 Google Suggest，是在浏览器端进行网络编程（发送请求、接收响应）的技术方案，它使我们可以通过 JavaScript 直接获取服务端最新的内容而不必重新加载页面。让 Web 更能接近桌面应用的用户体验。
    说白了，AJAX 就是浏览器提供的一套 API，可以通过 JavaScript 调用，从而实现通过代码控制请求与响应。实现网络编程。

ajax的四个步骤：

1.  创建ajax对象
2. 链接到服务器
3. 发送请求
4. 接收请求

第一步：创建XMLHttpRequest对象

//1.创建AJAX对象           
 var xhr=new XMLHttpRequest();

注意：如果要兼容IE6以下浏览器则需要编写如下代码
   

 var request;         
if(window.XMLRequest){               
    request=new XMLRequestHttpRequest();  //IE7、IE8、360等          
}else{               
    request=new ActiveXObject("Microsoft.XMLHTTP");//IE5、IE6           
}

第二步：链接服务器
    首先理解同步与异步
    同步：顺序发生
    异步：多线并发
而ajax就是异步产生的。

xhr.open(method,url,async);
xhr.send();

xmlhttp.open(method,url,async) method包括get 和post，url主要是文件或资源的路径，async参数为true(代表异步)或者false（代表同步）
xhttp.send();使用get方法发送请求到服务器。
xhttp.send(string);使用post方法发送请求到服务器。
get方法：

1.  - 若有请求参数，将其串到地址之内；
2.  - 提交的数据大小有限制；
3.  - 不太安全。

  post方法：
     

1.  - 需要将请求数据写入请求体；
2.  - 发送大量数据到服务器，因为post请求没有字符限制。
3.  - 发送用户输入的加密数据。

第三步：发送请求

//发送请求xhr.send( );

第四步：XMLHttpRequest取得响应

    (1)responseText:获得字符串形式的响应数据
    (2)responseXML:获得xml形式的响应数据
    (3)status和statusText：以数字和文本形式返回Http转态码
    (4)getAllResponseHeader():获得所以得响应报头
    (5)getResponseHeader():查询响应中的某个字段的值
    (6)readState属性
                 "0"请求未初始化，open还未调用
                 "1":服务器连接已经建立，open已调用
                 "2":请求已接收，也就是接收到头信息了
                 "3":请求处理中，也就是接收到响应主体了
                 "4":请求已经完成，且响应就绪，响应完成了
示例：

 <button>请求数据</button>
    <script>
        //点击
        document.querySelector('button').onclick = function () {
            // 1. 创建一个 XMLHttpRequest 类型的对象 —— 相当于打开了一个浏览器
            var xhr = new XMLHttpRequest()
            // 2. 打开与一个网址之间的连接 —— 相当于在地址栏输入访问地址
            xhr.open('GET', 'http://localhost:9000');
            // 3. 通过连接发送一次请求 —— 相当于回车或者点击访问发送请求
            xhr.send(null)
            // 4. 指定 xhr 状态变化事件处理函数 —— 相当于处理网页呈现后的操作
            xhr.onreadystatechange = function () {
                // 通过 xhr 的 readyState 判断此次请求的响应是否接收完成
                if (this.readyState === 4) {
                    // 通过 xhr 的 responseText 获取到响应的响应体
                    // console.log(this)
                    console.log(xhr.responseText);
                }
            }
        };
    </script>