本帖最后由 小鲁哥哥 于 2018-2-2 14:17 编辑
【济南校区】PHP模块讲解之ajax封装 前几节课我们讲解了ajax的基本语法，今天我们来封装一个ajax代码库，减少后期代码开发的重复代码
封装Ajax代码库
1、 使用自调用匿名函数
[JavaScript] 纯文本查看 复制代码 (function(){
});
定义了一个匿名函数，让它自动执行一次。
2、 封装获取dom元素的方法
[JavaScript] 纯文本查看 复制代码 (function(){
function$(id){
return document.getElementById(id);
}
window.$ = $;
});
在匿名函数内部声明了函数$，但由于外部无法直接访问，所以在全局对象window下添加了一个叫”$”的属性，指向了匿名函数内部的$
window.$(id);
由于window是顶级对象，可以省略，所以可以这样写：
$(id);
3、 封装获取Ajax对象的方法
[JavaScript] 纯文本查看 复制代码 $.init = function(){
try{
return new XMLHttpRequest();
}catch(e){}
try{
return new ActiveXObject('Microsoft.XMLHTTP');
}catch(e){}
alert('请更换浏览器');
}
window.$ = $;
所以外部对象也具有init方法
4、 封装发送get请求的方法
url：请求地址
data：请求参数
callback：回调函数
[JavaScript] 纯文本查看 复制代码 $.get = function(url,data,callback){
var xhr = this.init();
url += '?_='+ new Date().getTime();
if(data != null){
url += '&'+data;
}
xhr.open('get',url);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 & xhr.status == 200){
callback(xhr.responseText);
}
}
xhr.send(null);
}
5、 封装发送post请求的方法
url：请求地址
data：请求参数
callback：回调函数
[JavaScript] 纯文本查看 复制代码 $.post = function(url,data,callback){
var xhr = this.init();
xhr.open('post',url);
xhr.setRequestHeader('Content-Type','Application/x-www-form-rulencoded');
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 & xhr.status == 200){
callback(xhr.responseText);
}
}
xhr.send(data);
}
6、 返回xml和json数据
数据的返回有三种：
1） text
2） xml
3） json
为get和post方法添加参数type，type的取值有三个：
text：字符串
xml：xml对象
json：json对象
[JavaScript] 纯文本查看 复制代码 $.post = function(url,data,callback,type){
var xhr = this.init();
xhr.open('post',url);
xhr.setRequestHeader('Content-Type','Application/x-www-form-rulencoded');
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 & xhr.status == 200){
if(type == null){
type='text';
}
if(type == 'text'){
callback(xhr.responseText);
}
if(type == 'xml'){
callback(xhr.responseXML);
}
if(type='json'){
callback(eval("("+xhr.responseText+")"));
}
}
}
xhr.send(data);
}
到此为止，ajax的封装就给大家介绍到这里，不知道大家对我今天讲解的ajax的封装理解的如何，有什么问题可以在下面留言哦~ 如果你想了解更多黑马课程请点击这里，如果你想加入黑马这个大家庭学习先进技术，广交天下好友！ 黑马程序员济南中心联系电话：0531-55696830
| 
收藏
淘帖
踩
