妙味课堂ajax教程,妙味课堂JS高级专题篇视频资料分享

《妙味课堂JS高级专题篇视频教程》将向大家详细介绍javascript，javascript是一种直译式脚本语言，也是一种广泛用于客户端Web开发的脚本语言。目前，被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies,以及更多的应用。

本视频难点在于封装自己的JS库：

1.需求背景

很多时候，我们使用jquery.ajax的方式向后台发送请求，型如$.ajax({

type: "post",

url: "/User/Edit",

data: { data: JSON.stringify(postdata) },

success: function (data, status) {

if (status == "success") {

toastr.success('提交数据成功');

$("#tb_aaa").bootstrapTable('refresh');

}

},

error: function (e) {

},

complete: function () {

}

});

这种代码太常见了，这个时候我们有这样一个需求：在自己调用ajax请求的时候，我们不想每次都写error:function(e){}这种代码，但是我们又想让它每次都将ajax的错误信息输出到浏览器让用户能够看到。怎么办呢？

2、实现原理

要想实现以上效果其实并不难，我们可以将$.ajax({})封装一层，在封装的公共方法里面定义error对应的事件即可。确实，这样能达到我们的要求，但是并不完美，原因很简单：1)在jquery的基础上面再封装一层，效率不够高；2)需要改变调用者的习惯，每次调用ajax的时候需要按照我们定义的方法的规则来写，而不能直接用原生的$.ajax({})这种写法，这是我们不太想看到。

既然如此，那我们如何做到既不封装控件，又能达到以上要求呢？答案就是通过我们的$.extend去扩展原生的jquery.ajax。

其实实现起来也并不难，通过以下一段代码就能达到我们的要求。(function ($) {

//1.得到$.ajax的对象

var _ajax = $.ajax;

$.ajax = function (options) {

//2.每次调用发送ajax请求的时候定义默认的error处理方法

var fn = {

error: function (XMLHttpRequest, textStatus, errorThrown) {

toastr.error(XMLHttpRequest.responseText, '错误消息', { closeButton: true, timeOut: 0, positionClass: 'toast-top-full-width' });

},

success: function (data, textStatus) { },

beforeSend: function (XHR) { },

complete: function (XHR, TS) { }

}

//3.如果在调用的时候写了error的处理方法，就不用默认的

if (options.error) {

fn.error = options.error;

}

if (options.success) {

fn.success = options.success;

}

if (options.beforeSend) {

fn.beforeSend = options.beforeSend;

}

if (options.complete) {

fn.complete = options.complete;

}

//4.扩展原生的$.ajax方法，返回最新的参数

var _options = $.extend(options, {

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);

}

});

//5.将最新的参数传回ajax对象

_ajax(_options);

};

})(jQuery);

如果没接触过jquery里面$.extend这个方法的童鞋可能看不懂以上是什么意思。好，我们首先来看看jquery API对$.extend()方法是作何解释的。