【面试回顾】ajax常见问题总结
html模板
ajax 演示 - 锐客网 【【面试回顾】ajax常见问题总结】一段文字 1
/data/test.json
{
"name": "zhangsan"
}手写XMLHttpRequest
xhr.readyState
- 0 - （未初始化）还没有调用send()方法
- 1 - （载入）已调用send()方法，正在发送请求
- 2 - （载入完成）send()方法执行完成，已经接收到全部响应内容
- 3 - （交互）正在解析响应内容
- 4 - （完成）响应内容解析完成，可以在客户端调用
- 2xx - 表示成功处理请求，如200
- 3xx - 需要重定向，浏览器直接跳转，如301（永久重定向），302（临时重定向），304（资源未改变，使用缓存）
- 4xx - 客户端请求错误，如404，403
- 5xx - 服务器端错误
const xhr = new XMLHttpRequest()
xhr.open('GET', '/data/test.json', true) //设置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)跨域
同源策略
- ajax请求时，浏览器要求当前网页和server必须同源（安全）
- 同源：协议、域名、端口，三者必须一致
- 前端：http://a.com:8080/ ; server：https://b.com/api/xxx（协议、域名、端口均不相同）
可用于统计打点，使用第三方统计服务
