AJAX的使用
AJAX的原理就是使用XMLHttprequest对象来向服务器进行异步请求，从服务器来获取数据，然后前台使用javascript来接受数据并渲染至HTML。
XMLHttpRequest简单的来说，就是为了不阻塞用户的加载，在这个技术出现之前，可能就是同步，也就是说，在一个请求没完成之前，其他的请求是无法继续的，那么用户体验是非常差的，也就是所谓的等待“白屏”，这个技术很好的解决了这个问题，例如：点菜的时候，一个服务员可以为客人点餐，点完后，让客人等菜到，然后又可以为下一位客人点餐，实现异步操作的过程。
onreadystatechange 每次状态改变所触发事件的事件处理程序
responseText 用ajax从服务器来获取的数据包
status 网络的状态码，一般为200或者304
readyState 对象的状态码，4为完成
readyState 对象状态值
0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
1 (初始化) 对象已建立，尚未调用send方法
2 (发送数据) send方法已调用，但是当前的状态及http头未知
3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
| function json2url(json){
var arr = [];
json.t = Math.random();
for(var name in json){
console.log(name);
arr.push(name + "=" + encodeURIComponent(json[name]));
}
return arr.join("&");
}
function Jajax(options){
options = options || {};
if(!options.url)return ;
options.type = options.type || "get";
options.data = options.data || {};
options.timeout = options.timeout || 0;
var str = json2url(options.data);//处理字符串
//1 创建
if(window.XMLHttpRequest){
var xhr = new XMLHttpRequest(); //非IE浏览器
} else {
var xhr = new ActiveXObject("Microsoft.XMLHTTP"); //IE浏览器
}
if(options.type == "get"){
//2 连接
//xhr.open("get",options.url + "?" + str,true);
xhr.open("get",options.url,true);
xhr.open("get",options.url + "?" + str,true);
//3 发送
xhr.send();
} else {
//2 连接
xhr.open("post",options.url,true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //添加请求头
//3 发送
xhr.send(str);
}
//4 接收
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){//完成
clearTimeout(timer);
if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
options.success && options.success(xhr.responseText);
} else {
options.error && options.error(xhr.status);
}
}
};
if(options.timeout){
var timer = setTimeout(function(){
xhr.abort(); //请求超时不请求
},options.timeout);
}
}
使用：
Jajax({
type:'get',
data:{'name':'july','age':22},
url:'latale.github.io',
success:function(response) {
const data = JSON.parse(response);
if(response.status == 200) {
console.log(status);
}
},
error:function(error) {
console.log(error);
}
})
|
——end——
have a good trip! 
