之前写了一篇博客理解 JSONP 上关于 AJAX 出现之前如何发请求
简单回顾一下：
form 发送 get 请求：
输入密码后，点击提交，打开开发者工具可以看到一个 get 请求，点开找到 Request Headers 点击view source 
同样可以用 form 发送 post 请求，与 get 请求区别是 post 请求没有查询参数
post 请求的第四部分 password 在下面的 Form Data 的view source 里
2.用 a 可以发 get 请求，但是也会刷新页面或新开页面
点击 click 就发送请求
1
2
3
4
5
| <a id="ada" href="/ada">click</a>
//运行一个脚本，让网页自己点击（但是依然会刷新页面）
<script>
ada.click()
</script>
|
3.用 img 可以发 get 请求，它不会刷新页面，但是只能以图片的形式展示
1
2
3
4
5
6
7
8
9
10
| <script>
var image = document.createElement('img')
image.src = '/ada'
image.onload = function(){
console.log('succsee')
}
image.onerror = function(){
console.log('fail')
}
</script>
|
4.用 link 可以发 get 请求，但是只能以 CSS、favicon 的形式展示
1
2
3
4
5
6
7
| <script>
var link = document.createElement('link')
link.rel = 'stylesheet'
link.href = '/ada'
//需要将link放到页面中才能发送请求
document.head.appendChild(link)
</script>
|
5.用 script 可以发 get 请求，但是只能以脚本的形式运行
1
2
3
4
5
6
| <script>
var script = document.createElement('script')
script.src = "/ada"
//需要将script放到页面中才能发送请求
document.head.appendChild(script)
</script>
|
当然还有其他方法
有关 AJAX 的学习推荐阮一峰博客
微软的突破
IE 5 率先在 JS 中引入 ActiveX 对象（API），使得 JS 可以直接发起 HTTP 请求。
随后 Mozilla、 Safari、 Opera 也跟进了，取名 XMLHttpRequest，并被纳入 W3C 规范
AJAX
Jesse James Garrett 将如下技术取名叫做 AJAX（Asynchronous JavaScript and XML）：异步的 JavaScript 和 XML
1.使用 XMLHttpRequest 发请求 2.服务器返回 XML 格式的字符串
3.JS 解析 XML，并更新局部页面
同样我们用 node 服务器来尝试一下这三个条件(AJAX)
新建 html
1
2
3
4
5
6
7
8
9
10
11
12
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
hi
</body>
</html>
|
Node 代码
1
2
3
4
5
6
7
8
9
10
11
12
13
| console.log('含查询字符串的路径\n' + pathWithQuery)
if (path === '/') {
var string = fs.readFileSync('./index.html', 'utf8')
response.statusCode = 200
response.setHeader('Content-Type', 'text/html; charset=utf-8')
response.write(string)
response.end()
} else{
response.statusCode = 404
response.setHeader('Content-Type', 'text/html; charset=utf-8')
response.write('找不到服务器')
response.end()
}
|
对于 HTTP 来说，响应的第四部分始终是 string
在 html 里创建一个 button，引入当前目录下的 js 文件
1
2
3
4
| <body>
<button id="myButton">点我</button>
<script src="./main.js"></script>
</body>
|
Node 代码//在原 Node 代码中插入，下同
1
2
3
4
5
6
7
8
9
| //注意这里是 /main.js 而不是 ./main.js，因为HTTP请求永远是绝对路径
else if (path === '/main.js') {
//这里当然是./main.js
var string = fs.readFileSync('./main.js', 'utf8')
response.statusCode = 200
response.setHeader('Content-Type', 'text/javascript; charset=utf-8')
response.write(string)
response.end()
}
|
首先满足 1.使用 XMLHttpRequest 发请求
1
2
3
4
5
6
| myButton.addEventListener('click', (e) => {
let request = new XMLHttpRequest()
//初始化请求，参数为:method,url,async(异步状态下才是AJAX),user,password(后三个参数一般默认)
request.open('GET', '/ada')
request.send()
})
|
2.服务器返回 XML 格式的字符串
XML 已经不流行了，但是我们依然可以尝试一下
找一个一个 XML example
1
2
3
4
5
6
7
8
9
10
11
12
13
| else if (path === '/ada') {
response.statusCode = 200
response.setHeader('Content-Type', 'text/xml; charset=utf-8')
response.write(`
<?xml version="1.0" encoding="UTF-8"?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>`)
response.end()
}
|
3.JS 解析 XML，并更新局部页面
浏览器是分步下载响应的，一般只要记住 readyState === 4 表示请求完成
可以用 onreadystatechange 监听 readyState
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| myButton.addEventListener('click', (e) => {
let request = new XMLHttpRequest()
request.onreadystatechange = () => {
if (request.readyState === 4) {
console.log('请求响应都完成了')
if (request.status >= 200 && request.status < 300) {
console.log('success')
//响应值在300-400之间浏览器会重新发送请求
} else if (request.status >= 400) {
console.log('fail')
}
}
}
//初始化请求，参数为:method,url,async(异步状态下才是AJAX),user,password(后三个参数一般默认)
request.open('GET', '/ada')
request.send()
})
|
如果把(path === ‘/ada’){}里改成 400 //注意不要改错地方
1
| response.statusCode = 400
|
当然会返回 fail，可以看到 readyState 是不受状态码影响的
JS 是可以解析 XML 的，但是现在 XML 已经被 JSON 取代了，我们可以简单打印出来
1
| console.log(request.responseText)
|
JSON
JSON 是道格拉斯基于 JavaScript 发明的数据交换语言
特点：
- 只有 object、array、string、number、true、false、null 这几种类型
- 字符串首尾必须为双引号
1
2
3
4
5
6
7
8
9
10
| JS VS JSON
undefined/symbel 无
null null
['a','b'] ["a","b"]
function f(){} 无
{a:b} {"a","b"}
'hello world' "hello world"
var a = {}
a.self = a 无法做到{无变量等形式}
{__proto__} 没有原型链
|
用 JSON 替换 XML
Node 代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
| else if (path === '/ada') {
response.statusCode = 200
response.setHeader('Content-Type', 'text/xml; charset=utf-8')
//变XML为JSON，key和value都可以替换成自己喜欢的
response.write(`
{
"note":{
"to": "reader",
"from": "Ada",
"heading": "greet",
"content": "hello word!"
}`)
response.end()
|
js 完整代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| myButton.addEventListener('click', (e) => {
let request = new XMLHttpRequest()
request.onreadystatechange = () => {
if (request.readyState === 4) {
console.log('请求响应都完成了')
if (request.status >= 200 && request.status < 300) {
console.log('success')
console.log(typeof request.responseText)
console.log(request.responseText)
let string = request.responseText
// 把符合 JSON 语法的字符串转换成 JS 对应的值
let object = window.JSON.parse(string)
// JSON.parse 是浏览器提供的
//响应值在300-400之间浏览器会重新发送请求
} else if (request.status >= 400) {
console.log('fail')
}
}
}
//初始化请求，参数为:method,url,async(异步状态下才是AJAX),user,password(后三个参数一般默认)
request.open('GET', '/ada')
request.send()
})
|
同源政策
同源政策规定，AJAX 请求只能发给同源的网址，否则就报错。
同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。
文章开头提到的 form 和 a 等发送请求是没有同源政策的，而 AJAX 是可以读取响应内容的。
因此只有 协议+端口+域名 一模一样（同源）才允许发 AJAX 请求
如何规避同源政策？跨域
有关 JSONP 跨域在文章开头提供我的博客举过例子
这次我们用 CORS 跨域
什么是 CORS:Cross-Origin Resource Sharing(跨域资源共享)
同样用理解 JSONP 下博客中创建过的网站来举例子
首先打开服务器端口
把请求路径改为
1
| request.open('GET', 'http://jack.com:8002/ada')
|
点击点我
报错了，因为不是同源，响应完成却得不到任何内容
解决方法，在 Node 代码中加入一句
1
2
| //允许 http://ada.com:8001 访问我
response.setHeader('Access-Control-Allow-Origin','http://ada.com:8001')
|
点击点我，即可向 ada.com:8001 发送请求并返回 jack.com:8002/ada 的响应内容
这就是用 CORS 实现 AJAX 跨域的过程
完整代码详见 github
本文仅供个人学习使用