Ajax 详解及CORS

发布时间：2020-12-16 03:02:37 所属栏目：百科来源：网络整理

导读：Ajax 是什么？ Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML）是指一种创建交互式网页应用的网页开发技术。它由以下几种技术组合而成，包括： HTML/XHTML——主要的内容表示语言。 CSS——为XHTML提供文本格式定义。 DOM——对已载

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.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)},) })

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!