ajax相关知识点总结

ajax的建立过程:
1.创建XMLHttpRequest对象，也就是创建一个异步调用对象。
2.创建一个新的HTTP请求，并制定该HTTP请求的方法、 URL以及验证信息
3.设置响应HTTP请求状态变化函数
4.发送HTTP请求

1. get方法(ajax基本5步)

// 1.创建XHR
let xhr = new XMLHttpRequest();
// 2.创建回调函数
xhr.onreadystatechange = callback;
// 3.打开连接
xhr.open("GET", url + "?" + postContent, true); //true(默认)表示是否异步请求
// 4.发送请求
xhr.send(null); //get方式请求体是拼接在url后面的，所以send数据为null
// 5. 回调函数
function callback() {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        let res = xhr.responseText; // 返回值。 如果是xml, xhr.responseXML
      } else {
        alert("响应完成但有问题");
      }
    }
}

2. post方法（1.2.5步跟get方法相同,ajax基本 5步）

// 3.打开连接
xhr.open("POST", url, true);
// 3.5. 设置请求头 （相当于加了一步） 
POST方式发送数据，在调用send()方法之前，需要设置请求的MIME类型
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// 4.发送请求 post请求的请求体要在send中发送
xhr.send(postContent);

3. readyState状态码（0-1-2-3-4）

readyState属性(只读): 响应状态码 表示请求/响应过程的当前阶段

0: unsent 未初始化。 尚未调用open()方法
1：opened 正在加载。已经调用 open()方法，但尚未调用 send()方法。
2：headers_received 加载完成。已经调用 send()方法，但尚未接收到响应。
3：loading 交互中。已经接收到部分响应数据。
4：done 完成。已经接收到全部响应数据，而且已经可以在客户端使用了。

4. status状态码: 响应的 HTTP 状态码

200：响应成功
301：永久重定向/永久转移
302：临时重定向/临时转移
304：本次获取内容是读取缓存中的数据
400：请求参数错误
401：无权限访问
404：访问的资源不存在

5. Content-Type(POST请求的头部)

请求头 EncodeType: 指定表单数据的编码类型,有以下可取值。注意：原生ajax的请求头默认是'text/plain',jQuery封装的ajax请求头默认是'application/x-www-form-urlencoded'

① text/plain: 表单数据是普通的文本，未经过编码
② application/x-www-form-urlencoded 表单数据是经过编码后的文本
③ multipart/form-data: 表单数据中包含上传的文件
④ application/json: 消息主体是序列化后的 JSON 字符串

6. jQuery对ajax的封装函数 ----$.ajax()

$.ajax({
   type: 'GET', //post/put/delete/head
   url:'xx.php',
   contentType: "application/json; charset=utf-8",
   beforeSend:function(request){
   	request.setRequestHeader('Test', 'andy凌云')
   }, //另一种方式设置请求头
   data:'k1=v1&k2=v2', //{k1:v1,k2:v2}
   dataType: 'html', //json/text/script/jsonp/xml
   async:true,(默认) //默认为true,异步  false是同步
   success: fn,
   beforeSend:fn, //请求发送前的回调
   error: fn,
   complete: fn, //响应完成回调(不论成败)
   cache:true,(默认) //是否缓存,当需要每次刷新都执行数据库操作的话，设置false
});

7. 将get请求封装成一个promise

• 注意状态码这块,不能直接判断200 && 4 ,因为状态码会由0-4。 按照下列方法进行错误处理才是合理的

function getUrl(url) {
   let promise = new Promise((resolve, reject) => {
     let xhr = new XMLHttpRequest();
     xhr.onload = function() {
       if (xhr.status === 200) {
         resolve(xhr.responseText);
       } else {
         reject(new Error(xhr.statusText));
       }
     };
     xhr.onerror = function() {
       reject(new Error(xhr.statusText));
     };
     xhr.open("get", url, true);
     xhr.send();
   });
   return promise;
};

let url = "http://httpbin.org/get";
getUrl(url).then(res => {
 console.log(res);
})
.catch(err => {
 console.error(err);
});