AJAX及跨域解决

AJAX

Asynchronous Javascript + XML ，其核心技术是XMLHttpRequest对象。
请求过程：
let XHR = new XMLHttpRequest();
XHR.onreadystatechange = function(){
if(XHR.readystate == 4){
if(XHR.status >= 200 && XHR.status < 300 || XHR.status == 304){
XHR.responseText
}
}
}
XHR.open("method",url,boolean)
XHR.send(null)
method: get/post
url: 请求地址
Boolean: 布尔值，表示是否异步true异步/false同步
null：send方法接受一个参数，表示要发送的数据，如果没有数据，需传递一个null

XHR对象属性：

• 1 responseText
• 2 responseXML
• 3 status
• 4 statusText
• 5 readyState

XHR对象方法

• 1 readystatechange
  在open方法之前添加此方法，保证浏览器兼容
• 2 getResponseHeader()
• 3 getAllResponseHeader()

URL字符串编码
encodeURIComponent()

XMLHttpRequest2级

• 1 FromData类型
• 2 进度事件 progress events
  loadstart 接收响应的第一个字节开始
  progress 接收过程不断触发
  error 请求错误时触发
  abort 因调用abort()方法而触发
  load 接收完整数据后触发
  loadend 接收完数据或因load、error、abort事件而触发

load

load事件用以替代readystatechange事件，在接收完数据后触发。load事件会接受一个Event对象，Event.target指向XHR实例

跨域资源共享

通过XHR实现AJAX通信的一个主要限制是跨域安全策略。

CORS（跨域资源共享）

通过客户端设置请求头 origin：URL（请求页面的源），服务器端设置响应头Access-Control-Allow-Origin：URL（允许的URL）

图片

由于图片的src属性不受跨域限制，所以可以通过src传递信息，在onload和onerror事件处理程序中确认是否接到响应

JSONP

JOSN with padding
有两部分组成，回调函数和数据，回调是当响应到来时应该在页面中调用的函数
利用script的src属性

websocket

HTML5的新特性，持久链接全双工、双向通信
let ws = new WebSocket(url ) url:websocket服务器地址
ws.onopen()
ws.onmessage()
ws.send()
ws.onerror()
ws.onclose()