JS 基础 - AJAX

frontEnd

预习：http://javascript.ruanyifeng.com/bom/ajax.html

代码：https://github.com/FrankFang/nodejs-test-cors

要点：

  1. 你才返回对象，你全家都返回对象

  2. JS 是一门语言，JSON 是另一门语言，JSON 这门语言抄袭了 JS这门语言

  3. AJAX 就是用 JS 发请求

  4. 响应的第四部分是字符串，可以用 JSON 语法表示一个对象，也可以用 JSON 语法表示一个数组，还可以用 XML 语法，还可以用 HTML 语法，还可以用 CSS 语法，还可以用 JS 语法，还可以用我自创的语法

如何发请求？

用 form 可以发请求，但是会刷新页面或新开页面

用 a 可以发 get 请求，但是也会刷新页面或新开页面

用 img 可以发 get 请求，但是只能以图片的形式展示

用 link 可以发 get 请求，但是只能以 CSS、favicon 的形式展示

用 script 可以发 get 请求，但是只能以脚本的形式运行

有没有什么方式可以实现

  1. get、post、put、delete 请求都行

  2. 想以什么形式展示就以什么形式展示

微软的突破

IE 5 率先在 JS 中引入 ActiveX 对象（API），使得 JS 可以直接发起 HTTP 请求。
随后 Mozilla、 Safari、 Opera 也跟进（抄袭）了，取名 XMLHttpRequest，并被纳入 W3C 规范

AJAX

Jesse James Garrett 讲如下技术取名叫做 AJAX：异步的 JavaScript 和 XML

  1. 使用 XMLHttpRequest 发请求

  2. 服务器返回 XML 格式的字符串

  3. JS 解析 XML，并更新局部页面

如何使用 XMLHttpRequest

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
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('说明请求失败') 
     }
    }
 }
})


// 后端代码

 }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')
  response.write(`
  {
   "note":{
   "to": "小谷",
   "from": "方方",
   "heading": "打招呼",
   "content": "hi"
   }
  }
  `)
  response.end()

JSONP – 一门新语言

http://json.org

同源策略

只有 协议+端口+域名 一模一样才允许发 AJAX 请求

一模一样一模一样一模一样一模一样一模一样一模一样一模一样一模一样

  1. http://baidu.com 可以向 http://www.baidu.com 发 AJAX 请求吗 no
  2. http://baidu.com:80 可以向 http://baidu.com:81 发 AJAX 请求吗 no

浏览器必须保证：

​ 只有 协议 + 端口 + 域名 一模一样才允许发送 AJAX 请求

​ CORS 可以告诉浏览器，我们是一家人，不要阻止他

突破同源策略 === 跨域 Cross-Origin Resource Sharing

CORS 跨域

CORS是跨源资源分享（Cross-Origin Resource Sharing）的缩写。它是W3C标准，是跨源AJAX请求的根本解决方法。相比JSONP只能发GET请求，CORS允许任何类型的请求。

请使用原生 JS 写出一个 AJAX 请求

（代码中必须出现 XMLHttpRequest）

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
26
27
28
29
30
31
32
33
34
35
main.js

​```

mybutton.onclick = ()=>{
	let request = new XMLHttpRequest()
	request.open('GET','/xxx')
	request.send()
	request.onreadystatechange = ()=>{
		if(request.readystate === 4) {
			if(request.status >= 200 && request.status) {
				let string = request.responseText
				let string = window.JSON.parse(string)
			}
		}
	}
} 

​```


后台的server.js，处理请求

​```

if(path === '/xxx') {
	response.statusCode = 200
	response.setHeader('Content-Type','text/json;charset=utf-8')
	response.write(`
		{"me":"爸爸"}
`	)
	response.end()
}

​```
编辑