指引网

当前位置: 主页 > 网页制作 > JavaScript >

原生js实现ajax方法

来源:网络 作者:佚名 点击: 时间:2017-08-07 22:14
[摘要] 原生js实现ajax方法
原生js实现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.     iftypeof 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. }   

 

------分隔线----------------------------