第6章 Ajax框架的封装
如果一个页面中有十几个地方用到Ajax，那么我们需要写十几次open()、十几次send()、十几次获取xhr对象；
代码重复相当多，而凡是有代码重复的地方，就有封装的可能；
创建新文件： ajax.js
6.1 餐前甜点
之前我们为了方便使用，封装过使用指定 id 获取DOM对象及获取xhr对象；
我们对之前的代码进行一次修改，使其更加优雅；
定义一个自调用匿名函数
(function(){
//code……
})();
为什么 定义一个自调用匿名函数？
在实际项目开发中，如果一个项目同时引入了多个javascript框架，可能会产生命名的冲突问题，
如果使用自调用匿名函数来封装javascript框架，所有变量处于封闭状态，就可以避免这个问题。
封装一个$函数，用于获取指定id的dom对象
(function(){
//封装$函数，获取指定 id 的DOM对象并返回给调用者
var $ = function(id){
return document.getElementById(id);
}
})();
我们在前台代码中引入并使用ajax.js
<body>
<div id="d">div</div>
</body>
<script src="ajax.js"></script>
<script>
alert($('d'));
</script>
报错原因： 函数 $ 为局部变量；
让 $ 局部变量全局化
(function(){
//封装$函数，获取指定 id 的DOM对象并返回给调用者
var $ = function(id){
return document.getElementById(id);
}
//将局部变量 $ 复制给顶层window对象，使其成为全局变量
window.$ = $;
})();
6.2 封装get方法
ajax代码我们都会写，问题是：
如何把代码放进匿名函数中并且外部可以调用？
(function(){
//封装$函数，获取指定 id 的DOM对象并返回给调用者
var $ = function(id){
return document.getElementById(id);
}
//将局部变量 $ 复制给顶层window对象，使其成为全局变量
window.$ = $;
//声明gets方法
var gets = function(url){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
alert(xhr.responseText);
}
}
xhr.open('get',url);
xhr.send();
}
//将局部变量 gets 复制给顶层window对象，使其成为全局变量
window.ajax_get = gets;
})();
这样写并没有语法错误，也可以正常调用，但是，随着功能的不断增加，
我们的window对象也会被赋予各种各样的值，最终还是会导致混乱；
在JavaScript中一切都是对象
$ 也可以被当作对象，我们就可以将ajax函数赋值给 $ ；
(function(){
//封装$函数，获取指定 id 的DOM对象并返回给调用者
var $ = function(id){
return document.getElementById(id);
}
//声明ajax函数，并复制给$;
$.get = function(url){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
alert(xhr.responseText);
}
}
xhr.open('get',url);
xhr.send();
}
window.$ = $;
})();
前台调用
<script>
$.get('/test');
</script>
6.3 解决获取Ajax对象的兼容性
修改上节代码：
//获取Ajax对象
$.init = function(){
try{return new XMLHttpRequest()}catch(e){};
try{return new ActiveXObject('Microsoft.XMLHTTP')}catch(e){};
}
//声明ajax函数，并复制给$;
$.get = function(url){
var xhr = $.init(); //调用init,获取ajax对象
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
alert(xhr.responseText);
}
}
xhr.open('get',url);
xhr.send();
}
6.4 获取Ajax的返回值
前台调用：
<script>
var cb = function(msg){
$('d').innerHTML = msg;
}
$.get('/test',cb);
</script>
修改 ajax.js
$.get = function(url,callback){
var xhr = $.init(); //调用init,获取ajax对象
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
callback(xhr.responseText);
}
}
xhr.open('get',url);
xhr.send();
}
前台调用修改：
<script>
// var cb = function(msg){
// $('d').innerHTML = msg;
// }
$.get('09-1.php',function(msg){
$('d').innerHTML = msg;
});
</script>
6.5 配合后台获取不同的返回值类型
修改 ajax.js
//声明ajax函数，并复制给$;
$.get = function(url,callback,type=null){
var xhr = $.init(); //调用init,获取ajax对象
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(type==null){
callback(xhr.responseText);
}
if(type=='json'){
var t = JSON.parse(xhr.responseText);
callback(t);
}
}
}
xhr.open('get',url);
xhr.send();
}
前台调用，代码修改：
<script>
$.get('/test',function(msg){
console.log(msg);
},'json');
</script>
6.6 作业
封装 POST 方法到 ajax.js
