/*重写Jquery中的ajax 封装壳*/
$(function () {
(function ($) {
//首先备份下jquery的ajax方法
var _ajax = $.ajax; //重写jquery的ajax方法
$.ajax = function (opt) {
//备份opt中error和success方法
var fn = {
beforeSend: function (XHR) { },
error: function (XMLHttpRequest, textStatus, errorThrown) { },
success: function (data, textStatus) { },
complete: function (XHR, TS) { }
} if (opt.beforeSend) {
fn.beforeSend = opt.beforeSend;
}
if (opt.error) {
fn.error = opt.error;
}
if (opt.success) {
fn.success = opt.success;
}
if (opt.complete) {
fn.complete = opt.complete;
} //扩展增强处理
var _opt = $.extend(opt, {
//全局允许跨域
xhrFields: {
withCredentials: true
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
//错误方法增强处理
fn.error(XMLHttpRequest, textStatus, errorThrown);
},
success: function (data, textStatus) {
//成功回调方法增强处理
fn.success(data, textStatus);
},
beforeSend: function (XHR) {
//提交前回调方法
fn.beforeSend(XHR);
},
complete: function (XHR, TS) {
//请求完成后回调函数 (请求成功或失败之后均调用)。
fn.complete(XHR, TS);
}
});
if (opt.xhrFields) {
_opt.xhrFields = opt.xhrFields;
} //调用native ajax 方法
return _ajax(_opt);
};
})(jQuery);
});

jquery之重写(扩展)$.ajax和$.fn.load等方法详解

 
        今天做东西,考虑用户最好的体验,要实现界面上异步请求数据的loading效果,功能代码都是别人写完的,大概几十个地方,用的都是jQuery的load方法。咋整啊,总不能挨个去每个方法里面加效果吧,几十个地方呢。思来想去,只能用重写了,嘛也不说了,开干。
 
        作为一名资深小白,之前从未重写过jQuery的方法,依托着度娘,外加又看了看jquery的源码,终于把问题解决了。所以以此博文,来小总结下学到的知识亦或帮助“同病相怜”的人,部分资源摘自网络,如有纰漏,还望海涵并指出。

一、前提知识

往下翻页之前,有必要了解以下知识:

1. (function($){….})(jQuery)

第一个括号里边的function($){….}实际上就是一个匿名函数,它的形参是$,这很奇怪,其实这里主要是为了不与其它的库冲突。我们在调用函数的时候,通常都是函数名后边加上括号以及实参,但是由于操作符的优先级我们定义的匿名函数也需要用()括起来,所以就有了前面的(function($){....})。

现在这句代码什么意思大家应该很清楚了:第一个括号表示定义了一个匿名函数,然后(jQuery)表示为该函数传递的参数,整个结合起来意思就是,定义了一个匿名函数,然后又调用该函数,并传递实参jQuery,相当于——function fun($){…};fun(jQuery);

这种方法多用于存放开发的插件,执行其中的代码时,Dom对象并不一定加载完毕。于此相反的是$(function(){}),这种方法在使用时页面的Dom对象已经加载完毕了。事实上该方法的全写是:$(document).ready(function(){});

2.$.fn.extend和$.extend

jQuery为开发插件提拱了两个方法,分别是:

jQuery.fn.extend(object);//为jQuery的实例对象添加方法

jQuery.extend(object);//为jQuery类本身扩展,添加新的方法或覆盖原有的方法

(1)$.fn.extend

在jQuery中有如下源码:

  1. jQuery.fn = jQuery.prototype = {
  2.    init: function( selector, context ) {//.... 
  3.    //......
  4. };

由此看来jQuery.fn=jQuery.prototype,然而prototype是什么呢?

        在 JavaScript 中,每个函数对象都有一个默认的属性 prototype,称为函数对象的原型成员,这个属性指向一个对象,称为函数的原型对象,当我们每定义了一个函数的时候,JavaScript 就创建了一个对应的原型对象,也就是说,当我们定义一个函数的时候,实际上得到了两个对象,一个函数对象,一个原型对象。原型对象是一个特殊的对象,函数的 prototype 成员指向它的原型对象,可以通过函数对象的 prototype 成员取得这个原型对象的引用。
 
        所以fn表示的就是原型对象,而extend表示扩展,所以$.fn.extend表示的是为原型对象扩展方法,使用此方式扩展的方法只能用对象去调用,example:
 
  1. $.fn.extend({
  2. test:function(){
  3. alert("test");
  4. }
  5. });
  6. $("#id").test();

(2)$.extend

此方式则表示为jQuery类添加类方法(虽然jQuery没有类的概念,但用类来理解似乎简单了不少),或者直接理解为添加静态方法,然后就可以直接用$在其他地方来调用此扩展方法了,example:

  1. $.extend({
  2. test:function(param){
  3. alert(param);
  4. }
  5. });
  6. $.test(1);//则直接弹出1

3. JavaScript的闭包

闭包是js的难点也是js的特色,很多高级应用都要依靠闭包来实现,网络资源很多,在这里不在赘述,最好也去了解下。

4.JavaScript的apply方法以及call方法

这两个概念也是有必要知道的,详见我转载的文章:点击这里

二、重写方法

1.重写$.ajax方法

  1. (function($){
  2. //首先备份下jquery的ajax方法
  3. var_ajax=$.ajax;
  4. //重写jquery的ajax方法
  5. $.ajax=function(opt){
  6. //备份opt中error和success方法
  7. var fn = {
  8. error:function(XMLHttpRequest, textStatus, errorThrown){},
  9. success:function(data, textStatus){}
  10. }
  11. if(opt.error){
  12. fn.error=opt.error;
  13. }
  14. if(opt.success){
  15. fn.success=opt.success;
  16. }
  17. //扩展增强处理
  18. var_opt = $.extend(opt,{
  19. error:function(XMLHttpRequest, textStatus, errorThrown){
  20. //错误方法增强处理
  21. fn.error(XMLHttpRequest, textStatus, errorThrown);
  22. },
  23. success:function(data, textStatus){
  24. //成功回调方法增强处理
  25. fn.success(data, textStatus);
  26. },
  27. beforeSend:function(XHR){
  28. //提交前回调方法
  29. $('body').append("<div id='ajaxInfo' style=''>正在加载,请稍后...</div>");
  30. },
  31. complete:function(XHR, TS){
  32. //请求完成后回调函数 (请求成功或失败之后均调用)。
  33. $("#ajaxInfo").remove();;
  34. }
  35. });
  36. return _ajax(_opt);
  37. };
  38. })(jQuery);

2.重写$.load方法

  1. //同样先备份下jquery的load方法
  2. var _load=$.fn.load;
  3. $.fn.extend({
  4. load:function(url,param,calbck){
  5. //其他操作和处理
  6. //..
  7. //此处用apply方法调用原来的load方法,因为load方法属于对象,所以不可直接对象._load(...)
  8. return _load.apply(this,[url,param,calbck]);
  9. }
  10. });

重写$.ajax方法的更多相关文章

  1. $.ajax()方法详解

    jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(p ...

  2. 重写jquery的ajax方法

    //首先备份下jquery的ajax方法 var _ajax=$.ajax; //重写jquery的ajax方法 $.ajax=function(opt){ //备份opt中error和success ...

  3. ajax方法总结

    ajax方法总结 1.原生ajax get请求和post请求区别:黄色小三角 以get请求为例,输出结果如下: 2.jquery中的ajax 列了常用的6个方法: 3.状态说明 readystate: ...

  4. 重写ajax方法实现异步请求session过期时跳转登录页面

    jQuery(function($){ // 备份jquery的ajax方法 var _ajax=$.ajax; // 重写ajax方法, $.ajax=function(opt){ var _suc ...

  5. jquery中$.ajax方法提交表单

    function postdata(){                        //提交数据函数 $.ajax({                                //调用jqu ...

  6. Ajax方法封装

    打算自己封装一个ajax方法,再不用jq库的情况下,直接引用: ajax作用:数据交互,在不刷新页面的情况下,发送请求,获取数据: 首页第一步常见一个ajax对象:XMLHttpRequest,之后会 ...

  7. 各种AJAX方法的使用比较

    转:http://www.cnblogs.com/fish-li/archive/2013/01/13/2858599.html#_label6 AJAX技术经过这么多年的发展,出现了一些框架或类库用 ...

  8. MVC中使用Ajax提交数据 Jquery Ajax方法传值到action

    Jquery Ajax方法传值到action <script type="text/javascript"> $(document).ready(function(){ ...

  9. 再谈Jquery Ajax方法传递到action 【转载】

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://cnn237111.blog.51cto.com/2359144/984466 之 ...

  10. 【转】Jquery ajax方法解析返回的json数据

    转自http://blog.csdn.net/haiqiao_2010/article/details/12653555 最近在用jQuery的ajax方法传递接收json数据时发现一个问题,那就是返 ...

随机推荐

  1. poj 3903 poj 2533 (LIS模板题)

    pi1 < pi2 < ... < pik, with i1 < i2 < ... < ik. Sample Input 6 5 2 1 4 5 3 3 1 1 1 ...

  2. window 下忘记了mysql 密码的解决方法

    1.以管理员身份打开cmd,关闭MySQL. net stop mysql 2.跳过权限检查启动,进入安装目录bin下. mysqld --skip-grant-tables或者mysqld-nt - ...

  3. CSS3实现整屏切换效果

    页面结构 实现思路与大众方法类似,如图 每个section就是一页内容,它的大小充满了屏幕(红色区域),一个Container由多个section构成,我们通过改变container的位置,来达到页面 ...

  4. 【Java】 剑指offer(16) 打印1到最大的n位数

    本文参考自<剑指offer>一书,代码采用Java语言. 更多:<剑指Offer>Java实现合集   题目 输入数字n,按顺序打印出从1最大的n位十进制数.比如输入3,则打印 ...

  5. RabbitMq中的消息应答与持久化

    一:消息应答 1.介绍 涉及到的程序: boolean autoAck=false; channel.basicConsume(QUENE_NAME,autoAck,consumer); 2.auto ...

  6. android和java以太坊开发区块链应用使用web3j类库

    如何使用web3j为Java应用或Android App增加以太坊区块链支持,教程内容即涉及以太坊中的核心概念,例如账户管理包括账户的创建.钱包创建.交易转账,交易与状态.智能合约开发与交互.过滤器和 ...

  7. DNS信息收集命令nslookup

    DNS信息收集--NSLOOKUP 前面文章我介绍了dig命令,NSLOOKUP命令用法差不多 简单查询 语法:nslookup domain [dns-server] nslookup www.si ...

  8. ES6 中的 Map和Set

    集合的概念以及和数组的区别 其实数组也是集合, 只不过数组的索引是数值类型.当想用非数值类型作为索引时, 数组就无法满足需要了. 而 Map 集合可以保存多个键-值对(key-value), Set ...

  9. APIO2018 铜滚记

    「一旦闭上双眼,就昏昏欲睡」「仿佛与这个世界的联系,被瞬间切断」「可是,负罪感与背德感又会在黑暗中将我吞噬」「即使这样,却也无法与身体的疲惫抗衡」 「如果,这些东西也无法让意识的存在稳定下来的话」「那 ...

  10. BZOJ.2177.曼哈顿最小生成树(Kruskal)

    \(Solution\) 参考 对于每个点,向唯一有可能与它形成MST的8个点连边,由于是双向单边,所以每个点最多连出4条边(证明见blog) 怎么找到一个区域内最近的点? 只考虑y轴右侧45°的区域 ...