48 function myAjax(obj) { 49 var xmlHttp; //保存xmlHttpRequest对象 50 var type = obj.requestType; //保存请求方式 51 var cache = obj.cache || false; //get时是否使用缓存,默认否 52 var success = obj.success; //数据请求成功的回调方法 53 var error = obj.error; //发生错误的回调方法 54 var async = obj.async || false; //是否异步,默认否 55 var data = []; //存储用户发来的数据 56 var url = obj.url; //用户请求地址 57 58 59 createXmlHttp(); //执行xmlHttp创建函数 60 61 //创建xmlHttp失败 62 if(!xmlHttp) { 63 console.log("我的老哥,创建xmlHttp对象失败啦!您的浏览器不支持xmlHttpRequest对象"); 64 } 65 66 try { 67 //定义状态监听函数 68 xmlHttp.onreadystatechange = function () { 69 switch (xmlHttp.readyState) { 70 case 1: 71 console.log("open() 方法已调用,但是 send() 方法未调用。请求还没有被发送。"); 72 break; 73 case 2: 74 console.log("Send() 方法已调用,HTTP 请求已发送到 Web 服务器。未接收到响应。"); 75 break; 76 case 3: 77 console.log("所有响应头部都已经接收到。响应体开始接收但未完成。"); 78 break; 79 case 4: 80 if (xmlHttp.status == 200) { 81 console.log("HTTP 响应已经完全接收。"); 82 success(xmlHttp.responseText); //调用回调函数 83 } 84 break; 85 default: 86 error(xmlHttp.statusText); 87 break; 88 } 89 }; 90 91 //把用户传来的数据转换成字符串 92 for (var i in obj.data) { 93 data.push(i + '=' + obj.data[i]); 94 } 95 data = data.join('&'); 96 97 if (type.toUpperCase() == 'GET') { //如果是get请求 98 if (cache == false) { //如果get请求不使用缓存 99 xmlHttp.open('get', url + '?' + data + '&random=' + Math.random(), async); 100 xmlHttp.send('null'); 101 } else { //如果get请求使用缓存 102 xmlHttp.open('get', url + '?' + data, async); 103 xmlHttp.send('null'); 104 } 105 } else if (type.toUpperCase() == 'POST') //如果是post请求 106 { 107 xmlHttp.open('post', url, async); 108 xmlHttp.setRequestHeader("Content-Type" 109 , "application/x-www-form-urlencoded"); 110 xmlHttp.send(data); 111 } else { 112 throw new Error('您的请求方法有误!'); 113 } 114 } catch (error) { 115 console.log("出错啦:" + error.message); 116 } 117 118 119 //创建xmlHttpRequest对象函数 120 function createXmlHttp() { 121 if(window.ActiveXObject) { 122 try { 123 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); 124 } catch (e) { 125 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 126 } 127 128 } else if (window.XMLHttpRequest){ 129 try { 130 xmlHttp = new XMLHttpRequest(); 131 } catch(e) { 132 xmlHttp = false; 133 } 134 } 135 } 136 137 }
插件基本逻辑:
GET请求: 1.新建XHR对象 2.定义状态监听函数,各种状态对应各种处理 3.调用open方法启动请求,准备发送 4.使用send方法发送请求,参数为null POST请求: 1.新建XHR对象 2.定义状态监听函数,各种状态对应各种处理 3.使用open方法启动请求,准备发送 4.设置http头信息的Content-Type类型,模拟表单发送 5.使用send方法发送请求,参数为自己要发送的东西
插件使用方法:
1.在html页面引入myAjax.js文件之后就可以使用啦
2.
get方法使用例子:
myAjax({
requestType: 'get',
url: '/getFunc',
async: true,
cache: false,
data: { name: "lin", age: "20"},
success: function (data) {
alert(data);
},
error: function (statusText) {
alert("请求失败了,以下是具体信息: " + statusText);
}
});
post方法使用例子:
myAjax({
requestType: 'post',
url: '/postFunc',
async: true,
data: {name:"shuai", age: 10},
success: function (data) {
console.log(data);
},
error: function (statusText) {
alert("请求失败了,以下是具体信息: " + statusText);
}
});
这个插件主要是我为了学习原生ajax和函数封装而写的,还存在很多bug,同样在学习ajax和函数封装的同学可以参考参考,取其精华弃其糟粕,嘻嘻嘻。
myAjax.js已经在github开源,上面有实现具体例子: https://github.com/nayonglin/myAjax 记得star啊我的老哥!!!!!!