ajax面试知识点

1. 手写一个简易的ajax

const xhr = new XMLHttpRequest()
// get请求
xhr.open('GET', '/data/test.json', true)
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            // console.log(
            //     JSON.parse(xhr.responseText)
            // )
            alert(xhr.responseText)
        } else if (xhr.status === 404) {
            console.log('404 not found')
        }
    }
}
xhr.send(null)

// post请求
xhr.open('POST', '/data/test.json', true) // true为异步请求，false为同步请求
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            // console.log(
            //     JSON.parse(xhr.responseText)
            // )
            alert(xhr.responseText)
        } else if (xhr.status === 404) {
            console.log('404 not found')
        }
    }
}
constpostData= { userName: 'zhangsan', password: '123456' }
xhr.send(JSON.stringify(pastData))

2. xhr.readyState

• 0: （未初始化）还没投调用send()方法
• 1：（载入）以调用send()方法，正在发送请求
• 2：（载入完成）send()方法执行完成，已经接收到全部响应内容
• 3：（交互）正在解析响应内容
• 4：（完成）响应内容解析完成，可以在客户端调用

3. 跨域

同源策略：

• ajax请求时，浏览器要求当前网页和server必须同源
• 同源：协议、域名、端口三者必须一致

加载图片、CSS、JS 可无视同源策略

• <img/>可用于统计打点，可使用第三方统计服务

• <link/> <script> 可使用CDN,CDN一般都是外域

• <script> 可实现JSONP

所有的跨域，都必须经过server端允许和配合

未经server端允许就实现跨域，说明浏览器有漏洞，危险信号

4.JSONP

• script可以绕过跨域限制
• 服务器可以任意动态拼接数据返回
• 所以，script就可以获得跨域的数据，只要服务端愿意返回