码迷,mamicode.com
首页 > Web开发 > 详细

ajax封装

时间:2016-09-04 20:42:50      阅读:160      评论:0      收藏:0      [点我收藏+]

标签:

周日在家封装了ajax简单的函数。

1、封装extand方法

  模仿(抄袭)jQuery源码的$.extend方法,可以在使用ajax时候少传一些参数。

  

Function.prototype.method = function(name, func) {
    this.prototype[name] = func;
    return this;
};

var $ = function() {
    
}
.method(‘extend‘, function() {
    var options, name, copy,
        target = {},
        i = 1,
        length = arguments.length;

    for ( ; i < length; i++ ) {
        options = arguments[i];
        for ( name in options ) {
            copy = options[name];
            target[name] = copy;
        };
    }
    return target;
})

2、有了extend方法之后,就是ajax方法了

 

.........
 .method(‘ajax‘, function(opts) {
    var xhr = new XMLHttpRequest(),
    self = this,
    ajaxSettings = {
        url: location.href,
        type: "GET",
        async: true,
        contentType: "application/x-www-form-urlencoded",
        data: null
    },
    ajaxOpts = this.extend({}, ajaxSettings, opts),
    success = ajaxOpts.success;
    xhr.onreadystatechange = function() {
        if(xhr.readyState === 4 && xhr.status === 200) {
            var res = JSON.parse(xhr.responseText);
            if(res.success) {
                data = res.data || {};
                success && success.call(self, data);
            }
        }
    };
    xhr.open(ajaxOpts.type, ajaxOpts.url, !!ajaxOpts.async);
    xhr.setRequestHeader("Content-type", ajaxOpts.contentType);
    xhr.send(JSON.stringify(ajaxOpts.data));
    return this;
})

这样的话,ajax方法就已经封装好了。

 

但是有一些问题,现在angular,jQuery 都支持$ajax().success 或者 $ajax().done的连缀写法,我至今还没想好怎么实现,难道是用ES6的promise函数吗??>

ajax封装

标签:

原文地址:http://www.cnblogs.com/ljlbxy/p/5840101.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!