原生js封装的ajax方法示例
本文实例讲述了原生js封装的ajax方法。分享给大家供大家参考，具体如下：
众所周知，框架之间会有冲突，这是源生js就起到作用了，下面介绍一种源生js封装的ajax请求。
functionajax(options){
options=options||{};
options.type=(options.type||"GET").toUpperCase();
options.dataType=options.dataType||"json";
varparams=formatParams(options.data);
//创建xhr对象-非IE6
if(window.XMLHttpRequest){
varxhr=newXMLHttpRequest();
}else{//IE6及其以下版本浏览器
varxhr=newActiveXObject('Microsoft.XMLHTTP');
}
//GETPOST两种请求方式
if(options.type=="GET"){
xhr.open("GET",options.url+"?"+params,true);
xhr.send(null);
}elseif(options.type=="POST"){
xhr.open("POST",options.url,true);
//设置表单提交时的内容类型
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(params);
}
//接收
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
varstatus=xhr.status;
if(status>=200&&status<300){
options.success&&options.success(xhr.responseText);
}else{
options.fail&&options.fail(status);
}
}
}
}
//格式化参数
functionformatParams(data){
vararr=[];
for(varnameindata){
arr.push(encodeURIComponent(name)+"="+encodeURIComponent(data[name]));
}
arr.push(("v="+Math.random()).replace(".",""));
returnarr.join("&");
}
调用方法
ajax({
url:"data.json",
type:"GET",
data:{},
dataType:"json",
success:function(response){
//此处放成功后执行的代码
//解析返回的字符串转为json对象
varusingdata=eval("("+response+")").data;
}
fail:function(status){
//此处放失败后执行的代码
}
});
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript中ajax操作技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。