ajax、http协议、Promiseajax：是与服务器进行'通信'的的一种局部刷新技术; http协议； Promi

ajax

ajax的概念

AJAX (阿贾克斯 Asynchronous Javascript And Xml ) 异步JavaScript和XML
ajax：与服务器进行通信的一种技术，能够实现异步的刷新页面

ajax的核心

ajax的核心对象是XMLHttpRequest；简称xhr
创建一个兼容写法的XHR对象

function createSHR(){
    if(window.XMLHttpRequest){
        // IE7+ 谷歌, 火狐, Safari等
        return new XMLHttpRequest()
    }
    // 兼容ie6
    return new ActiveXObject("Msxml2.XMLHTTP")
}

ajax步骤（5）

创建xhr核心对象
调用open方法 open(请求方式，请求路径，同步/异步)
- 请求方式: get/post
- 请求路径: url
- 同步或异步: 默认是异步,true也是异步，false是同步
- 同步: 造成阻塞，它会占据主线程
- 异步: 开启了网络请求的线程,结合事件轮询 event loop的
send() 发送请求
- 如果是get请求,发送null,或直接不填
- 如果post,通过send()携带参数

判断状态

如果是同步，直接判断http的状态

如果是异步，绑定onreadystatechange事件，结合readyState的状态码

http的常见状态码

状态码	状态字符串	说明
200	OK-成功	服务器成功返回了页面
201	Created-已创建	表示请求已成功，并且服务器创建了新的资源
400	Bad Request-错误请求	语法错误导致服务器不识别
401	Unauthorized-未授权	请求需要用户认证
404	Not found-未找到	指定的URL在服务器上找不到
500	Internal Server Error	服务器遇到意外错误，无法完成请求
503	ServiceUnavailable	由于服务器过载或维护导致无法完成请求

readyState的状态码

值	状态	说明
0	未初始化	尚未调用open()方法
1	启动	已经调用open()方法，但尚未调用send()方法
2	发送	已经调用send()方法，但尚未接受响应
3	接受	已经接收到部分响应数据
4	完成	已经接收到全部响应数据

通过xhr.response获得结果

get请求

同步

// 0.创建xhr
function createXHR(){
    if(window.XMLHttpRequest){
        return new XMLHttpRequest()
    }
    return new ActiveXObject("Msxml2.XMLHTTP")
}
//封装一个ajax的get请求，同步的
function get(url){
    // 1.得到xhr
    let xhr = createXHR()  //new XMLHttpRequest()
    // 2.给xhr配置请求的相关参数
    //  open("请求参数",路径,同步/异步) true：异步；false：同步
    xhr.open("get",url,false) //同步占据主线程，造成阻塞
    // 3.发送，由于get请求是通过url带参数，send就可以不写内容或写null
    xhr.send()
    // 4.判断状态，获取结果
    if(xhr.status==200){
        // 5.通过xhr.response获取的结果
        return xhr.response
    }
}

异步并携带参数

get请求携带参数，在url后面添加，open()中

// 创建ajax
function createXHR() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest()
    }
    return new ActiveXObject("Msxml2.XMLHTTP")
}
// 将data数据转换为服务器能够识别的字符串  key=value&key=value& 
function Params(o){
    let str = ""
    for(let [k,v] of Object.entries(o)){
        str+=`${k}=${v}&`
    }
    return str
}
// get请求
function get(url, data = {}, callback) {
    let xhr = createXHR()
    // open第三个参数默认就是异步，true也是异步
    xhr.open("get", url + "?" + Params(data))
    // get请求，send可以为空
    xhr.send()
    // 什么时候响应数据呢？
    // 如果数据来了，就“自动”触发onreadystatechange事件，结合回调函数获取到数据
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                console.log(xhr.response);
            } else {
                consolel.log('error.状态码: ' + xhr.status + '错误信息:' + xhr.statusText);
            }
        }
    }
}

post请求

字符的编码和解码

字符编码：encodeURIComponent(data)
字符解码：decodeURIComponent(data)

异步post请求，携带参数

注意点：
- post请求中的参数是send()中传输
- POST请求和Web表单提交不同, 需要使用XHR来模仿表单提交.xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

// 创建xhr对象的方法
function createXHR() {
    return window.XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject("Msxml2.XMLHTTP")
}
// 将data数据转换为服务器能够识别的字符串  key=value&key=value& 
function Params(o){
    let str = ""
    for(let [k,v] of Object.entries(o)){
        str+=`${k}=${v}&`
    }
    return str
}
// post请求
function post(url,data,callback){
    let xhr = createXHR()
    xhr.open("post",url)
    // 采用xhr，使用ajax模仿表单提交
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
    // 设置响应内容为json
    xhr.responseType="json"
    xhr.send(Params(data))
    xhr.onreadystatechange=  function(){
        if(xhr.status>=200&&xhr.status<=299&&xhr.readyState==4){
            callback&&callback(xhr.response)
        }
    }
}

HTTP协议

http协议是一种超文本传输协议，它是基于TCP协议的应用层传输协议，
简单来说就是客户端和服务端进行数据传输的一种规则

特点

支持客户端/服务端模式
- 即请求(request)-响应(response)模式
简单快速
- 客户端向服务端发送请求时, 只需要传送请求方式和路径即可,所以简单,
- 由于HTTP协议简单, 使得HTTP服务器的程序规模小, 因而速度很快;
灵活
- 传输数据类型种类多
无连接
- 请求一次服务器后立刻断开连接, 即非长连接即短连接
无状态
- HTTP协议对事务处理没有记忆能力;
- (cookie+session)解决无状态,cookie是浏览器端的，sessionId是服务器端的

组成

请求报文 + 响应报文

请求报文

1.请求行 [请求方式 url地址协议(1.0/1.1/2.0) ]

2.请求头 [content-type,cookie]

3.请求体 [数据]

响应报文

1.状态行 [协议, 状态码,短语]

2.响应头 [content-Type,...Referer:防盗链]

3.响应体 [数据]

请求方法

GET, POST, HEAD, PUT等
最常见的请求方法就两种是：get 和 post

Promise

promise是一个类，需要被实例化（new），微任务

Promise用来解决回调地狱的问题，有个缺点代码繁琐

Promise的状态（3个）

1.pending 等待默认是等待

2.fulfilled 完成

3.rejected 拒绝

【注】：这三个状态是不可逆的

Promsie的原型方法(3个）

then()
- 里面有2个函数,第1个函数取resolve的结果,第2个参数取reject的结果
catch()
- 捕获 reject的结果
finally()
- 只要执行resolve或reject后,都会执行finally

promise的静态方法（5个）

Promise.all()
- all方法里需要填入一个数组,数组里必须都是支持promise的方法,迸发执行
Promise.race()
- race方法里需要填入一个数组,谁先完成,就只取谁的结果
Promise.resolve()
- 只执成功,并返回一个新的promise对象
Promise.reject()
- 只执失败,并返回一个新的promise对象
Promise.allSettled()
- 成功失败都会返回一个数组对象，每个对象中都会带有状态和值

ES7 async await

await关键字后面必须接promise对象,有await关键字的地方,必须是一个async 异步函数

它能解决,把异步像同步一样的被调用

ajax、http协议、Promise