ajax详解

前言：浏览器与服务器之间，采用 HTTP 协议通信。用户在浏览器地址栏键入一个网址，或者通过网页表单向服务器提交内容，这时浏览器就会向服务器发出 HTTP 请求。
JavaScript 脚本发起 HTTP 通信，就叫做 AJAX 通信
注意，AJAX 只能向同源网址（协议、域名、端口都相同）发出 HTTP 请求，如果发出跨域请求，就会报错。

一、常见的前后端通信手段

ajax、jQuery ajax、axios、fatch

二、ajax的四个步骤

• 1、创建XMLHttpRequest 实例对象
• 2、初始化 设置请求方法和 url
• 3、发送HTTP请求
• 4、事件绑定 处理服务器返回的结果

三、封装ajax中的GET请求和POST请求

1、get请求

 // 1、创建XMLHttpRequest 实例对象
            const xhr = new XMLHttpRequest();
            // 设置响应体数据类型
            xhr.responseType = 'json';  // 加上这个后，服务器返回过来的数据就都是以对象的形式呈现出来的，不加的话就都是以json字符串的形式展现出来的;
            //2、初始化 设置请求方法和 url
            xhr.open('GET','https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata');
            // xhr.open('GET','https://www.baidu.com?id=100&name="米斯特付"');  //get请求传递参数
            //3、发送
            xhr.send();
            //4、事件绑定 处理服务器返回的结果
            // on when 当...的时候
            // readystate 是 xhr 对象中的一个属性 表示状态 0 1 2 3 4
            // change 改变
            xhr.onreadystatechange = function(){
                // 判断 (服务器返回了所有的结果)
                if(xhr.readyState === 4){
                    // 判断响应状态码 200 404 403 401 500
                    // 2xx 都表示成功
                    if(xhr.status >= 200 && xhr.status < 300){
                        // 处理结果 包括四个部分 响应行 响应头 响应空行(没有实际意义) 响应体
                        console.log(xhr.status); // 响应状态码
                        console.log(xhr.statusText); // 状态字符串
                        console.log(xhr.getAllResponseHeaders); // 所有响应头
                        console.log(xhr.response); // 响应体(接口返回的数据)  返回的几乎都是字符串类型的数据
                    }
                }
            }

2、post请求

 //1、创建对象
            const xhr = new XMLHttpRequest();
            //2、初始化 设置请求类型和 url
            xhr.open('POST','http://www.baidu.com');
            // xhr.setRequestHeader('名字','值') //设置请求头信息
            // xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
            // Content-Type 设置请求体内容的类型的 相当于是设置传递参数的类型
            //3、发送
            xhr.send();
            // xhr.send('a=100&b=200&c=300');  // post 请求传参
            // xhr.send('a:100&b:200&c:300');
            //4、事件绑定
            xhr.onreadystatechange = function(){
                // 判断
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        // 打印响应体
                        console.log(xhr.response)
                    }
                }
            }

四、ajax中一些属性的讲解

1)、XMLHttpRequest.onreadystatechange属性指向一个监听函数。readystatechange事件发生时（当实例的readyState属性变化），就会执行这个属性。
2)、XMLHttpRequest.readyState返回一个整数，表示实例对象的当前状态。该属性只读。它可能返回以下值：

• 0，表示 XMLHttpRequest 实例已经生成，但是实例的open()方法还没有被调用。
• 1，表示open()方法已经调用，但是实例的send()方法还没有调用，仍然可以使用实例的setRequestHeader()方法，设定 HTTP 请求的头信息。
• 2，表示实例的send()方法已经调用，并且服务器返回的头信息和状态码已经收到。
• 3，表示正在接收服务器传来的数据体（body 部分）。这时，如果实例的responseType属性等于text或者空字符串，responseText属性就会包含已经收到的部分信息。
• 4，表示服务器返回的数据已经完全接收，或者本次接收已经失败。

3)、XMLHttpRequest.status属性返回一个整数，表示服务器回应的 HTTP 状态码。一般来说，如果通信成功的话，这个状态码是200；如果服务器没有返回状态码，那么这个属性默认是200。请求发出之前，该属性为0。该属性只读。

• 301, Moved Permanently，永久移动
• 302, Moved temporarily，暂时移动
• 304, Not Modified，未修改
• 307, Temporary Redirect，暂时重定向
• 401, Unauthorized，未授权
• 403, Forbidden，禁止访问
• 404, Not Found，未发现指定网址
• 500, Internal Server Error，服务器发生错误
  基本上，只有2xx和304的状态码，表示服务器返回是正常状态。

XMLHttpRequest.timeout，XMLHttpRequestEventTarget.ontimeout
XMLHttpRequest.timeout属性返回一个整数，表示多少毫秒后，如果请求仍然没有得到结果，就会自动终止。如果该属性等于0，就表示没有时间限制。

XMLHttpRequestEventTarget.ontimeout属性用于设置一个监听函数，如果发生 timeout 事件，就会执行这个监听函数。

var xhr = new XMLHttpRequest();
var url = '/server';

xhr.ontimeout = function () {  // 如果指定时间请求仍然没有得到结果，就会触发这个事件
  console.error('The request for ' + url + ' timed out.');
};

xhr.onload = function() {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      // 处理服务器返回的数据
    } else {
      console.error(xhr.statusText);
    }
  }
};

xhr.open('GET', url, true);
// 指定 10 秒钟超时
xhr.timeout = 10 * 1000;
xhr.send(null);