Ajax概述

一、Ajax概述

1. 默认不允许跨域

遵循浏览器同源策略，只能访问同域名下的子页面
跨域问题可以通过 后台开放 jsonp 的方式解决 

2.构造函数

var re = new XMLHttpRequest();

XMLHttpRequest对象只能通过 new 的方式构造一个新的 XMLHttpRequest对象实例，并没有字面量

var re = new XMLHttpRequest();//实例化XMLHttpRequest对象

    /*打开一个连接 
            第一个参数为method[get|post] method不仅仅是get与post！
            第二个参数为url地址
            第三个参数设置是否异步执行[true|fasle]默认异步true
	*/
    re.open("get",url,asynch);
    re.send();//发送数据，可通过 re.readyState 来监听是否发送完成
    
    //监听状态改变的方法，来查看数据是否完成
    re.onreadystatechange = function(){
        console.log(this.readyState);//this指向re，readyState为4证明数据已经发送完成
        console.log(this.state);//state为http状态码 200~ 300区间为发送成功 304为缓存数据，但也视为成功
    }

二、XMLHttpRequest属性

1. readyState

XMLHttpRequest实例化对象当前所处的状态
0已实例化XMLHttpRequest对象，但未调用open()方法
1 open() 方法已经被调用。
2 send() 方法已经被调用，且头部和状态已获取
3 数据正在加载中 responseText 可见部分数据(但是不完整)
4 数据已全部加载，可以正常使用

2. state

status是的HTTP状态编码
在请求完成前 ，status的值为0。值得注意的是，如果 XMLHttpRequest 出错 ，浏览器返回的 status 也为0。
200 ~ 300 为成功的状态码
304 表示当前请求与上次相同，所以没有去请求而直接返回了缓存数据
404 没有找到页面
... 更多http状态码

3. timeout

一个请求在被自动终止前所消耗的毫秒数。默认值为 0 
同步 XMLHttpRequests 请求中，没有timeout超时属性，超时将会抛出一个 InvalidAccessError 类型的错误。
当超时发生， ontimeout 事件将会被触发。

4. response

返回响应的正文,可以是 ArrayBuffer, Blob, Document, JavaScript对象 或 一个 DOMString 类型。根据设置的 responseType来返回对应数据类型！
如果请求未完成或未成功，响应值为null。但是，如果responseType的值设置为text或空字符串，则响应可以包含部分文本响应，而请求仍处于加载状态。

5. responseType

设置数据的类型[arraybuffer|blob|document|json|text] 默认就是text
服务器所返回的类型和你所设置的返回值类型必须未一致，否则为null
responseType 要么不设置！要么就要与服务器对应好！否则将抛出InvalidStateError异常。

6. responseText

返回一个字符串,如果请求不成功或尚未发送，则返回null。responseText属性在请求完成之前将会得到部分数据

7. responseXML

返回一个HTML或XML的Document数据
responseType 要么不指定 要么为 document,如果服务器未指定请求头（Content-Type）为[text/xml | application/xml]可使用overrideMimeType方法强制解析为XML！

re.overrideMimeType("[text/xml | application/xml]")// re为XMLHttpRequest的实例化对象

三、XMLHttpRequest方法

1. abort

取消ajax请求，如果该请求已被发出，XMLHttpRequest.abort() 方法将终止该请求。当一个请求被终止，它的 readyState 属性将被置为0

re.abort();//re为XMLHttpRequest的实例化对象,下同

2. getResponseHeader

获取请求头信息，XMLHttpRequest.getResponseHeader(name)；name不区分大小写，
XMLHttpRequest.getAllResponseHeaders();获取所有请求头信息

re.getResponseHeader("Content-Type");//获取Content-Type信息

3. open

初始化一个请求。该方法要从JavaScript代码调用；想从原生代码初始化一个请求，可使用openRequest()替代
openRequest是一个底层方法，用法和open一样，一般用open
更多的method请求方式HTTP请求方法

re.open(method, url, async, user, password);//除了method与url其他参数均可选

4. overrideMimeType

指定一个MIME类型
指定具体的MIME类型去代替有服务器指定的MIME类型.
如果服务器没有指定类型，那么 XMLHttpRequest 将会默认为 "text/xml".

re.overrideMimeType(mimeType);//MIME类型

5. send

发送 HTTP 请求。
如果是异步请求（默认为异步请求），则此方法会在请求发送后立即返回；
如果是同步请求，则此方法直到响应到达后才会返回。接受一个可选的参数，其作为请求主体；如果请求方法是 GET 或者 HEAD，则应将请求主体设置为 null

[ArrayBuffer | ArrayBufferView | Blob | Document | DOMString | FormData ]
re.send();//可选参数 ArrayBuffer 不再是ajax规范，避免使用

6. setRequestHeader

是设置HTTP请求头部，必须在 open() 方法和 send()之间调用

re.setRequestHeader(key,value);

四、XMLHttpRequest事件

1. onloadstart

同img和video加载机制相同，在开始加载时触发

懒得写了~~

2. onprogress

ajax进度改变的时候触发 progress是个属性，可以查看当前的ajax进度

re.onprogress = function(e){
    /*loaded  在接受到了多少信息
    total   一共有多少信息*/
	console.log(e.loaded/e.total);//当前加载进度,
};

3. onabort

当一个资源的加载已中止时，将触发 abort事件(有兼容性问题，了解一下)

4. onerror

资源加载失败时会触发error事件。

5. onerror

资源加载失败时会触发error事件。

5. onloadend

loadend事件在资源的加载进度停止之后被触发 (例如，在已经触发“error”，“abort”或“load”事件之后)。

6. ontimeout

当进度由于预定时间到期而终止时，会触发ontimeout事件。timeout属性设置了超时的毫秒数

re.timeout = 10000;//设置了超时时长为1000毫秒;
re.ontimeout = function(){
    console.log("超时了！！！");
}

7. onreadystatechange

当readyState属性改变时触发 readyState等于4为加载完成