关于javascript:封装一个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