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的文章就到此结束啦~。
[AJAX]AJAX的入门学习
原文地址：https://www.cnblogs.com/No-harm/p/9630718.html