原生js实现ajax方法(超简单)
上一篇文章写到原生js取代jquery的一些常用函数：原生js仿jquery一些常用方法，那么，ajax如何实现呢？如下是一个比较完整的ajax()
functionajax(){
varajaxData={
type:arguments[0].type||"GET",
url:arguments[0].url||"",
async:arguments[0].async||"true",
data:arguments[0].data||null,
dataType:arguments[0].dataType||"text",
contentType:arguments[0].contentType||"application/x-www-form-urlencoded",
beforeSend:arguments[0].beforeSend||function(){},
success:arguments[0].success||function(){},
error:arguments[0].error||function(){}
}
ajaxData.beforeSend()
varxhr=createxmlHttpRequest();
xhr.responseType=ajaxData.dataType;
xhr.open(ajaxData.type,ajaxData.url,ajaxData.async);
xhr.setRequestHeader("Content-Type",ajaxData.contentType);
xhr.send(convertData(ajaxData.data));
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
ajaxData.success(xhr.response)
}else{
ajaxData.error()
}
}
}
}
functioncreatexmlHttpRequest(){
if(window.ActiveXObject){
returnnewActiveXObject("Microsoft.XMLHTTP");
}elseif(window.XMLHttpRequest){
returnnewXMLHttpRequest();
}
}
functionconvertData(data){
if(typeofdata==='object'){
varconvertResult="";
for(varcindata){
convertResult+=c+"="+data[c]+"&";
}
convertResult=convertResult.substring(0,convertResult.length-1)
returnconvertResult;
}else{
returndata;
}
}
使用格式跟jquery的ajax差不多：
ajax({
type:"POST",
url:"ajax.php",
dataType:"json",
data:{"val1":"abc","val2":123,"val3":"456"},
beforeSend:function(){
//somejscode
},
success:function(msg){
console.log(msg)
},
error:function(){
console.log("error")
}
})
以上就是小编为大家带来的原生js实现ajax方法(超简单)的全部内容了，希望对大家有所帮助，多多支持毛票票~