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就可以获得跨域的数据，只要服务端愿意返回
