利用原生js写ajax实例

// 使用原生js 封装ajax

// 兼容xhr对象

functioncreateXHR(){

  if(typeofXMLHttpRequest !="undefined"){// 非IE6浏览器

    returnnewXMLHttpRequest();

  }elseif(typeofActiveXObject !="undefined"){ // IE6浏览器

    varversion = [

          "MSXML2.XMLHttp.6.0",

          "MSXML2.XMLHttp.3.0",

          "MSXML2.XMLHttp",

    ];

    for(vari = 0; i < version.length; i++){

      try{

        returnnewActiveXObject(version[i]);

      }catch(e){

        //跳过

      }

    }

  }else{

    thrownewError("您的系统或浏览器不支持XHR对象！");

  }

}

// 转义字符

functionparams(data){

  vararr = [];

  for(variindata){

    arr.push(encodeURIComponent(i) +"="+ encodeURIComponent(data[i]));

  }

  returnarr.join("&");

}

// 封装ajax

functionga_ajax(obj){

  varxhr = createXHR();

  obj.url = obj.url +"?rand="+ Math.random();// 清除缓存

  obj.data = params(obj.data);  // 转义字符串

  if(obj.method ==="get"){  // 判断使用的是否是get方式发送

    obj.url += obj.url.indexOf("?") =="-1"?"?"+ obj.data :"&"+ obj.data;

  }

  // 异步

  if(obj.async ===true){

    // 异步的时候需要触发onreadystatechange事件

    xhr.onreadystatechange =function(){

      // 执行完成

      if(xhr.readyState == 4){

        callBack();

      }

    }

  }

  xhr.open(obj.method,obj.url,obj.async);// false是同步 true是异步 // "demo.php?rand="+Math.random()+"&name=ga&ga",

  if(obj.method ==="post"){

    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

    xhr.send(obj.data);

  }else{

    xhr.send(null);

  }

  // xhr.abort(); // 取消异步请求

  // 同步

  if(obj.async ===false){

    callBack();

  }

  // 返回数据

  functioncallBack(){

    // 判断是否返回正确

    if(xhr.status == 200){

      obj.success(xhr.responseText);

    }else{

      obj.Error("获取数据失败，错误代号为："+xhr.status+"错误信息为："+xhr.statusText);

    }

  }

}

varhtml = document.getElementsByTagName("html")[0];

html.onclick =function(){

  ga_ajax({

    "method":"post",

    "url":"demo.php",

    "data": {

      "name":"gao",

      "age": 100,

      "num":"12346&598"

    },

    "success":function(data){

      alert(data);

    },

    "Error":function(text){

      alert(text);

    },

    "async":false

  });

}