传智播客旗下技术交流社区北京校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 小鲁哥哥 于 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方法,用于创建正确的Ajax对象
所以外部对象也具有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


分享至 : QQ空间
收藏

2 个回复

倒序浏览
回复 使用道具 举报
学习,谢谢
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马
关闭

站长推荐 上一条 /5 下一条