前端的工作,免不了要用到交互,请求后端的数据,可能大多人一直选择用jq封装好的方法直接使用,要知道封装这个事我们自己也可以的,今天给大家介绍一种封装方法,而且连跨域问题都不在话下,有了这个函数,是不是ajax请求so easy了呢!!下面就是:
function ajax(obj){//做网络请求的时候,参数以对象的形式传递进来,用的之后直接传参就ok啦!
//规定:obj里面包含属性
//1.url
//2.type-----get还是post
//3,data-----前端给后端传递的参数(前端传递的时候以对象的形式)
//4,回调函数----success;
//5,回调函数----error;
//6,跨域的回调函数--callback
//7,后台接受回调函数的key值
if(obj.callBack&&obj.key){
var sc=document.createElement("script");
document.documentElement.appendChild(sc);
sc.src=obj.url+"?"+obj.key+"=callBack";
return;
}
var ajaxObj=null;
if(window.XMLHttpRequest){
ajaxObj=new XMLHttpRequest();
}else{
ajaxObj=new ActiveXObject("Microsoft.XMLHTTP");
}
//检测状态的变化
ajaxObj.onreadystatechange=function(){
if(ajaxObj.readyState==4){
if(ajaxObj.status>=200&&ajaxObj.status<300||ajaxObj.status==304){
if(obj.success){
obj.success(JSON.parse(ajaxObj.responseText));
// obj.success(ajaxObj.responseText);
}else{
alert("您忘记了success函数!");
}
}else{
if(obj.error){
obj.error(ajaxObj.status);
}else{
alert("您忘记了error函数!!");
}
}
}
}
//type转化为小写,方便使用;当用户不传type的时候,默认为get;
var type=obj.type||"get";
type=type.toLowerCase();
var params="";//字符串
//判断是否传递了参数
if(obj.data){
for(var key in obj.data){
params+=(key+"="+obj.data[key]+"&");
}
params=params.slice(0,params.length-1);
}
//当type为get的时候
if(type=="get"){
ajaxObj.open(type,obj.url+"?"+params,true);
ajaxObj.send();
}else{
ajaxObj.open(type,obj.url,true);
ajaxObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajaxObj.send(params);
}
}