自己封装一个简单的ajax插件
这个插件主要是我为了学习原生ajax和函数封装而写的,还存在很多bug,同样在学习ajax和函数封装的同学可以参考参考,取其精华弃其糟粕
function myAjax(obj) { var xmlHttp; //保存xmlHttpRequest对象 var type = obj.requestType; //保存请求方式 var cache = obj.cache || false; //get时是否使用缓存,默认否 var success = obj.success; //数据请求成功的回调方法 var error = obj.error; //发生错误的回调方法 var async = obj.async || false; //是否异步,默认否 var data = []; //存储用户发来的数据 var url = obj.url; //用户请求地址 createXmlHttp(); //执行xmlHttp创建函数 //创建xmlHttp失败 if(!xmlHttp) { console.log("我的老哥,创建xmlHttp对象失败啦!您的浏览器不支持xmlHttpRequest对象"); } try { //定义状态监听函数 xmlHttp.onreadystatechange = function () { switch (xmlHttp.readyState) { case 1: console.log("open() 方法已调用,但是 send() 方法未调用。请求还没有被发送。"); break; case 2: console.log("Send() 方法已调用,HTTP 请求已发送到 Web 服务器。未接收到响应。"); break; case 3: console.log("所有响应头部都已经接收到。响应体开始接收但未完成。"); break; case 4: if (xmlHttp.status == 200) { console.log("HTTP 响应已经完全接收。"); success(xmlHttp.responseText); //调用回调函数 } break; default: error(xmlHttp.statusText); break; } }; //把用户传来的数据转换成字符串 for (var i in obj.data) { data.push(i + '=' + obj.data[i]); } data = data.join('&'); if (type.toUpperCase() == 'GET') { //如果是get请求 if (cache == false) { //如果get请求不使用缓存 xmlHttp.open('get', url + '?' + data + '&random=' + Math.random(), async); xmlHttp.send('null'); } else { //如果get请求使用缓存 xmlHttp.open('get', url + '?' + data, async); xmlHttp.send('null'); } } else if (type.toUpperCase() == 'POST') //如果是post请求 { xmlHttp.open('post', url, async); xmlHttp.setRequestHeader("Content-Type" , "application/x-www-form-urlencoded"); xmlHttp.send(data); } else { throw new Error('您的请求方法有误!'); } } catch (error) { console.log("出错啦:" + error.message); } //创建xmlHttpRequest对象函数 function createXmlHttp() { if(window.ActiveXObject) { try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } } else if (window.XMLHttpRequest){ try { xmlHttp = new XMLHttpRequest(); } catch(e) { xmlHttp = false; } } } }
插件基本逻辑: 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("请求失败了,以下是具体信息:\n" + statusText); } }); post方法使用例子: myAjax({ requestType: 'post', url: '/postFunc', async: true, data: {name:"shuai", age: 10}, success: function (data) { console.log(data); }, error: function (statusText) { alert("请求失败了,以下是具体信息:\n" + statusText); } });
.
相关推荐
TONIYH 2020-06-05
坚持着执着 2020-07-16
坚持着执着 2020-06-14
kentrl 2020-11-10
结束数据方法的参数,该如何定义?-- 集合为自定义实体类中的结合属性,有几个实体类,改变下标就行了。<input id="add" type="button" value="新增visitor&quo
ajaxyan 2020-11-09
zndy0 2020-11-03
学留痕 2020-09-20
Richardxx 2020-11-09
learningever 2020-09-19
chongxiaocheng 2020-08-16
ajaxhe 2020-08-16
lyqdanang 2020-08-16
curiousL 2020-08-03
TONIYH 2020-07-22
时光如瑾雨微凉 2020-07-19
83510998 2020-07-18
jiaguoquan00 2020-07-07