封装一个jQuery 的Ajax

Js操作的请求与响应

GET /xxx HTTP /1.1

HOST ：jack.com:8002

Content-Type:application/x-www-url-encoded

1. JS 可以设置任意请求header吗

第一部分 reuqest.open( 'get','/xxx')

第二部分 request.setHeader('content-type','x-www-form-encoded')

第四部分 request .send('a=1&b=2')

2 . 可以获取任意响应header 吗？

第一部分 request,status / request.statusText

第二部分 request.getResponseHeader() / request.getAllresponsseHeaders()

第四部分 request.respondeText

HTTP 基于什么协议传输的呢

TCP 三次握手协议 /。 IP协议

server client 一次连接经历了什么呢

1浏览器 ---2 DNS缓存 -——--3DNS 查询------- 根据域名来查询

1 浏览器读取网址，然后向DNs缓存中查询，是否有当前地址的缓存的IP

2 DNS根据网址查询，有就返回ip地址，没有就继续向上级查询，域名查询，baidu.com

3 最后查询到ip地址后返回浏览器，让浏览器去连接这个ip

连接就会经过TCP协议（三次牵手协议）确保双方都可以收发

这个过程

A 我可以牵你的手吗

B 可以，同意

C 那我牵了，，😄

然后开始互动的过程，就是数据交互的过程，

返回数据有四个部分

第一部分先回来就是状态码。成功后的就是200，

后面的部分数据很大的话，第二部分 如果很大，就会慢慢接收

readyState等到4的时候，就是数据全部返回的时候

一般我们先判断就是通过全部返回数据后，再判断状态码

学会封装一个Ajax

window.jQuery= function(nodeSelector){
    let nodes = []
    nodes.addClass = function(){}
    nodes.html  =function(){}
    return nodes
}

window.jQuery.ajax = function(options){
    let url
    if ( arguments.length ===1) {
        url = options.url
    }else if (arguments.length ===2) {
        url = arguments[0];
        options =arguments[1]
    }
    let method = options.method;
    let successFn = options.successFn;
    let body = options.body;
    let failFn  = options.failFn;
    let headers = options.headers
    let request = new XMLHttpRequest()

    request.open(method,url)
    for(let key in headers){
        let value = headers[key]
        console.log(key,value,'设置头部')
        request.setRequestHeader(key,value)
    }
    request.onreadystatechange = ()=>{
        if(request.readyState===4){
            
            if (request.status>=200&&request.status<300) {
                successFn.call(undefined,request.responseText)
                // console.log('请求成功')
                // console.log(request.responseText)
                // let string = request.responseText
                // let object  = window.JSON.parse(string)
            }else if(request.status>=400){
                failFn.call(undefined,request)
            }
        }
    }
    request.send(body)
}

myButton.addEventListener('click',e=>{
    let obj = {
        urlL:'/xxx',
        method:'get',
        body:'1',
        headers:{
            'Content-Type':'text/json;charset=utf-8',
            'Steven':'18'
        },
        successFn:(responseText)=>{console.log(1)},
        failFn:(request)=>{console.log(2)},
    }
    window.jQuery.ajax(obj)
    
})

window.$ = window.jQuery

精简封装并带上promise

window.jQuery.ajax = function({url,method,body,headers}){
    return new Promise(function(resolve,reject){    
        let request = new XMLHttpRequest()
        request.open(method,url)
        for(let key in headers){
            let value = headers[key]
            request.setRequestHeader(key,value)
        }
        request.onreadystatechange = ()=>{
            if(request.readyState===4){
                
                if (request.status>=200&&request.status<300) {
                    resolve.call(undefined,request.responseText)
                }else if(request.status>=400){
                    reject.call(undefined,request)
                }
            }
        }
        request.send(body)
    })
}

myButton.addEventListener('click',e=>{
    window.jQuery.ajax(
            {
                url:'/xxx',
                method:'get',
                headers:{
                    'Content-Type':'text/json;charset=utf-8',
                    'Steven':'18'
                },
            }
        ).then(
        (text)=>{console.log(text)},
        (request)=>{console.log(request)}
    )
})

window.$ = window.jQuery