如果一个页面中有十几个地方用到Ajax,那么我们需要写十几次open()、十几次send()、十几次获取xhr对象; 代码重复相当多,而凡是有代码重复的地方,就有封装的可能;
创建新文件: ajax.js
之前我们为了方便使用,封装过使用指定 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.$ = $;
})();
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>
修改上节代码:
//获取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();
}
前台调用:
<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>
修改 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>
封装 POST 方法到 ajax.js