第2章 Ajax对象
2.1 获取对象
通过上一节我们发现，想要使用 ajax 的一系列功能，我们就必须先得到 ajax 对象
基于 W3C标准 浏览器：
var xhr = new XMLHttpRequest();
基于IE内核的浏览器:
var xhr = new ActiveXObject('Microsoft.XMLHTTP');
<script>
var btu = document.getElementById('btu');
btu.onclick = function(){
//基于 W3C标准 浏览器
var xhr = new XMLHttpRequest();
alert(xhr);
//基于IE内核的浏览器， W3C标准浏览器中报错
var xhr = new ActiveXObject('Microsoft.XMLHTTP');
alert(xhr);
}
</script>
浏览器标准不一样，得到的对象也不一样，我们也不知道客户使用什么样的浏览器，因此，我们需要解决兼容性问题；
修改上述代码并测试，具有兼容性：
<script>
var btu = document.getElementById('btu');
btu.onclick = function(){
try{
var xhr = new XMLHttpRequest()
}catch(e){};
try{
var xhr = new ActiveXObject('Microsoft.XMLHTTP')
}catch(e){};
alert(xhr);
}
</script>
再次对代码进行修改 兼容代码封装进函数调用
<script>
var btu = document.getElementById('btu');
btu.onclick = function(){
//封装进函数供其他程序调用
function cXHR(){
try{return new XMLHttpRequest()}catch(e){};
try{return new ActiveXObject('Microsoft.XMLHTTP')}catch(e){};
}
alert(cXHR());
}
</script>
将函数写入单独的文件，共其他地方引入调用
创建createXHR.js
将函数复制到文件 createXHR.js 内并保存, 如图：
使用：
//文件引入
<script src="createXHR.js"></script>
<script>
var btu = document.getElementById('btu');
btu.onclick = function(){
//函数调用
alert(cXHR());
}
</script>
顺便封装一个方法：
使用id属性获取DOM对象，方便后面使用
function gid(id){
return document.getElementById(id);
}
2.2 ajax对象的属性、方法 *
火狐开发者文档：
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest
2.2.1 属性
-
**readyState： Ajax状态码 * **
0：表示对象已建立，但未初始化，只是 new 成功获取了对象，但是未调用open方法
1：表示对象已初始化，但未发送，调用了open方法，但是未调用send方法
2：已调用send方法进行请求
3：正在接收数据（接收到一部分），客户端已经接收到了一部分返回的数据
**4：接收完成，客户端已经接收到了所有数据 * ** -
status ：http响应状态码
200代表成功获取服务器端数据
404未找到页面等等…… -
statusText ：http响应状态文本
-
responseText：如果服务器端返回字符串，使用responseText进行接收
-
responseXML ：如果服务器端返回XML数据，使用responseXML进行接收
-
onreadystatechange：当 readyState 状态码发生改变时所触发的回调函数
2.2.2 方法
-
open(method,url,[aycs])：初始化Ajax对象 (打开)
method:http请求方式，get/post
url:请求的服务器地址
aycs:同步与异步 -
setRequestHeader(header,value)：设置请求头信息
header ：请求头名称
value ：请求头的值 -
xhr.getAllResponseHeaders() 获取全部响应头信息
-
xhr.getResponseHeader(‘key’) 获取指定头信息
-
send([content]) ：发送Ajax请求
content ： 如果是get请求时，此参数为null;如果是post请求时，此参数就是要传递的数据
注意: 所有相关的事件绑定必须在调用send()方法之前进行.
2.2.3 同步与异步
例如，小明去餐馆排队点餐，前台服务员将小明的菜单告诉厨师进行制作，此时小明后面排队的人就一直等着，
直到厨师制作完成，把饭菜送到小明手里后离开，后面的人才能继续点餐；这就是同步处理
但是，如果前台服务员将小明的菜单告诉厨师后，服务员发给小明一个好牌去旁边等待，后面的人继续点餐，
厨师将小明的饭菜做好后，随时呼唤小明就餐；这就是异步处理
服务器的不同做法，就代表着 Ajax 的同步或异步处理；
小明就是客户端；
厨师就是后台服务器；
图示：
前台代码：
<script src="createXHR.js"></script>
<script>
function t1(){
var xhr = cXHR();
xhr.onreadystatechange = function(){
if(this.readyState == 4){
alert(this.responseText);
}
}
//false同步
//true 异步
xhr.open('get','/test',false);
xhr.send(null);
}
function t2(){
alert('t2');
}
t1();
t2();
</script>
