AJAX、CORS

课堂笔记

• 有哪些标签可以用于发送请求，它们各有哪些特点？
  <form>可以用任意方法提交请求，但提交请求后会刷新页面或新开页面
  <a>可以发GET请求，但提交请求后会刷新页面或新开页面
  <img>可以发GET请求，但只能以图片形式展示
  <link>可以发 GET 请求，但是只能以 CSS、favicon 的形式展示
  <script>可以发 GET 请求，但是只能以脚本的形式运行
  有没有一种发请求的方式，可以以任意方法，任意形式展示？有，那就是AJAX
• AJAX：async Javascript and XML
  ① 使用 XMLHttpRequest 发请求
  ② 服务器返回 XML 格式的字符串(包括但不只是XML格式)
  ③ JS 解析 XML，并更新局部页面

怎么实现

let request = new XMLHttpRequest()
request.open(方法,路径)//配置请求。其中方法（大小写无所谓）、路径均是字符串。路径可以可以是相对，绝对路径，浏览器会自动转为绝对路径
request.send()//发送请求。

• request.status() 在请求结束后返回响应状态码：200、404等

• request.readyState()返回请求与响应当前所处状态
  

  request.readyState

• request.responseText() 以字符串的形式返回响应的第四部分

• requset.onreadystatechange()

• 请求与响应并非是一次性全部发送的，而是分部分发送的，响应的第一部分就已经包含请求是否成功的信息。所以是先有request.status后有request.readyState

• JSON
  被开发出来代替XML称为数据交换语言
  语法与JS相似（抄袭JS的）
  ①数据类型有： string,number,boolean,object,array
  ②字符串必须加双引号
  window.JSON.parse(字符串)用于解析符合JSON语法的字符串

• console.time() console.timeEnd()把代码放在两个函数之间，可以大致计算代码运行所需时间

• AJAX是受同源策略限制的
  同源策略即：只有相同协议，域名，端口的两个源（页面，包括后台数据）可以进行资源交互
  不符合同源策略的AJAX其request.status() === 0

• 为什么用<form>发请求不受同源策略的影响，而AJAX请求则不行
  

  解答
  其实不受同源策略限制的标签还包括：<script> <img> <link>等
  这仍然可能会存在安全漏洞
  因此谷歌会采用 CORB 策略来保护 xml，html，json 的内容
  详见：https://segmentfault.com/a/1190000016126079

• 对象属性增强

ES5中：
var x = 'sss'
var o = {}
o[x] = 1
ES6中：
var x = 'sss'
var o = {[x]:1}

CORS

corss-orign resource sharing 跨域资源共享
要让不同源的两个页面实现资源共享怎么做？（此时会发送请求，但不会有响应）
这时候要用到CORS。
CORS请求分为两种一种简单请求，一种非简单请求
满足以下条件的被称为简单请求

（1) 请求方法是以下三种方法之一：
HEAD
GET
POST
（2）HTTP的头信息不超出以下几种字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

对于简单请求，浏览器在请求头中添加Origin，将url附上，如果该url不被后端允许跨域，则响应中没有Access-Control-Allow-Origin字段，若允许，则有上述字段。

后端通过response.setHeader('Access-Control-Allow-Origin',路径) 将允许资源共享的url提前设置好

CORS比JSONP更强大