使用原生js写ajax实例(推荐)

实例如下：

// 使用原生js 封装ajax
// 兼容xhr对象
function createXHR(){
 if(typeof XMLHttpRequest != "undefined"){ // 非IE6浏览器
 return new XMLHttpRequest();
 }else if(typeof ActiveXObject != "undefined"){ // IE6浏览器
 var version = [
 "MSXML2.XMLHttp.6.0",
 "MSXML2.XMLHttp.3.0",
 "MSXML2.XMLHttp",
 ];
 for(var i = 0; i < version.length; i++){
 try{
 return new ActiveXObject(version[i]);
 }catch(e){
 //跳过
 }
 }
 }else{
 throw new Error("您的系统或浏览器不支持XHR对象！");
 }
}
// 转义字符
function params(data){
 var arr = [];
 for(var i in data){
 arr.push(encodeURIComponent(i) + "=" + encodeURIComponent(data[i]));
 }
 return arr.join("&");
}
// 封装ajax
function ga_ajax(obj){
 var xhr = 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();
 }
 // 返回数据
 function callBack(){
 // 判断是否返回正确
 if(xhr.status == 200){
 obj.success(xhr.responseText);
 }else{
 obj.Error("获取数据失败，错误代号为："+xhr.status+"错误信息为："+xhr.statusText);
 }
 }
}

var html = 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
 });
}

以上这篇使用原生js写ajax实例(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。