发请求
- 用 form 可以发请求，但是会刷新页面或新开页面
- 用 a 可以发 get 请求，但是也会刷新页面或新开页面
- 用 img 可以发 get 请求，但是只能以图片的形式展示
- 用 link 可以发 get 请求，但是只能以 CSS、favicon 的形式展示
- 用 script 可以发 get 请求，但是只能以脚本的形式运行
有没有一种方法可以实现
- get ,post, delete ,put都可以
- 想用什么形式展示就用什么形式展示
IE5率先引入ActiveX对象（API)，使得js可以直接发起HTTP请求，随后Chrome，FireFox跟进了，取名为XMLHttpRequest,并纳入w3c规范
XMLHttpRequest 是一个构造函数，是window下的一个全局对象，可以new XMLHttpRequest来使用
AphWut.png
AJAX
Jesse James Garrett 讲如下技术取名叫做 AJAX：异步的 JavaScript 和 XML
- 使用 XMLHttpRequest 发请求
- 服务器返回 XML 格式的字符串 (现在用JSON)
- JS 解析 XML，并更新局部页面
对于响应来说，我们得到的第四部分始终都是字符串，给浏览器响应了一个符合html格式的字符串
Ap5Uw6.png
接下来给页面添加一个按钮，然后监听这个按钮，每当点击一下，就发一个请求，之前JSONP我们用script来发请求，这次用AJAX试一试
main.js代码
button.addEventListener('click',()=>{
let request = new XMLHttpRequest()
request.open('GET','/xxx')
request.send()
})
server.js代码
else if (path === '/xxx') {
response.statusCode = 200
response.setHeader('Content-Type', 'text/xml')
response.write(`
<note>
<to>George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>
`)
response.end()
}
ApoP2Q.png
然后js要把这个响应读取一下，这里先要了解readyState这个属性，当readyState是4的时候，说明请求已经把响应下载完毕了，也就是请求和响应整个过程完成。
readyState从0变到4，时间太短来不及捕捉，我们可以通过onreadystatechange来监听
ApotIK.png
如果readState等于4了，那么再判断status的值来确认请求成功还是失败
button.addEventListener('click',()=>{
let request = new XMLHttpRequest()
request.onreadystatechange = ()=>{
if(request.readyState === 4){
console.log('请求和响应都完毕了')
if(request.status >= 200 && request.status <=300){
console.log('请求成功')
}else if(request.status >= 400){
console.log('请求失败')
}
}
}
request.open('GET','/xxx')
request.send()
})
请求和响应完成并不代表成功和失败，状态码代表成功和失败
ApTrpF.png
如果请求成功了我们就用request.responseText获取响应的内容，也就是响应的第四部分,我们可以用DOM API来操作他们
Ap7ENV.png
ApbkWT.png
这就是操作xml的方法，这种方法很快就过时了。我们想用一种更简单的形式表示数据，道格拉斯发明JSON，这是一门新的语言。
Apb7X4.png
然后我们通过JSON.parse()方法，把符合JSON语法的字符串转换成JS对象
Apqo5t.png
然后我们就可以通过obj.note.from等拿到里面的内容
同源策略：如果不是同一个域名同一个端口同一个协议，就不能发送AJAX请求。只有AJAX不允许，form,img,script,link都允许
为什么要有同源策略：form发请求后页面会自动刷新，原来的页面就回收了，没有办法拿到新页面的内容。而AJAX可以拿到响应的内容
突破同源策略就是跨域CORS
CORS可以告诉浏览器，我俩一家的不要阻止他
else if (path === '/xxx') {
response.statusCode = 200
response.setHeader('Content-Type', 'text/json;charset=utf-8')
response.setHeader('Access-Control-Allow-Origin','http://frank.com:8001') //CORS
response.write(`
{
"note":{
"to":"舒克",
"from":"贝塔",
"heading":"你好",
"content":"Hellow"
}
}
`)
response.end()
}
这样JSONP和AJAX都可以实现跨域了，但是JSONP不能POST
CORS全称是：Cross-Origin Resource Sharing跨站资源共享
手写一个AJAX
var request = new XMLHttpRequest
request.open('GET','http://jack.com:8002/xxx')
request.send()
request.onreadystatechange = ()=>{
if(request.readyState === 4){
if(request.status >= 200 && request.status <=300){
let string = request.responseText
let obj = window.JSON.parse(string)
}
}
}
