AJAX浅谈

ajax的含义

ajax是异步JavaScript和xml（asynchronous JavaScript and xml）：

1. 利用XMLHttpRequest发请求
2. 服务器返回XML格式的字符串，但后面一般使用JSON
3. JS解析XML，并更新局部页面

代码：

let httpRequest = new XMLHttpRequest()      //声明一个xmlhttprequest对象
httpRequest.open('GET', '/xxx')             // 配置request
httpRequest.setRequestHeader('Content-Type', 'x-www-form-urlencoded')   // 设置请求头第二部分
httpRequest.onreadystatechange = ( => { //随便放在哪个位置，监听状态的变化 
    if(httpRequest.readyState === 4) {      
        console.log("请求响应完毕")
        console.log(httpRequest.status)
        console.log(httpRequest.statusText)
        if(httpRequest.status >= 200 && httpRequest.status < 300>) {
            console.log("请求成功")
            console.log(httpRequest.getAllResponseHeaders())
            console.log(httpRequest.responseText)
            let string = httpRequest.responseText   //取得响应体
            let object = window.JSON.parse(string)  //把符合JSON语法的字符串转换为JS对象
            //JSON.parse是浏览器提供的

        } else if(httpRequest.status >= 400) {
            console.log('说明请求失败')
        }
    }
})
httpRequest.send("设置request第四部分")       //GET请求不会设置第四部分

用AJAX设置请求头

• 第一部分GET /XXX HTTP/1.1 : httpRequest.open("get", "/XXX")
• 第一部分HOST: jack.com:8002 : httpRequest.open('get', "http://jack.com:8002/")
• 第二部分Content-Type : application/x-www-url-encoded : httpRequest.setRequestHeader("Content-Type", "application/x-www-url-encoded")
• 第四部分a = 1&b = 2 : httpRequest.send('a = 1&b = 2')

用AJAX获取响应头

• 第一部分HTTP/1.1 200 OK : httpReuqest.status & httpRequest.statusText
• 第二部分Content-Type : application/x-www-url-encoded : httpRequest.getResponseHeader("Content-Type")
• 所有的第二部分 : httpRequest.getAllResponseHeaders()
• 第四部分 : httpRequest.responseText

现在一般不使用XML,而使用JSON，JSON是道格拉斯写的一本轻量型的文本语言

自己封装jQuery的ajax函数

//传入一个对象，该对象具有url,method等方法和回调函数。
window.jQuery.ajax = function({url, method, body, successFn, failFn, headers}) {
    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) {
                successFn.call(undefined, request.responseText)
            } else if(request.status >= 400) {
                failFn.call(undefined, request)
            }
        }
    }
    request.send(body)
}

用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)
    })
}

window.jQuery.ajax({
    url: '/baidu.com',
    method: 'GET',
    headers: {
        'Content-Type' : 'application/x-www-form-urlencoded'
    }
}).then(
    (responseText) => {
        console.log(responseText)
    },
    (request) => {
        console.log(request)
    }
)

什么是同源策略？

协议+域名+端口一摸一样

cors跨域 （Cross-Origin Resource Sharing）

就是告诉后端哪个域名可以访问，后端node中写入

response.setHeader('Access-Control-Allow-Origin', '你请求的网站所在')

一般现在跨域用cors跨域比较多