原生js实现ajax请求方法

来源：99网

这次给大家带来原生js实现ajax请求方法，原生js实现ajax请求方法的注意事项有哪些，下面就是实战案例，一起来看一下。

上一篇文章写到原生js取代jquery的一些常用函数：原生js仿jquery一些常用方法，那么，ajax如何实现呢？如下是一个比较完整的ajax()

function ajax(){ 
 var ajaxData = { 
 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() 
 var xhr = 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() 
 } 
 } 
 } 
} 
 
function createxmlHttpRequest() { 
 if (window.ActiveXObject) { 
 return new ActiveXObject("Microsoft.XMLHTTP"); 
 } else if (window.XMLHttpRequest) { 
 return new XMLHttpRequest(); 
 } 
} 
 
function convertData(data){ 
 if( typeof data === 'object' ){ 
 var convertResult = "" ; 
 for(var c in data){ 
 convertResult+= c + "=" + data[c] + "&"; 
 } 
 convertResult=convertResult.substring(0,convertResult.length-1) 
 return convertResult; 
 }else{ 
 return data; 
 } 
}

使用格式跟jquery的ajax差不多：

ajax({ 
 type:"POST", 
 url:"ajax.php", 
 dataType:"json", 
 data:{"val1":"abc","val2":123,"val3":"456"}, 
 beforeSend:function(){ 
 //some js code 
 }, 
 success:function(msg){ 
 console.log(msg) 
 }, 
 error:function(){ 
 console.log("error") 
 } 
})

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

全部频道

原生js实现ajax请求方法