45.项目 1-博客前端：封装库--引入 Ajax

学习要点：

1.问题所在
2.设置代码

在和服务器交互的时候，传统提交方式会极大的消耗服务器资源，并且客户端用户体验
也不是很好。所以，这才有了 ajax，它可以使用交互更加流畅，更加人性化。

一．问题所在

ajax 在之前的课程中已经封装成单独的文件了，我们拿过来就可以使用。我们可以封装
到 base.js 库中，也可以做成插件，也可以当作一个独立的程序直接使用。

二．设置代码

JS 代码

//封装 ajax
function ajax(obj) {
var xhr = (function () {
if (typeof XMLHttpRequest != 'undefined') {
return new XMLHttpRequest();
} else if (typeof ActiveXObject != 'undefined') {
var version = [
'MSXML2.XMLHttp.6.0',
'MSXML2.XMLHttp.3.0',
'MSXML2.XMLHttp'
];
for (var i = 0; version.length; i ++) {
try {
return new ActiveXObject(version[i]);
} catch (e) {
//跳过
}
}
} else {
throw new Error('您的系统或浏览器不支持 XHR 对象！');
}
})();
obj.url = obj.url + '?rand=' + Math.random();
obj.data = (function (data) {
var arr = [];
for (var i in data) {
arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
}
return arr.join('&');
})(obj.data);
if (obj.method === 'get') obj.url += obj.url.indexOf('?') == -1 ? '?' + obj.data : '&'
+ 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);
}
}
}
//调用 ajax
$(document).click(function () {
ajax({
method : 'post',
url : 'demo.php',
data : {
'name' : 'Lee',
'age' : 100
},
success : function (text) {
alert(text);
},
async : true
});
});
//在谷歌和 IE 浏览器中，弹窗的文本拖动还有一些问题
fixedScroll.left = getScroll().left;
fixedScroll.top = getScroll().top;
addEvent(window, 'scroll', fixedScroll);
removeEvent(window, 'scroll', fixedScroll);
//滚动条定位
function fixedScroll() {
setTimeout(function () {
window.scrollTo(fixedScroll.left, fixedScroll.top);
}, 100);
}

感谢收看本次教程！