历史上发送请求的方式
- 用 form 可以发请求，但是会刷新页面或新开页面
- 用 a 可以发 get 请求，但是也会刷新页面或新开页面
- 用 img 可以发 get 请求，但是只能以图片的形式展示
- 用 link 可以发 get 请求，但是只能以 CSS、favicon 的形式展示
- 用 script 可以发 get 请求，但是只能以脚本的形式运行
注意：以上除了form，都只能发get请求
有没有什么方式可以实现:
1.get、post、put、delete 请求都行
2.想以什么形式展示就以什么形式展示
XMLHttpRequest的发明
微软当时取得了重大突破：
IE 5 率先在 JS 中引入 ActiveX 对象（API），使得 JS 可以直接发起 HTTP 请求。
随后 Mozilla、 Safari、 Opera 也跟进了，取名 XMLHttpRequest，并被纳入 W3C 规范
AJAX
Jesse James Garrett 将下面的技术取名叫做 AJAX：异步的 JavaScript 和 XML (async JavaScript and XML)
1.使用XMLHttpRequest发请求
2.服务器返回XML格式的字符串
3.JS解析XML，并局部更新页面
let request = new XMLHttpRequest()
// 尽量放在最上面，这样就不会错过任何变化
// 如果放在request.send()之后，这时候readyState已经从0变为1，就只能捕获到2，3，4。
request.onreadystatechange = () => {
if (request.readyState === 4) {
if (request.status >= 200 && request.status < 300) {
console.log('请求成功')
} else if (request.status >= 400) {
console.log('请求失败')
}
}
}
//初始化请求
request.open('GET', '/xxx')
//发送请求
request.send()
readyState：请求的五种状态
0： 未打开 open()方法还未被调用
1： 未发送 send()方法还未被调用
2： 已经获取响应头 send()方法已经被调用，响应头和响应状态已经返回
3： 正在下载响应体 响应体下载中；responseText中已经获取了部分数据
4： 请求完成 整个请求过程完成
JSON
JSON 是一门抄袭/借鉴 JavaScript 的语言，同时也是一种数据交互格式，JSON 是 JavaScript 的子集（或者说 JSON 只抄袭了一部分 JavaScript 语法，而且没有新增任何原创的语法）
区别：SON 不支持函数、undefined、变量、引用、单引号字符串、对象的key不支持单引号也不支持不加引号、没有内置的 Date、Math、RegExp 等。而 JavaScript 全都支持。
| JavaScript | JSON |
|---|---|
| undefined | 无 |
| null | null |
| [ 'a', 'b' ] | [ "a", "b" ] |
| 'keller' | "keller" |
| { name: 'keller' } | { "name": "keller" } |
| function fn() {} | 无 |
| var a = {}; a.self = a | 无 |
| __proto__ | 无 |
那么现在再结合前后端一起看一下代码
前端代码
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)
console.log('object.note')
console.log(object.note)
} 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://frank.com:8001')
response.write(`
{
"note":{
"to": "frank",
"from": "keller",
"heading": "打招呼",
"content": "hello"
}
}
`)
response.end()
}
同源策略和CORS跨域
同源策略的本质是：一个域名的JS，在未经允许的情况下，不能读取另一个域名的内容。
只有 协议+域名+端口 一模一样才允许发 AJAX 请求
1.http://baidu.com 可以向 http://www.baidu.com发 AJAX 请求吗？（不可以）
2.http://baidu.com:80可以向http://baidu.com:81发 AJAX 请求吗？（不可以）
突破同源策略 === 跨域，通过使用JSONP以及CORS可以实现，这里着重介绍CORS
CORS（跨站资源共享）: Cross-Origin-Resource-Sharing
通俗理解：CORS 可以告诉浏览器，我俩一家的，别阻止他
实现方式：让目标站点的后端程序员在相应API的响应头里添加以下代码（切记不要在全网站加，需要哪个API，就在哪个API里加）
后端代码如下：
//允许http://keller.com:8001向我发起请求
response.setHeader('Access-Control-Allow-Origin', 'http://keller.com:8001')
//允许所有域名向我发起请求
response.setHeader('Access-Control-Allow-Origin', '*')
