用原生js实现ajajx

时间:2022-11-02 16:04:15
 1 // 通过createXHR()函数创建一个XHR对象
2 function createXHR() {
3 if(window.XMLHttpRequest) { // IE7、Firefox、Opera、Chrome和Safari
4 return new XMLHttpRequest();
5 }else if(window.ActiveXObject) { // IE6以下
6 var versions = ['MSXML2.XMLHttp','Microsoft.XMLHTTP'];
7 for (var i=0,len = versions.length; i<len; i++){
8 try{
9 return new ActiveXObject(versions[i]);
10 break
11 } catch (e) {
12 console.log(e)
13 }
14 }
15 } else {
16 throw new Error('此浏览器不支持XHR对象')
17 }
18 }
19
20 //封装ajax,参数为一个对象
21 function ajax(obj) {
22 var xhr = createXHR(); //创建XHR对象
23 // 通过使用随机字符串解决IE浏览器第二次默认获取缓存的问题
24 obj.url = obj.url + '?rand=' + Math.random();
25 obj.data = params(obj.data); //通过params()将名值对转换成字符串
26 //在使用XHR对象时,必须先调用open()方法
27 //它接收三个参数,:请求类型(get、post)、请求的URL和表示是否异步
28 xhr.open(obj.method,obj.url,obj.async) //打开和服务的链接
29 //若是get请求,则将数据加到url后面
30 if(obj.method === 'get'){
31 obj.url += obj.url.indexOf('?') === -1? '?'+ obj.data : '&' + obj.data;
32 }
33 //如果是post请求
34 if (obj.method === 'post'){
35 //post需要自己设置http的请求头,来模仿表单提交
36 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
37 xhr.send(obj.data) //post方式将数据放在send()方法里 //send动作才是真正的给服务器按照上面open的url发送请求
38 } else {
39 xhr.send(null); //get方式则填null
40 }
41
42 xhr.onreadystatechange = function () {
43 if (xhr.readyState == 4){ //判断对象的状态是否完成
44 callback() //回调函数
45 }
46 }
47
48 function callback() {
49 if (xhr.status == 200 || xhr.status == 304) { //判断http的交互是否成功,200表示成功
50 obj.success(xhr.responseText); //回调传递参数
51 } else {
52 alert('获取数据错误!错误代号:' + xhr.status + ',错误信息:' + xhr.statusText)
53 }
54 }
55 }
56
57 //名值对转换为字符串
58 function params(data) {
59 var arr = [];
60 for (var i in data) {
61 //特殊字符传参产生的问题可以使用encodeURIComponent()进行编码处理
62 arr.push(encodeURIComponent(i)+ '=' + encodeURIComponent(data[i]))
63 }
64 return arr.join('&')
65 }