文档章节

前端修炼JS篇 -- ajax&&jsonp

 秀才也疯狂
发布于 2017/07/20 15:23
字数 247
阅读 6
收藏 0

ajax

//url, data, type, time, success, error
function ajax(options) {
    options = options || {};
    options.data = options.data || {};
    options.type = options.type || 'get';
    options.time = options.time || 0;

    //把data拼起来
    var arr = [];

    for (var name in options.data) {
        arr.push(name + '=' + encodeURIComponent(options.data[name]));
    }
    var sData = arr.join('&');

    //创建
    if (window.XMLHttpRequest) {
        var oAjax = new XMLHttpRequest();
    } else {
        var oAjax = new ActiveXObject('Microsoft.XMLHttp');
    }

    //连接
    //发送

    if (options.type == 'get') {
        oAjax.open('get', options.url + '?' + sData, true);
        oAjax.send();
    } else {
        oAjax.open('post', options.url, true);
        oAjax.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
        oAjax.send(sData);
    }

    //接收
    oAjax.onreadystatechange = function () {
        if (oAjax.readyState == 4) {
            if (
                (oAjax.status >= 200 && oAjax.status < 300) ||
                oAjax.status == 304
            ) {
                options.success && options.success(oAjax.responseText);
            } else {
                options.error && options.error();
            }
        }
    };

    if (options.time) {
        setTimeout(function () {
            oAjax.abort();
        }, options.time);
    }
}


jsonp

//url,data,success,error,cbKey,timeout

function jsonp(options) {

    //整理options
    options = options || {};
    if (!options.url) return;
    options.data = options.data || {};
    options.success = options.success || null;
    options.error = options.error || null;
    options.cbKey = options.cbKey || 'cb';
    options.timeout = options.timeout || 0;


    //data少一个回调		{wd:xxx}
    var cbValue = 'jsonp' + Math.random();//函数名随机

    options.data[options.cbKey] = cbValue.replace('.', '');

    //在外面做个全局的show,将来会被调用
    window[options.data[options.cbKey]] = function (json) {

        clearInterval(timer);

        options.success && options.success(json);
        //删除script标签
        document.getElementsByTagName('head')[0].removeChild(oScript);
        window[options.data[options.cbKey]] = null;
    };

    var arr = [];
    for (var key in options.data) {
        arr.push(key + '=' + encodeURIComponent(options.data[key]));
    }

    options.url = options.url + '?' + arr.join('&')//wd=xunlei&cb=show

    var oScript = document.createElement('script');
    oScript.src = options.url;
    document.getElementsByTagName('head')[0].appendChild(oScript);

    if (options.timeout) {
        var timer = setTimeout(function () {
            options.error && options.error();
            window[options.data[options.cbKey]] = function () {/*dddd*/
            };
        }, options.timeout);
    }
}

© 著作权归作者所有

粉丝 1
博文 34
码字总数 4711
作品 0
私信 提问
前端修炼——Node.js(一)

版权声明:本文已在我的公众号:【前端很忙】,原创首发,欢迎关注~!转载请务必注明出处! https://blog.csdn.net/BsQ/article/details/84839734 最近在学习 Node,看的是朴灵老师编著的《深...

前端很忙
2018/12/05
0
0
分享51本关于JavaScript方面的学习书籍(免费下载)

分享51本关于JavaScript方面的学习书籍(免费下载) 1、JavaScript面向对象15分钟教程 2、原型、作用域、闭包的完整解释 3、Javascript面向对象特性实现(封装、继承、接口) 4、JavaScript面向...

邓剑彬
2012/12/02
1K
12
2018 现代前端开发修炼手册

在我们开始这篇文章之前,先给你一个关于我和这个路线图的想法;在过去的5年里,我一直在做全栈开发,现在在 tajawal 担任首席工程师,在那里我不得不戴上不同的帽子。这不仅是我的爱好,也是...

oschina
2018/08/06
1K
1
四月前端知识集锦(每月不可错过的文章集锦)

目前自己组建的一个团队正在写一份面试图谱,将会在七月中旬开源。内容十分丰富,第一版会开源前端方面知识和程序员必备知识,后期会逐步写入后端方面知识。因为工程所涉及内容太多(目前已经...

夕阳
2018/05/02
0
0
JavaScript 学习资源推荐

最近 reddit 有讨论:References for JavaScript Mastery. 去年 Rey Bango 博客上也有一篇文章:What to Read to Get Up to Speed in JavaScript. 下面是我的整理,希望能对你有所帮助。 登堂...

deeper099
2011/09/29
0
1

没有更多内容

加载失败,请刷新页面

加载更多

Tedis:基于 TiKV 构建的 NoSQL 数据库

作者介绍: 陈东明,饿了么北京技术中心架构组负责人,负责饿了么的产品线架构设计以及饿了么基础架构研发工作。曾任百度架构师,负责百度即时通讯产品的架构设计。具有丰富的大规模系统构 ...

TiDB
17分钟前
0
0
linux命令

ls命令是linux下最常用的命令。ls命令就是list的缩写,缺省下ls用来打印出当前目录的清单。如果ls指定其他目录,那么就会显示指定目录里的文件及文件夹清单。 通过ls 命令不仅可以查看linux文件...

WinkJie
25分钟前
0
0
你需要的物流运输类报表,这里都有

你需要的物流运输类报表,都在这里 葡萄城报表模板库是一款免费的报表制作、学习和参考工具,包含了超过 200 张高质量报表模板,涵盖了 16 大行业和 50 多种报表类型,为 30 余万报表开发者提...

葡萄城技术团队
32分钟前
1
0
像Java SE一样编写Java EE(ddd探索)

今天主要改写昨天的组合模式成Web系统。 容器接口为 public interface TreeProduct { /** * 展示所有产品 * @return */ List<TreeProduct> allProducts();...

算法之名
33分钟前
0
0
Django Model 模型建立

Django Model 模型 Django Model层是Django的数据模型层,每一个Model类就是数据库中的一张表; 我们需要注意下面几点: model一般都是定义在不同的APP的models.py模块文件中,可以是一个,也...

彩色泡泡糖
41分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部