Ajax 是什么？
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML）是指一种创建交互式网页应用的网页开发技术。
它由以下几种技术组合而成，包括：
- HTML/XHTML——主要的内容表示语言。
- CSS——为XHTML提供文本格式定义。
- DOM——对已载入的页面进行动态更新。
- XML——数据交换格式。
- XSLT——将XML转换为XHTML（用CSS修饰样式）。
- XMLHttp——用XMLHttpRequest来和服务器进行异步通信，是主要的通信代理。
- JavaScript——用来编写Ajax引擎的脚本语言。
在Ajax解决方案中，HTML/XHTML、DOM以及JavaScript是必须的。大概分为三个过程：
- 使用XMLHttpRequest发请求
- 服务器返回XML格式字符串
- JS解析XML并更新局部变量
XMLHttpRequest对象
当需要异步与服务器交换数据时，需要XMLHttpRequest对象来异步交换。XMLHttpRequest对象的主要属性有：
- onreadystatechange——每次状态改变所触发事件的事件处理程序。
- responseText——从服务器进程返回数据的字符串形式。
- responseXML——从服务器进程返回的DOM兼容的文档数据对象。
- status——从服务器返回的数字代码，状态码如404（未找到）和200（已就绪）。
- status Text——伴随状态码的字符串信息。
- readyState——对象状态值。对象状态值有以下几个：
0 - (未初始化)还没有调用send()方法
1 - (载入)已调用send()方法，正在发送请求
2 - (载入完成)send()方法执行完成
3 - (交互)正在解析响应内容
4 - (完成)响应内容解析完成，可以在客户端调用了
对于readyState的状态值，其中“0”状态是默认状态值，而对于成功访问的状态（得到信息）我们大多数采用“4”进行判断
Ajax的核心就是是JavaScript对象XmlHttpRequest，这个对象为向服务器发送请求和解析服务器响应提供了流畅的接口。XmlHttpRequest可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。
XMLHttpRequest对象用法
XMLHttpRequest对象有两个重要方法 open与send
let request = new XMLHttpRequest() ?request.open(‘GET‘,‘/xxx‘) // 配置request ?request.send()
open方法：
URL是相对于当前页面的路径，也可以似乎用绝对路径。open方法不会向服务器发送真正请求，它相当于初始化请求并准备发送。只能向同一个域中使用相同协议和端口的URL发送请求，否则会因为安全原因报错。
在发送同步请求的时候没问题，只有得到响应后才会执行检查status语句，但是在异步请求时，JavaScript会继续执行，不等生成响应就检查状态码，这样我们不能保证检查状态码语句是在得到响应后执行，这时候我们可以检查request对象的readyState属性，该属性表示请求/响应过程中的当前活动阶段，每当readyState值改变的时候都会触发一次onreadystatechange事件。
?request.onreadystatechange = function(){ ???if(request.readyState===4){ ?????if(request.status>=200 && request.status<300){ ???????let string = request.responseText ???????// 把符合 JSON 语法的字符串转换成 JS 对应的值 ???????let object = window.JSON.parse(string) ?????}else if(request.status >= 400){ ???????console.log(‘说明请求失败‘) ??????} ???} ?????????}CORS（跨源资源共享）
CORS（Cross-Origin Resource Sharing）允许浏览器向跨源(协议 + 域名 + 端口)服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
同源策略 : 只有协议+端口+域名 一模一样的才允许发AJAX请求。AJAX可以读取响应内容。
突破同源策略 === 跨域
CORS将导致跨域访问的请求分为三种：Simple Request（请求没有包含任何自定义请求头），Preflighted Request（请求包含了任何自定义请求头）以及Requests with Credential（跨域请求包含了当前页面的用户凭证）。
//响应头用来记录可以访问该资源的域 ,它的值要么是请求时Origin字段的具体值，要么是一个*，表示接受任意域名的请求。 (‘Access-Control-Allow-Origin‘:,‘*‘)
原生 JS 写出AJAX 请求
?let request = new XMLHttpRequest() ?request.open(‘get‘,‘/xxx‘) ?request.send() ?request.onreadystatechange = function(){ ???if(request.readyState===4){ ?????if(request.status>=200 && request.status<300){ ???????let string = request.responseText ??????????let object = window.JSON.parse(string) ?????}else if(request.status >= 400){ ???????console.log(‘说明请求失败‘) ??????} ???} ?????????}jQuery.ajax封装代码链接
window.jQuery = function(nodeOrSelector){ ???let nodes = {} ???nodes.addClass = function(){} ???nodes.html = function(){} ???return nodes ?}window.$ = window.jQuerywindow.jQuery.ajax = function({url,method,body,headers}){ ???return new Promise(function(resolve,reject){ ???????let request = new XMLHttpRequest() ???????request.open(method,url) ???????for(let key in headers){ ???????????let value = headers[key] ???????????requeq.setRequestHeader(key,value) ???????} ???????request.onreadystatechange = ()=>{ ???????????if(request.readyState===4){ ???????????????if(request.status >=200 && request.status <300){ ???????????????????resolve.call(undefined,request.responseText) ???????????????}else if(request.status >= 400){ ???????????????????reject.call(undefined,request) ???????????????} ???????????} ???????} ???????request.send(body) ???????????})}myButton.addEventListener(‘click‘,(e)=>{ ???window.jQuery.ajax({ ???????url: ‘/xxx‘, ???????method: ‘get‘, ???????headers:{ ???????????‘content-type‘:‘application/x-www-form-urlencoded‘, ???????????‘frank‘: ‘18‘ ???????}, ???}).then( ???????(text)=>{console.log(text)}, ???????(request)=>{console.log(request)}, ???) ???})Ajax 详解及CORS
原文地址：https://www.cnblogs.com/gitnull/p/9520381.html