AJAX入门
听了方老师的课程，配上了阮一峰阮老师的教程食用，整理记录一些使用AJAX所需的知识点。
什么是AJAX
Asynchronous JavaScript and XML 的缩写，指的是通过 JavaScript 的异步通信，从服务器获取 XML 文档从中提取数据，再更新当前网页的对应部分，而不用刷新整个网页。
为什么使用AJAX
首先整理总结一下主要发送HTTP请求的方式及其优缺点
-
form可以发请求，但是会刷新页面或新开页面 -
a可以发 get 请求，但是也会刷新页面或新开页面 -
img可以发 get 请求，但是只能以图片的形式展示 -
link可以发 get 请求，但是只能以 CSS、favicon 的形式展示 -
script(JSONP) 可以发 get 请求，但是只能以脚本的形式运行 -
AJAX不仅仅可以发送get请求，还可以发送post/put/delete请求；而且可以只刷新局部，不会刷新页面。利用CORS还可以规避同源策略，实现跨源访问。
使用方式
一个完整的使用AJAX完成HTTP请求的流程步骤为：
1.创建 XMLHttpRequest 实例
2.发出 HTTP 请求
3.接收服务器传回的数据
4.更新网页数据
下面就是一个AJAX例子：
前端：
// 创建一个XMLHTTPRequest实例对象
let request = new XMLHttpRequest()
// 监听请求状态
request.onreadystatechange = function(){
// 通信成功时，状态值为4
if (request.readyState === 4){
if (request.status === 200){
console.log(request.responseText);
let string = request.responseText
//把符合JSON语法的字符串转换成JS对应的值
let obj = window.JSON.parse(string)
console.log(obj)
} else {
console.error(request.statusText);
}
}
};
// open()方法用于指定 HTTP 请求的参数，或者说初始化 XMLHttpRequest 实例对象
request.open('GET','/xx')
// send()方法用于实际发出 HTTP 请求。
request.send()
服务器：
...
if(path === '/xxx'){
response.setHeader('Content-type','text/html;charset=utf-8')
response.statusCode = 200
response.write(`
{
"people":{
"name":"ajax"
}
}
`)
response.end()
}
更多参数可以参考阮一峰老师的博客
使用JSON
关于JSON的学习可以看官方文档。
JAX 通过原生的XMLHttpRequest对象发出 HTTP 请求，得到服务器返回的数据后，再进行处理。现在，服务器返回的都是 JSON 格式的数据，XML 格式已经过时了
注意
服务器返回的并不是JSON对象！
服务器响应的是字符串，如上面的例子中：
...
response.write(`
{
"people":{
"name":"ajax"
}
}
`)
...
他只是符合JSON对象语法标准的字符串，不是对象。
如果要让他变成我们需要的值，则需要：
let string = request.responseText
//把符合JSON语法的字符串转换成JS对应的值
// 这里就把字符串转化成了一个JS对象
let obj = window.JSON.parse(string)
同源/跨源
同源政策规定，AJAX请求只能发给同源的网址，否则就报错。
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）,可以使用CORS规避同源限制。
关于如何跨源以及更详细的参数可以参考阮老师的另一篇博客
下面这个例子使用了最简便的方法：给服务器端response的header设置Access-Control-Allow-Origin:
...
if(path === '/xxx'){
response.setHeader('Content-type','text/html;charset=utf-8')
response.statusCode = 200
// here
response.setHeader('Access-Control-Allow-Origin':'http://frank.com:8081')
response.write(`
{
"people":{
"name":"ajax"
}
}
`)
response.end()
}
下面分别是AJAX的同源、跨源的demo：
同源
请求方：http://frank.com:8081
响应方：http://frank.com/xx:8081
前端代码：
let request = new XMLHttpRequest()
request.onreadystatechange = function(){
// 通信成功时，状态值为4
if (request.readyState === 4){
if (request.status === 200){
console.log(request.responseText);
let string = request.responseText
//把符合JSON语法的字符串转换成JS对应的值
let obj = window.JSON.parse(string)
console.log(obj)
} else {
console.error(request.statusText);
}
}
};
request.open('GET','/xx')
request.send()
后台：
...
if(path === '/xxx'){
response.setHeader('Content-type','text/html;charset=utf-8')
response.statusCode = 200
response.write(`
{
"people":{
"name":"ajax"
}
}
`)
response.end()
}
跨源(CORS):
请求方：http://frank.com:8081
响应方：http://www.baidu.com:8081
前端代码：
let request = new XMLHttpRequest()
request.onreadystatechange = function(){
// 通信成功时，状态值为4
if (request.readyState === 4){
if (request.status === 200){
console.log(request.responseText);
let string = request.responseText
//把符合JSON语法的字符串转换成JS对应的值
let obj = window.JSON.parse(string)
console.log(obj)
} else {
console.error(request.statusText);
}
}
};
request.open('GET','http://www.baidu.com:8081')
request.send()
后台：
...
if(path === '/xxx'){
response.setHeader('Content-type','text/html;charset=utf-8')
response.statusCode = 200
response.setHeader('Access-Control-Allow-Origin':'http://frank.com:8081')
response.write(`
{
"people":{
"name":"ajax"
}
}
`)
response.end()
}
本篇入门学习AJAX的文章就到此结束啦~。