原生Js实现Ajax

 一般来说，大家可能都会习惯用JQuery提供的Ajax方法，但是用原生的js怎么去实现Ajax方法呢

原生js实现Ajax方法

// get请求：var Ajax={
  get: function(url, fn) {
    // XMLHttpRequest对象用于在后台与服务器交换数据   
    var xhr = new XMLHttpRequest();            
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function() {
      // readyState == 4说明请求已完成
      if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) { 
        // 从服务器获得数据 
        fn.call(this, xhr.responseText);  
      }
    };
    xhr.send();
  }
// post请求：
  post: function (url, data, fn) { // data为'a=1&b=2'这种字符串格式，在jQuery里如果data为对象会自动将对象序列化
    var xhr = new XMLHttpRequest();
    xhr.open("POST", url, true); // 第一个参数是请求方式，第二个参数是请求地址,第三个参数表示是否异步执行，默认为true，表示异步执行
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");　// 设置请求报文，一般为固定格式，如果参数是以'a=1&b=2'的格式，那么Content-Type的值就是前面当中
    xhr.onreadystatechange = function() { // xhr.onreadystatechange定义了当readyState属性发生改变时所调用的函数
      if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
        fn.call(this, xhr.responseText);
      }
    };
    xhr.send(data); // send方法写在事件函数onreadystatechange后面，因为send方法执行完毕，readyState属性将不会发生改变，监听函数onreadystatechange也就不会执行
  }
}

 

get请求参数在请求地址中，post请求参数被封装在send方法中

readyState：存有服务器响应的状态信息，Ajax状态码

• 0: 已经创建了ajax对象，但是请求未初始化（还没有调用open方法）
• 1: 已经调用了open方法，但是没有发送请求
• 2: ajax对象已经调用了send方法
• 3: 请求处理中,responseText 属性已经包含部分数据）
• 4: 请求已完成，且响应已就绪,下载操作已完成

JQuery提供的Ajax方法：

$.ajax({
    url: ,
    type: '',
    dataType: '',
    data: {
          
    },
    success: function(){
         
    },
    error: function(){
          
    }
 })