原生js實現對Ajax的封裝(模仿jquery)
阿新 • • 發佈:2019-01-25
前言
眾所周知,jquery在我們日常開發中的使用頻率非常高,與js相比,我們省去了冗長的獲取元素的程式碼,不用考慮一些麻煩的相容問題,更加方便的動畫實現,以及更加方便的方法呼叫讓我們覺得jquery真是越用越舒服。但是jquery說到底還是對js的封裝,我們不光要用的舒服還要深入理解其中的原理,這樣才能更好的使用它。
首先我們封裝的函式為了能實現可傳入無限多個引數,在使用我們即將封裝的函式時,需要使用物件進行傳參,形式如下:
//data作為引數傳入我們下面封裝的函式
var data = {
//資料
user:"yonghu1",
pass:'12345' ,
age:18,
//回撥函式
success:function (data){
alert(data);
}
}
函式封裝:
1.封裝一個輔助函式,把傳進來的物件拼接成url的字串
function toData(obj){
if (obj == null){
return obj;
}
var arr = [];
for (var i in obj){
var str = i+"="+obj[i];
arr.push(str);
}
return arr.join("&");
}
2.封裝Ajax
function ajax(obj){
//指定提交方式的預設值
obj.type = obj.type || "get";
//設定是否非同步,預設為true(非同步)
obj.async = obj.async || true;
//設定資料的預設值
obj.data = obj.data || null;
if (window.XMLHttpRequest){
//非ie
var ajax = new XMLHttpRequest();
}else{
//ie
var ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
//區分get和post
if (obj.type == "post"){
ajax.open(obj.type,obj.url,obj.async);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var data = toData(obj.data);
ajax.send(data);
}else{
//get test.php?xx=xx&aa=xx
var url = obj.url+"?"+toData(obj.data);
ajax.open(obj.type,url,obj.async);
ajax.send();
}
ajax.onreadystatechange = function (){
if (ajax.readyState == 4){
if (ajax.status>=200&&ajax.status<300 || ajax.status==304){
if (obj.success){
obj.success(ajax.responseText);
}
}else{
if (obj.error){
obj.error(ajax.status);
}
}
}
}
}