原生Ajax的实现

• 列表内容

  XMLHttpRequest

实现ajax之前必须要创建一个 XMLHttpRequest 对象。如果不支持创建该对象的浏览器，则需要创建 ActiveXObject，具体方法如下：

var xmlHttp; 
function createxmlHttpRequest() { 
    if (window.ActiveXObject) { 
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } else if (window.XMLHttpRequest) { 
        xmlHttp=new XMLHttpRequest(); 
    } 
}

• 使用上面创建的xmlHttp实现最简单的ajax get请求：

function doGet(url){ 
    // 注意在传参数值的时候最好使用encodeURI处理一下，以防出现乱码 
    createxmlHttpRequest(); 
    xmlHttp.open("GET",url); 
    xmlHttp.send(null); 
    xmlHttp.onreadystatechange = function() { 
        if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)) { 
            alert('success'); 
        } else { 
            alert('fail'); 
        } 
    }
}  

• 使用上面创建的xmlHttp实现最简单的ajax post请求：

function doPost(url,data){ 
    //注意在传参数值的时候最好使用encodeURI处理一下，以防出现乱码 
    createxmlHttpRequest(); 
    xmlHttp.open("POST",url); 
    xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
    xmlHttp.send(data); 
    xmlHttp.onreadystatechange = function() { 
        if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)) { 
            alert('success'); 
        } else { 
            alert('fail'); 
        } 
    } 
} 

• 方法2：原生js实现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") 
  } 
})