第110天：Ajax原生js封装函数

1 // 创建ajax对象2 var xhr = null;3 if(window.XMLHttpRequest){4 ????xhr = new XMLHttpRequest();5 } else {6 ????//为了兼容IE67 ????xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);8 }

// 连接服务器open(方法GET/POST，请求地址， 异步传输)xhr.open(‘GET‘, ?‘data.txt‘, ?true);

// 发送请求xhr.send();

 1 // 处理返回数据 2 /* 3 ** 每当readyState改变时，就会触发onreadystatechange事件 4 ** readyState属性存储有XMLHttpRequest的状态信息 5 ** 0 ：请求未初始化 6 ** 1 ：服务器连接已建立 7 ** 2 ：请求已接受 8 ** 3 : 请求处理中 9 ** 4 ：请求已完成，且相应就绪10 */11 xhr.onreadystatechange = function(){12 ????if(xhr.readyState == 4){13 ????????/*14 ????????** Http状态码15 ????????** 1xx ：信息展示16 ????????** 2xx ：成功17 ????????** 3xx ：重定向18 ????????** 4xx : 客户端错误19 ????????** 5xx ：服务器端错误20 ????????*/21 ????????if(xhr.status == 200){22 ????????????success(xhr.responseText);23 ????????} else {24 ????????????if(failed){25 ????????????????failed(xhr.status);26 ????????????}27 ????????}28 ????}29 }

 1 function Ajax(type, url, data, success, failed){ 2 ????// 创建ajax对象 3 ????var xhr = null; 4 ????if(window.XMLHttpRequest){ 5 ????????xhr = new XMLHttpRequest(); 6 ????} else { 7 ????????xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘) 8 ????} 9 ?10 ????var type = type.toUpperCase();11 ????// 用于清除缓存12 ????var random = Math.random();13 ?14 ????if(typeof data == ‘object‘){15 ????????var str = ‘‘;16 ????????for(var key in data){17 ????????????str += key+‘=‘+data[key]+‘&‘;18 ????????}19 ????????data = str.replace(/&$/, ‘‘);20 ????}21 ?22 ????if(type == ‘GET‘){23 ????????if(data){24 ????????????xhr.open(‘GET‘, url + ‘?‘ + data, true);25 ????????} else {26 ????????????xhr.open(‘GET‘, url + ‘?t=‘ + random, true);27 ????????}28 ????????xhr.send();29 ?30 ????} else if(type == ‘POST‘){31 ????????xhr.open(‘POST‘, url, true);32 ????????// 如果需要像 html 表单那样 POST 数据，请使用 setRequestHeader() 来添加 http 头。33 ????????xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");34 ????????xhr.send(data);35 ????}36 ?37 ????// 处理返回数据38 ????xhr.onreadystatechange = function(){39 ????????if(xhr.readyState == 4){40 ????????????if(xhr.status == 200){41 ????????????????success(xhr.responseText);42 ????????????} else {43 ????????????????if(failed){44 ????????????????????failed(xhr.status);45 ????????????????}46 ????????????}47 ????????}48 ????}49 }50 ?51 // 测试调用52 var sendData = {name:‘asher‘,sex:‘male‘};53 Ajax(‘get‘, ‘data/data.html‘, sendData, function(data){54 ????console.log(data);55 }, function(error){56 ????console.log(error);57 });