[JavaScript知识库]原生Ajax，fetch()与jquery中的Ajax，Es6中的promise一文看懂

js原生ajax

window.onload=function(){
	var xhr = new XMLHttpRequest();//第一步 创建xml对象
	xhr.open("get","url地址");//第二步 调用open方法 
    xhr.responseType = 'json';//设置返回值得格式为json
    // xhr.open('第一个参数是 请求方式的类型','第二个是url 地址')
    xhr.send();//第三步 发送请求
    xhr.onreadystatechange=function(){//第四步，执行，等待，状态改变，执行方法
        if(xhr.readyState===4&&xhr.status===200){
            console.log(xhr.response);//返回的数据类型是json数据
        }
    }
}

window.onload=function(){
    var xhr = new XMLHttpRequest();//第一步 创建xml对象
    xhr.open("post","http://www.liulongbin.top:3006/api/addcmt")
    //第二步 xhr.open('第一个参数是 请求方式的类型','第二个是url 地址')
    xhr.responseType = 'json';//设置返回值得格式为json
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //  第三步设置请求头
    xhr.send("username=username&content=text");// 第四步send 方法 发送请求  携带请求数据
    xhr.onreadystatechange=function(){// 第五步  等待执行 状态码发生改变
        if(xhr.readyState===4&&xhr.status===200){
            console.log(xhr.response);//返回的数据类型是json数据
        }
    }
}

ajax中的readyState

readyState表示xhr对象的请求状态，取值范围是0——4，分别表示5个不同的状态。

0：（未初始化）xhr对象已经创建，但还没有调用open()方法。值为0表示对象已经存在，否则浏览器会报错：对象不存在。

1 :（载入/发送请求）调用open()方法对xhr对象进行初始化，根据参数(method,url,true)，完成对象状态的设置。并调用send()方法开始向服务端发送请求。值为1表示正在向服务端发送请求。

2 ：（载入完成/响应接收）接收服务器端响应回的数据。但获得的还只是服务端响应的原始数据，并不能直接在客户端使用。值为2表示send()请求方法执行完成，并已经接收完全部的响应数据（未解析）。

3 － （交互/解析数据）正在解析从服务器端接收到的响应数据。即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody、responseText或responseXML属性存取的格式，为在客户端调用作好准备。值为3表示正在解析数据。

4 － （后台处理完成）响应内容解析完成，可以在客户端调用了。此阶段确认全部数据都已经解析为客户端可用的格式，解析已经完成。值为4表示数据解析完毕，可以通过XMLHttpRequest对象的相应属性取得数据。

总之，整个XMLHttpRequest对象的生命周期应该包含如下阶段：

创建－0初始化请求－1发送请求－2接收数据－3解析数据－4完成 。

开发中默认使用”===”来避免抛出异常。

ajax中的status状态码

201-206表示服务器成功处理了请求的状态代码，说明网页可以正常访问。

200（成功）：服务器成功处理了请求。通常。这表示服务器成功提供了请求的网页；

201（已创建）：表示请求成功且服务器已经创建了新的资源；

202（已接受）：表示服务器已经接受了请求，但尚未对其进行处理；

203（非授权信息）：表示服务器已经成功处理了请求，但返回了可能来自另一源的信息；

204（无内容）：服务器成功处理了请求，但是未返回任何内容；

205（重置内容）：服务器成功处理了请求，但是未返回任何内容；与204响应不同，此响应要求请求者重置文档视图（例如清楚表单内容输入新的内容）；

206（部分内容）：服务器成功处理了部分get请求；

300-307表示要完成请求，你需要进一步的操作，通常这些状态码都是永远重定向的。

300（多种选择）：服务器根据请求可执行多种操作。服务器可根据请求者来选择一项操作，或提供操作列表供其选择；

301（永久移动）：请求的网页已被永久的移动到新的位置。服务器返回此响应时，会自动将请求者转移到新的位置，你应使用此代码告诉搜索引擎网页或者网站已经被永久移动到新的位置；

302（临时移动）：服务器目前正从不同的位置的网页响应请求，但请求者应继续使用原有的位置进行以后的请求。会自动将请求者转到不同的位置，但由于搜索引擎会继续抓取原有位置并将其编入索引，因此你不该使用此代码告诉搜索引擎网站或者网页已经被移动；
303（查看其它位置）：当请求者应对不同的位置进行单独的get请求以检索响应时，服务器会返回此代码``。对于除head请求之外的所有请求，服务器会自动转到其他位置。

304（未修改）：自从上次请求后，请求的网页没有被修改过。服务器返回此响应时，不会返回网页内容，如果网页自请求者上次请求之后再也没有更改过，你应当将服务器配置为返回此响应。由于服务器可以告诉搜索引擎自从上次抓取之后网页没有更改过，使用本地缓存，因此可以节约带宽和开销；

305（使用代理）：请求者只能使用代理访问请求的网页。如果服务器返回此响应，那么服务器还会指明请求者应当使用的代理；

307（临时重定向）：服务器目前正从不同位置的网页响应请求，但请求者应继续使用原有位置来继续以后的请求。会自动将请求者转到不同的位置，但由于搜索引擎会继续抓取原有位置并将其编入索引，因此你不该使用此代码来告诉搜索引擎某个网页或者网站已被移动；

400-417表示请求可能出错，会妨碍服务器的处理

400（错误请求）：服务器不理解请求的语法；

401（身份验证错误）：此页面要求授权。

403（禁止）：服务器拒绝请求；

404（未找到）：服务器找不到请求的网页，错误页面；

405（方法禁止）：禁用请求中指定的方法；

406（不接受）：无法使用请求的内容特性响应请求的网页；

407（需要代理授权）：指定请求者必须授权使用代理。如果服务器返回此响应，还表示请求者应当使用代理；

408（请求超时）：服务器等候请求时发生超时；

409（发生冲突）：服务器在完成请求是发生冲突，服务器必须在响应中包含有关冲突的信息。

410（已删除）：请求的资源永久删除；

411（需要有效长度）：服务器不接受不含有效内容长度标头字段的处理；

412（未满足前提条件）：服务器未满足请求者在请求中设置的其中一个前提条件；

413（请求实体过大）：服务器无法处理请求，因为请求实体过大，超出服务器的请求范围；

414（请求的url过长）：请求的url过长，服务器无法处理；

415（不支持的媒体类型）：请求的格式不受请求页面的支持；

416（请求范围不符合要求）：如果页面无法提供请求的范围，则服务器还会返回此状态码；

417（未满足期望值）：服务器未满足期望请求的标头字段的要求；

500-505表示的意思是服务器在尝试处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求出错。

500（服务器内部错误）：服务器遇到错误，无法完成请求；

501（尚未实施）：服务器不具备完成请求的功能；

502（错误网关）：服务器作为网关或者代理，从上游服务器收到了无效的响应；

503（服务不可用）：目前无法使用服务器；

504（网关超时）：服务器作为网关或者代理，未及时从上游服务器接收请求；

505（http版本不受支持）：服务器不支持请求中使用的http协议版本；

es6新方法fetch

fetch（）方法与XMLHttpRequest类似，fetch也可以发起ajax请求，但是与XMLHttpRequest不同的是，fetch方式使用promise，相比较XMLHttpRequest更加简洁。

Promise

promise是进行异步操作的一种解决方案，比传统的处理方法(回调函数/处理事件)更加合理，ES6将其加入语言标准，统一语法，原生提供了Promise，promise可以想象成一个装有各种结果的容器，里面装有某个时间返回的结构，可以在需要的时候拿取它并进行一些事件处理。

使用方法

在ES6中规定，Promise对象是一个构造函数，用来生成Promise实例
Promise的构造函数接收一个参数，是函数，并且传入两个参数：resolve，reject，分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。
const promist = new Promise(function(resolve,reject){
    if(/*异步操作成功*/){
       resolve(value);//resolve在异步操作成功时调用，并将异步操作结果作为参数传递出去
       }else{
        reject(error);//reject在异步操作失败时调用，并将异步操作错误结果作为参数传递出去
       }
})
promise实例生成后可以用then()方法操作成功/失败的回调函数
promise.then(function(value){
 <!--成功的回调处理-->
},function(error){
 <!--失败的回调处理-->
})
Promise 新建后立即执行，用Promise的时候一般是包在一个函数中，在需要的时候去运行这个函数
function runAsync(){
    var promise = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log('执行完成');
            resolve('随便什么数据');
        }, 2000);
    });
    return p;            
}
runAsync()

基本的fetch请求

fetch('url地址')//第一个参数url是必须填的，
.then(function(res){
    //res中存放的是response响应内容
    //console.log(res.json())会打印一个promise对象
    //response是只能被读取一次的,console.log取一次，return取一次，会报错
    return res.json();//返回一个promise对象
    //  res.json()     返回的数据类型是json 格式
    //  res.text()     返回的是文本格式
    //  res.blob()     处理 二进制  主要针对 图片  以及 流
}).then(function(myJson){
    console.log(myjson)//数据在此处打印出来
    //前一个没有返回值则会显示undefined
})

执行第一个then方法中的return res.json();会返回一个新的Promise实例对象

Promise {<pending>}
__proto__: Promise
[[PromiseState]]: "fulfilled"
//[[PromiseState]] promise状态：pending 初始状态、fulfilled/resolved 成功状态（一般指的是异步请求成功）、rejected 失败状态（一般指的是异步请求失败）
[[PromiseResult]]: Object
//[[PromiseResult]] promise结果/值：初始值是undefined、不论成功或者失败，成功的结果或者失败的原因都会赋值给他。

执行第二个then方法会根据前面promise对象的状态发生变化来调用的

结果是前一个then的返回值或者是报错原因，它的状态是前一个执行结果直接的映射，前一个执行不报错就是成功，执行报错就是失败，前一个没有返回值则会显示undefined,不管前一个promise的状态是成功还是失败都会将promise的结果/值传给后一个

解释两次then用法：

第一次then用法：then是根据promise的状态变化而执行的回调函数，promise的状态变化由resolve()函数决定（取到数据执行resolve）then的参数为resolve函数传递出来的数据，直接输出res是一个对象不是我们需要的数据，使用res.json()或者res.test()获取到我们需要的数据。
res.json（）/res.text（）获取到的是一个新的promise实例，arr.txt的值在[[[PromiseResult]]里面，但是直接取是取不出来的。没有方法取出来，
Promise的设计文档中说了，[[PromiseResult]]是个内部变量，外部无法得到，只能在then中获取。所以就会用到第二次then了

第一个then 的return返回值是一个promise实例对象，所以回调链转交给了新的实例对象，第二个then的回调函数参数为为PromiseValue的值，当返回值不是对象时，返回值是数据类型时，会将该返回值赋值给PromiseValue，供下次的then函数使用

fetch get请求 传递参数

window.onload=function(){
	var params = ‘参数’//根据接口文档进行填写
    fetch("url地址"+"接口"+"?"+params)//第一个参数url是必须填的，
    .then(function(res){
        retun res.json();
    }).then(function(result)){
         console.log(result)   
    }
}

fetch post 请求 传递与不传递 写法一样

window.onload=function(){
	var params = {
        username:'username',
        content:'content'
    }//根据接口文档进行填写
    //第一个参数url - 请求的 URL
    fetch("url地址"+"接口",{
        method:'POST',//请求方式 method-支持 GET, POST, PUT, DELETE, HEAD
        body:JSON.stringify(data),//body -请求参数（JSON.stringify过的字符串或’name=jim\u0026age=22’格式)
        headers:{
            'content-type':'application/json'//headers-对应的Headers 对象
        },
         mode:'no-cors',//mode有三个取值same-origin 不允许跨域 cors 允许跨域,需服务器配合如 node.js no-cors 允许跨域，服务器不需要设置如上代码但不能将服务端数据返回需要注意得是cors不支持application/json
    })
    .then(function(res){
        retun res.json();
    }).then(function(result)){
         console.log(result)   
    }
}

jquery中的ajax

$.ajax({
	url:'/',//请求访问的地址
    type:'get/post/put/delet',//访问方式
    data:{},//如果是提交数据就需要填写data
    async:false/true,//true为异步，false为同步
    beforeSend:function(){},//请求数据发送之前执行的方法
    success:function(res){//请求成功之后，返回success成功之后的数据，会自动处理成json格式
        console.log(res)
    },
    fail:function(error){//请求失败后，返回失败信息
        console.log(error)
    },
    complete：function(){//不管请求成功还是失败都会执行
    }
    
})