ajax封装js

函数封装的是代码,采用面向对象的形式封装

(function () {

暴露出ajax接口

ajax = window.ajax = {}

增加1个方法: get方法

参数
obj 是1个对象,代表参数的集合,里面有很多参数,如下所示:
url 请求的地址与参数
data 发送的数据
async 是否是同步, true / false
fail 失败的处理回调函数
success 成功的处理回调函数

ajax.get = function(obj) {
        if (obj.async == undefined) {
        obj.async = true;
    }
    if (obj.data == undefined) {
        obj.data = "";
    }
    var xhr = new XMLHttpRequest();
    var url = obj.url;
    url += "?"
    url += obj.data;
    xhr.open("GET", url, obj.async);
    xhr.send()
    if (obj.async == true) {
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    var str = xhr.responseText;
                    obj.success && obj.success(str);
                } else {
                    obj.fail && obj.fail();
                }
            }   
        }
    } else {
        // 同步方式
        if (xhr.status == 200) {
            var str = xhr.responseText;
            obj.success && obj.success(str);
        } else {
            obj.fail && obj.fail();
        }
    }
    
}

增加1个方法: post方法

参数:
obj 是1个对象,代表参数的集合,里面有很多参数,如下所示:
url 请求的地址与参数
data 发送的数据
async 是否是同步, true / false
fail 失败的处理回调函数
success 成功的处理回调函数

ajax.post = function(obj) {
    if (obj.async == undefined) {
        obj.async = true;
    }
    if (obj.data == undefined) {
        obj.data = "";
    }
    var xhr = new XMLHttpRequest();
    var url = obj.url;
    xhr.open("GET", url, obj.async);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send(obj.data)
    if (obj.async == true) {
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    var str = xhr.responseText;
                    obj.success && obj.success(str);
                } else {
                    obj.fail && obj.fail();
                }
            }
        }
    } else {
        // 同步方式
        if (xhr.status == 200) {
            var str = xhr.responseText;
            obj.success && obj.success(str);
        } else {
            obj.fail && obj.fail();
        }
    }
}
})();
gamersky_02origin_03_20179917265C7.jpg
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 点击查看原文 Web SDK 开发手册 SDK 概述 网易云信 SDK 为 Web 应用提供一个完善的 IM 系统...
    layjoy阅读 14,670评论 0 15
  • *面试心声:其实这些题本人都没怎么背,但是在上海 两周半 面了大约10家 收到差不多3个offer,总结起来就是把...
    Dove_iOS阅读 27,707评论 30 472
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 8,156评论 2 17
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,827评论 19 139
  • iOS网络架构讨论梳理整理中。。。 其实如果没有APIManager这一层是没法使用delegate的,毕竟多个单...
    yhtang阅读 5,507评论 1 23

友情链接更多精彩内容