关于javascript:封装一个jQuery-的Ajax

43次阅读

共计 1929 个字符，预计需要花费 5 分钟才能阅读完成。

GET /xxx HTTP /1.1

HOST：jack.com:8002

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

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 的时候，就是数据全副返回的时候

个别咱们先判断就是通过全副返回数据后，再判断状态码

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

正文完