AJAX _ AJAX XMLHttp

AJAX XMLHttp

XMLHttpRequest对象是进行AJAX的核心部件。

XMLHttpRequest 对象

当代所有的浏览器都会支持JavaScript中的XMLHttpRequest对象，JavaScript通过该对象，可与服务器进行数据交换，从而不刷新页面就可以更新页面数据。而且这种更新的过程，是非阻塞的，不会影响JavaScript主线程的运行，也不会影响HTML页面的渲染。

发送请求就是一瞬之间的事情，发送请求的这句代码的执行，只是创建了进行发送请求的这件事情，而这件事情，并不由这句代码进行实际执行，也就是对JavaScript的主线程是不负责这些事情的，这些事情是由AJAX线程进行处理的，因此，JavaScript的主线程是不堵塞的，因为网络请求而会比较堵塞的是AJAX工作线程。

创建 XMLHttpRequest对象

variable = new XMLHttpRequest();

当代所有的浏览器中，XMLHttpRequest都是属于浏览器内置的对象类型。

var xhttp = new XMLHttpRequest();

运行一下

跨域问题

默认情况下，为了避免跨域伪造请求，浏览器不支持跨域AJAX请求。（当然解决跨域请求问题，也是有很多种方式的，不过正常AJAX尽量不要进行跨域请求，否则所有浏览器也不会禁止跨域请求；若想用其他方式代替跨域请求，推荐阅读《学习JSONP》）

同一个主域名下，不同的子域名之间也算跨域，比如zhuanfou.com与d.zhuanfou.com就属于跨域。

兼容古老的浏览器（IE5和IE6）

variable = new ActiveXObject("Microsoft.XMLHTTP");

对于IE5和IE6这类古老过时的浏览器，若要兼容，语法则如上所示，创建ActiveX对象；因此，在实践过程中，考虑兼容，则如下所示：

if (window.XMLHttpRequest) {
  // 现代浏览器
  xhttp = new XMLHttpRequest();
 } else {
  // 兼容IE5和IE6
  xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

运行一下

XMLHttpRequest对象 - 方法

方法	描述
new XMLHttpRequest()	新建一个XMLHttpRequest对象
abort()	取消当前请求
getAllResponseHeaders()	返回所有的头文件信息
getResponseHeader()	返回指定的头文件信息
open(method, url, async, user, psw)	定义一个请求 method:请求方式（GET请求或POST请求） url:发送请求的url地址 async:是否异步请求，true代表异步请求，false代表同步请求，默认为true user:用户名（可选参数） psw:密码（可选参数）
send()	发送请求（常见于GET请求）
send(string)	发送请求，string为要发送给服务器的数据（常见于POST请求，大多POST请求都会发送一些数据给服务器）
setRequestHeader()	添加自定义的键值配对到请求的头文件中

XMLHttpRequest对象 - 属性

属性	描述
onreadystatechange	该属性是用来定义回调函数的，当readyState属性发生改变则调用运行回调函数
readyState	XMLHttpRequest的状态码 0:请求尚未初始化 1:与服务器连接建立 2:请求收到 3:请求正在进行中 4:请求完成，已收到服务器返回结果
responseText	服务器返回的结果字符串
responseXML	以XML格式获取服务器的返回结果
status	请求的状态码，常见的状态码如下： 200:"OK"请求成功 403:"Forbidden"禁止请求 404:"Not Found"没有发现请求内容
statusText	请求的状态信息，如："OK"、"Forbidden"、"Not Found"

AJAX XMLHttp

推广