Ajax常用的封装函数
admin2016-12-16 22:31:43清河洛2054
因为Ajax使用起来比较麻烦,主要就是参数问题,比如到底使用GET还是POST;到底是使用同步还是异步等等,我们需要封装一个Ajax函数,来方便我们调用。function createXHR() { if (typeof XMLHttpRequest != ''undefined'') { return new XMLHttpRequest(); }else if(typeof ActiveXObject != ''undefined'') { var versions = [''MSXML2.XMLHttp.6.0'',''MSXML2.XMLHttp.3.0'',''MSXML2.XMLHttp'']; for (var i = 0; i < versions.length; i ++) { try { return new
因为Ajax使用起来比较麻烦,主要就是参数问题,比如到底使用GET还是POST;到底是使用同步还是异步等等,我们需要封装一个Ajax函数,来方便我们调用。
function createXHR() { if (typeof XMLHttpRequest != 'undefined') { return new XMLHttpRequest(); }else if(typeof ActiveXObject != 'undefined') { var versions = ['MSXML2.XMLHttp.6.0','MSXML2.XMLHttp.3.0','MSXML2.XMLHttp']; for (var i = 0; i < versions.length; i ++) { try { return new ActiveXObject(version[i]); } catch (e) {} } } else { throw new Error('您的浏览器不支持XHR对象!'); } } function ajax(obj) { var xhr = new createXHR(); obj.url = obj.url + '?rand=' + Math.random(); obj.data = params(obj.data); if (obj.method === 'get'){ obj.url = obj.url.indexOf('?') == -1 ? obj.url + '?' + obj.data : obj.url + '&' + obj.data; } if (obj.async === true) { xhr.onreadystatechange = function () { if (xhr.readyState == 4) callback(); } } xhr.open(obj.method, obj.url, obj.async); if (obj.method === 'post') { xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send(obj.data); } else { xhr.send(null); } if (obj.async === false) {callback();} function callback () { if (xhr.status == 200) { obj.success(xhr.responseText); //回调 } else { alert('数据返回失败!状态代码:' + xhr.status + ',状态信息:' + xhr.statusText); } } } addEvent(document, 'click', function () { //IE6需要重写addEvent ajax({ method : 'get', url : 'demo.php', data : {'name' : 'Lee','age' : 100}, success : function (text) {alert(text);}, async : true } ); } ); function params(data) { var arr = []; for (var i in data) { arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i])); } return arr.join('&'); }
PS:封装Ajax并不是一开始就形成以上的形态,需要经过多次变化而成。
感觉很赞?点击支持一下! ()