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开始无痛历程.
