在AJAX出现前，网页发送请求的有哪些呢？
- 用 form 可以发请求，但是会刷新页面或新开页面
- 用 a 可以发 get 请求，但是也会刷新页面或新开页面
- 用 img 可以发 get 请求，但是只能以图片的形式展示
- 用 link 可以发 get 请求，但是只能以 CSS、favicon 的形式展示
- 用 script 可以发 get 请求，但是只能以脚本的形式运行
有没有什么其它的方法？
- get、post、put、delete 请求都行
- 想以什么形式展示就以什么形式展示
IE5率先在JavaScript中引入ActiveX对象（API），使得JavaScript可以直接发起HTTP请求。随后Mozilla、Safari、Opera也跟进了，取名XMLHttpRequest，并被纳入W3C规范当中。
AJAX：异步的JavaScript和XML。
- 使用
XMLHttpRequest发请求 - 服务器返回
XML格式的字符串 - JS 解析
XML，并更新局部页面
如何使用XMLHttpRequest？
myButton.addEventListener('click', (e)=>{
let request = new XMLHttpRequest()
request.open('get', '/xxx') // 配置request
request.send()
request.onreadystatechange = ()=>{
if(request.readyState === 4){
console.log('请求响应都完毕了')
console.log(request.status)
if(request.status >= 200 && request.status < 300){
console.log('说明请求成功')
console.log(typeof request.responseText)
console.log(request.responseText)
let string = request.responseText
// 把符合 JSON 语法的字符串转换成 JS 对应的值
let object = window.JSON.parse(string)
// JSON.parse 是浏览器提供的
console.log(typeof object)
console.log(object)
} else if(request.status >= 400){
console.log('说明请求失败')
}
}
}
})
后端代码：
if(path==='/xxx'){
response.statusCode = 200
response.setHeader('Content-Type', 'text/json;charset=utf-8')
response.setHeader('Access-Control-Allow-Origin', 'http://lvbin.com:8001')
response.write(`
{
"note":{
"to": "future",
"from": "now",
"heading": "greet",
"content": "Hello World"
}
}
`)
response.end()
同源策略（Cross-Origin Resource Sharing）
- 只有 协议+端口+域名 一模一样才允许发 AJAX 请求
例如以下的都是不可以的
- baidu.com 可以向 www.baidu.com 发 AJAX 请求吗 no
- baidu.com:80 可以向 baidu.com:81 发 AJAX 请求吗 no
那为什么form可以跨域请求呢？因为提交到另一个域名之后，原页面的脚步无法获取新页面中的内容，浏览器认为这是安全的。
而AJAX是可以读取响应的内容，因此浏览器不能允许你这么做。其实请求已经发送出去了，只是拿不到响应的内容。总结来说就是这个策略的本质是，一个域名的JS，在未经允许的情况下，不得读取另一个域名的内容，但浏览器不会阻止向另一个域名发送请求。
CORS跨域
假设http://lvbin.com:8001需要访问http://lvbin.com:8002，并且获取内容。那么只需要在http://lvbin.com:8002后端添加下面一行代码：
response.setHeader('Access-Control-Allow-Origin', 'http://lvbin.com:8001')
