AJAX简介

Asynchronous Javascript And XML 的缩写就是AJAX.
这是一种JavaScript的编程模式,为了能够实现异步网络请求.
中心思想: http协议的响应状态码,和基于每种不同状态码的回调函数.
即触发到什么状态了,执行什么回调函数.

前置内容

• HTTP协议
• 回调函数

JS原生模式

XMLHttpRequest 对象是IE6之上和其他浏览器均兼容的一个对象, 提供了对http协议的访问和响应. 能够返回XML结构或者JSON结构或者文本格式.

创建XHR对象

var myXHR = new XMLHttpRequest(); //主流浏览器均支持
var myXHR = new ActiveXObject(); //IE5 IE6的实现方式

兼容写法

var myXHR = (window.XMLRequest) 
? new XMLHttpRequest() 
: new ActiveXObject('Microsoft.XMLHTTP');

初始化http请求

myXHR.open(method,url);

初始化http请求参数,以供send()方法使用. 这个时候不会建立和url的链接.
method: GET / POST / HEAD 所有HTTP兼容的模式,详见HTTP内容
url: 注意必须是同源的: 即协议相同/域名相同/端口相同,详见CORS内容

发送http请求

myXHR.send();

开始正式想服务器请求数据,这个时候触发响应状态的变更.

对象属性

readyState

State	Name	Description
0	Uninitialized	初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。
1	Open	open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。
2	Sent	Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。
3	Receiving	所有响应头部都已经接收到。响应体开始接收但未完成。
4	Loaded	HTTP 响应已经完全接收。

status

插句话, 应用层的返回码貌似都是有规范的, http的返回码和dcc的返回码相似性很高,2XXX是成功,3XXX的网络问题,4XXX是客户端错误,5XXX是服务端错误
常用的就是200表示成功,404表示失败.

responseText

接受到的响应体,不包括头部

responseXML

接收到的响应体,解析为XML格式

事件句柄

onreadystatechange (Firefox不支持该句柄)
触发对象属性readyState变化的时候调用的方法.
onload (IE不支持该句柄)

兼容写法

  myXHR.onreadystatechange = myXHR.onload = handleLoad;
  function handleLoad(){
     if ( !this.readyState | this.readyState == 'loaded' | this.readyState == 'complete' )
       {//处理逻辑}
}

总之原生AJAX各种坑, 了解大概逻辑后跳入fetch开始无痛历程.