Jquery的AJAX的实现与封装

浏览器和服务器

js html是基于http在浏览器和服务器之间进行传输（是响应的第四部分的字符串）
1.http协议基于TCP/IP协议
过程：浏览器输入域名->浏览器查询dns是否有缓存->DNS查询到域名->TCP/IP链接（三次握手）->建立连接->浏览器发出请求->服务器响应（1.2.3.4）->浏览器会先获得响应头然后在获得相应体（因为响应体有时候会很大）.

这里写图片描述

2.回调函数
使用方自己不调用函数执行而是将函数当做参数传给另一方，由另一方调用执行，这样的函数叫做回调函数。（封装的AJAX）callback===function

http请求的格式：

POST /xxx HTTP/1.1       //open()设置
Host: localhost:8888     //setRequestHeader()设置
Connection: keep-alive
Content-Length: 27
Accept:*/*
(回车)
string                  //send()设置

AJAX请求格式

var request new XMLHttpRequest();//声明一个请求对象
request.open('GET','http://localhost:8001/xxx')//配置这个请求，参数(1.请求方式2.路径3.是否异步默认异步)
request.send()//发送配置好的请求
//同时send()也可以设置请求的第四部分！注意get请求的第四部分会被浏览器隐藏掉，理论上不允许get请求发送数据。
//request.send('我偏要设置第四部分')


request.onreadychange=function(){//请求状态发生改变事件
    request.readyState//返回请求的状态0（open方法还未调用）1(send方法还未调用)2(send方法被调用，已经获得响应头和状态码)3(正在下载响应体，responseText已经获得部分数据)4(整个请求已经完成)
    if(request.status>=400){//请求的状态码
        console.log('false')
    }else{
        console.log('succed')   

        let string =request.responseText//相应的第四部分的内容
        let object =window.JSON.parse(string)
    }       

}

响应格式

HTTP/1.1 200 OK
Content-Type: text/json; charset=utf-8
Access-Control-Allow-Origin: http://localhost:8888
Date: Mon, 13 Aug 2018 04:53:44 GMT
Connection: keep-alive
Transfer-Encoding: chunked

string

request.getAllResponseHeaders()//获得所有的相应头
request.getResponseHeader('name')//获得指定的name响应头
request.responseText             //响应的第四部分

总结

总结
jaavscript可以通过AJAX操作所有的请求和响应的内容。

请求：

第一部分 request.open('get','/xxx')
第二部分 request.setHeader('Content-Type','text/html')
第四部分 request.send('我想设置第四部分')

响应：

第一部分 request.status /request.statusText
第二部分 request.getResponseHeader() / request.getAllResponseHeaders()
第四部分 request.responseText

封装一个AJAX

window.jquery={}
window.$=window.jquery
window.jquery.ajax=function(options){
    //利用arguements判断，使函数可以接受两种类型的参数
    let url;
    if(arguments.length===1){
       url=options.url;
    }else if(arguments.length===2){
        url=arguments[0]
        options=arguments[1]
    }
    /*
    let method=options.method,
        body=options.body,
        succedFn=options.succedFn,
        failFn=options.failFn,
        headers=options.headers;
    */

    /* es6解构语法*/
    let {method,body,succedFn,failFn,headers}=options

    let request=new XMLHttpRequest();//声明一个请求对象,XMLHttpRequest是浏览器给出的一个用来进行请求相关的接口


    request.open(method,url) //配置这个请求1.方式2.路径3.是否异步，默认异步。
    //open之后readystate已经变成了1
    for(let key in headers){
        let value =headers[key]
        request.setRequestHeader(key,value)
    }
    //request.send()//发送这个请求
    request.send(body)
    request.onreadystatechange = function () {
        if(request.readyState===4){//request.readyState返回请求的状态包括：0（open方法还未调用）1（send方法还未调用）2（send方法被掉用，已经获得响应头和状态码）3（正在下载响应体，responseText已经获得部分数据）4（整个请求已经完成）
            if (request.status >= 400) { //request.status返回状态码。request.statusText 
                failFn.call(null,request)
            } else {
                succedFn.call(null,request.responseText)
                //思考：如果请求失败的话，responseText 存在。
                //主要服务器返回什么内容，即使状态码返回的是404，服务器也会返回内容，例如返回：response.write(`{'error':'not found'}`)
            }
        } 

    } //请求的状态发生改变事件
}

let button=document.getElementById("button");
let number = document.getElementById('number');

button.addEventListener('click',()=>{
    $.ajax({
        'method':'GET',
        'url':'./index.html',
        'body':'"wang":"15"',
        'headers':{
            'name':'wang',
            'Content-Type':'application/x-www-form-urlencoded'
        },
        'succedFn': (request)=>{console.log(request)},//同时传两个函数{f1.call(null,request);f2.call(null,request)}
        'failFn': (request)=>{console.log(request);console.log(request.responseText)}
    })
})

完整代码请预览