AJAX封装
笔记:
//创建XHR对象
function createXHR() {
if(typeof XMLHttpRequest != 'undefined') {
return new XMLHttpRequest(); // ie7+ 及现代浏览器
}else if(typeof ActiveXObject != 'undefined') {
var versions = ['MSXML2.XMLHttp.6.0','MSXML2.XMLHttp.3.0','MSXML2.XMLHttp']; //ie6及以下版本
for(var i = 0;i < versions.length;i++){
try {
return new ActiveXObject(versions[i]);
}catch(e) {
//跳过
}
}
}else {
throw new Error('您当前的浏览器不支持XHR对象!');
}
}
//ajax封装
function ajax(obj){
var xhr = createXHR();
obj.url += '?rang=' + Math.random();
if(obj.method === 'get') {
obj.url +=obj.url.indexOf('?') == -1 ? '?' +obj.data : '&' + obj.data; //这里要假设如果不使用'?rang=' + Math.random()的随机数字方法来使ie不读取缓存的话,就要这样判断
}
if(obj.async === true){
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
status();
}
}
}
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) {
status();
}
function status() {
if(xhr.status == 200) {
obj.soccuss(xhr.responseText); //数据回调
}else {
throw new Error('数据返回出错!错误代码:' + xhr.status + '错误信息:' + xhr.statusText);
}
}
}
//字符转码
function encod(data){
var arr = [];
for(var i in data) {
arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
}
return arr.join('&');
}
//调用代码
addEvent(document,'click',function(){
ajax({
method : 'post',
url : 'demo3.php',
async : true,
data : encod({
name : 'Lee',
age : 100
}),
soccuss : function(text) {
alert(text);
}
});
})
//兼容添加事件
function addEvent(obj,type,fn) {
if(obj.addEventListener) {
obj.addEventListener(type,fn,false);
}else if(obj.attachEvent){
obj.attachEvent('on'+type,fn);
};
}
分类:
JavaScript
标签:
AJAXAJAX封装
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿站点。未经许可,禁止转载。
暂无评论数据