标签：body 脚本 mis gem pac let ref images click
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML）是指一种创建交互式网页应用的网页开发技术。
它由以下几种技术组合而成，包括：
在Ajax解决方案中，HTML/XHTML、DOM以及JavaScript是必须的。大概分为三个过程：
当需要异步与服务器交换数据时，需要XMLHttpRequest对象来异步交换。XMLHttpRequest对象的主要属性有：
XMLHttpRequest对象有两个重要方法 open与send
let request = new XMLHttpRequest()
request.open(‘GET‘,‘/xxx‘) // 配置request
request.send()
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（Cross-Origin Resource Sharing）允许浏览器向跨源(协议 + 域名 + 端口)服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
同源策略 : 只有协议+端口+域名 一模一样的才允许发AJAX请求。AJAX可以读取响应内容。
突破同源策略 === 跨域
CORS将导致跨域访问的请求分为三种：Simple Request（请求没有包含任何自定义请求头），Preflighted Request（请求包含了任何自定义请求头）以及Requests with Credential（跨域请求包含了当前页面的用户凭证）。
//响应头用来记录可以访问该资源的域 ,它的值要么是请求时Origin字段的具体值，要么是一个*，表示接受任意域名的请求。
(‘Access-Control-Allow-Origin‘:,‘*‘)
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(‘说明请求失败‘)
}
}
}
window.jQuery = function(nodeOrSelector){
let nodes = {}
nodes.addClass = function(){}
nodes.html = function(){}
return nodes
}
window.$ = window.jQuery
window.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)},
)
})
标签：body 脚本 mis gem pac let ref images click
原文地址：https://www.cnblogs.com/gitnull/p/9520381.html
