karlew > js/jquery > 原生js实现ajax方法

原生js实现ajax方法

6-04 4,813 views

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

  1. function ajax(){  
  2.     var ajaxData = {  
  3.         type:arguments[0].type || "GET",  
  4.         url:arguments[0].url || "",  
  5.         async:arguments[0].async || "true",  
  6.         data:arguments[0].data || null,  
  7.         dataType:arguments[0].dataType || "text",  
  8.         contentType:arguments[0].contentType || "application/x-www-form-urlencoded",  
  9.         beforeSend:arguments[0].beforeSend || function(){},  
  10.         success:arguments[0].success || function(){},  
  11.         error:arguments[0].error || function(){}  
  12.     }  
  13.     ajaxData.beforeSend()  
  14.     var xhr = createxmlHttpRequest();   
  15.     xhr.responseType=ajaxData.dataType;  
  16.     xhr.open(ajaxData.type,ajaxData.url,ajaxData.async);   
  17.     xhr.setRequestHeader("Content-Type",ajaxData.contentType);   
  18.     xhr.send(convertData(ajaxData.data));   
  19.     xhr.onreadystatechange = function() {   
  20.         if (xhr.readyState == 4) {   
  21.             if(xhr.status == 200){  
  22.                 ajaxData.success(xhr.response)  
  23.             }else{  
  24.                 ajaxData.error()  
  25.             }   
  26.         }  
  27.     }   
  28. }  
  29.   
  30. function createxmlHttpRequest() {   
  31.     if (window.ActiveXObject) {   
  32.         return new ActiveXObject("Microsoft.XMLHTTP");   
  33.     } else if (window.XMLHttpRequest) {   
  34.         return new XMLHttpRequest();   
  35.     }   
  36. }  
  37.   
  38. function convertData(data){  
  39.     if( typeof data === 'object' ){  
  40.         var convertResult = "" ;   
  41.         for(var c in data){    
  42.             convertResult+= c + "=" + data[c] + "&";    
  43.         }    
  44.         convertResult=convertResult.substring(0,convertResult.length-1)  
  45.         return convertResult;  
  46.     }else{  
  47.         return data;  
  48.     }  
  49. }  

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

  1. ajax({  
  2.     type:"POST",  
  3.     url:"ajax.php",  
  4.     dataType:"json",  
  5.     data:{"val1":"abc","val2":123,"val3":"456"},  
  6.     beforeSend:function(){  
  7.         //some js code  
  8.     },  
  9.     success:function(msg){  
  10.         console.log(msg)  
  11.     },  
  12.     error:function(){  
  13.         console.log("error")  
  14.     }  
  15. })  

版权属于: karlew

原文地址: https://www.karlew.com/archives/523

转载时必须以链接形式注明原始出处及本声明。

欢迎留言