对原生AJAX 的简单封装:wink:

我们先看一下JQuery的AJAX的使用。
jQuery.ajax(url,[settings])

参数:

  1. url:一个用来包含发送请求的URL字符串。
  2. data [Object,String]类型:发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:[“bar1”, “bar2”]} 转换为 “&foo=bar1&foo=bar2”。
  3. type [String]类型:(默认: “GET”) 请求方式 (“POST” 或 “GET”), 默认为 “GET”。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。
  4. success 当请求之后调用。传入返回后的数据,以及包含成功代码的字符串。
  5. error 在请求出错时调用。传入XMLHttpRequest对象,描述错误类型的字符串以及一个异常对象(如果有的话)

JQuery AJAX 的简单使用

1
2
3
4
5
6
7
8
9
10
11
$.ajax({
type: "get",
url: "ajax_get.php",
data: "username=John&userpwd=Boston",
success: function(xrh) {
alert(xrh.responseText);
},
error: function() {
alert("请求错误")
}
});


对原生AJAX的封装:
  对元素我们需要注意的有以下几点

  1. 对IE5 IE6的兼容
  2. AJAX在ie中的缓存问题
  3. url中的中文进行转码 地址栏中不能出现中文
  4. 将传入的对象转化为字符串函数
  5. 判断外界是否传入超时
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
//封装对象转化为字符串函数
/**
*
* "username":"wzg"
* "userpwd":"123"
* "t":"235262345112354"
*/
function datastr(data) {
var res = [];
data.t = new Date().getTime();
for (var key in data) {
//encodeURLComponent() 将url中的中文进行转码 地址栏中不能出现中文
// url中只能出现字母数字下划线
res.push(encodeURIComponent(key) + "=" + encodeURIComponent(data[key])); //[username = wzg,userpwd=123]
}
return res.join("&"); //username = wzg&userpwd=123
}


function ajax(option) {

// 将对象转化为字符串
var str = datastr(option.data);
//1.创建一个异步对象
var xhr, timer;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xhr = new XMLHttpRequest();
} else { // code for IE6, IE5
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
// 2.设置请求方式
if (option.type.toLowerCase() === "get") {
xhr.open(option.type, option.url + "?" + str, true);
// 3.发送请求
xhr.send();
} else {
xhr.open(option.type, option.url, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(str);
}

// 4.监听状态的变化
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
clearInterval(timer); //接收到响应 就关闭定时器
if (xhr.status >= 200 && xhr.status <= 300 ||
xhr.status == 304) {
// 5.处理返回的结果
option.success(xhr);
//无论请求成功还是失败 都会调用option.complete();函数
option.option.complete();;
} else {
option.error(xhr);
//无论请求成功还是失败 都会调用option.complete();函数
option.complete();
}
}
}

// 判断外界是否传入超时
if (option.timeout) {
timer = setInterval(function() {
xhr.abort(); //终止异步请求
clearInterval(timer);
}, option.timeout)
}

}


对封装的AJAX的简单使用:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
btn.onclick = function() {
ajax({
type: "get",
url: "1.txt",
timeout: 3000,
data: {
"username": "wzg",
"userpwd": "123"
},
success: function(xhr) {
// console.log(xhr.responseXML);
// let x = xhr.responseXML
// console.log(x.querySelector("to").innerHTML);
// console.log(x.querySelector("from"));
let x = xhr.responseText;
y = JSON.parse(x);
console.log(y.name);
console.log(y.age);
},
error: function(xhr) {
alert("请求失败!!!");
}
});
}