精华内容
下载资源
问答
  • jsonp.js:轻量级的JSONP库 jsonp.js是一个轻量级的JSONP库,用于无法使用CORS且jQuery过于繁重的情况。 jsonp.js大约减少1 KB,仅发出JSONP请求,并且应具有某种熟悉的(类似于jQuery的)语法。 在Windows 7 SP 1...
  • ##JSONP ###一个用于 Javascript 的轻量级 JSONP 。 < script > var options = { data : { query : "" , v : 1 } , error : function ( ) { } , success : function ( data ) { console . log ( ...
  • cy-jsonp 实现了一个简易的 jsonp
  • 2. jsonp库是如何实现的? jsonp是一个star数1.9k的仓库,实现了一个简单的jsonp方法 jsonp仓库传送门 2.1 传入参数 url 传入的url就是需要请求的链接地址 opts param:传入的是缀在链接后的参数,默认为callback ...

    1. 什么是jsonp?

    下方是维基百科对JSON的解释

    从这个解释中,我们可以知道,完成jsonp需要的步骤主要有以下两点:

    1. 向页面中插入一个带有请求链接的<script>标签
    2. 通过回调函数,获取需要的JSON数据

    2. jsonp库是如何实现的?

    jsonp是一个star数1.9k的仓库,实现了一个简单的jsonp方法

    jsonp仓库传送门

    2.1 传入参数

    • url
      传入的url就是需要请求的链接地址
    • opts
      param:传入的是缀在链接后的参数,默认为callback

    timeout:请求超时时间,默认为60000

    prefix:全局回调函数名称的前缀,默认为__jp

    name:全局回调函数的名字,默认由前缀和自增数字生成

    • fn
      回调函数的第一个参数是err,如果失败返回错误:Timeout,如果成功返回null。
      第二个参数是data,也就是最终请求的内容

    调用该函数时,还会返回一个取消函数,如果希望取消请求,直接调用返回方法即可。

    2.2 分析代码

    2.2.1 定义变量

    count为计数器,noop为空函数(后面在重置全局函数时会用到)。



    将2.1中定义的默认值,在代码里初始化,并且定义了变量。

    2.2.2 设置超时定时器 & 清理页面中的代码

    将页面插入的<script>标签代码删除,并将全局的回调方法置为空方法。如果有定时器则删除定时器


    调用超时后,清除清除页面中的代码。如果有回调函数,将会抛出Timeout报错。


    定义了返回的取消函数,本质上是调用cleanup函数清理全局页面中的代码。

    2.2.3 将回调函数挂载到全局


    将回调函数挂载到全局,返回数据后调用cleanup函数清理全局页面中的代码,并将数据返回给传入的fn函数

    2.2.4 处理请求地址

    处理请求地址,将encodeURIComponent后的参数拼接至url

    2.2.5 挂载<script>并返回取消函数

    创建<script>标签,并挂载到页面上。最后返回取消函数。

    使用target.parentNode.insertBefore的原因是由于target.appendChild兼容性不佳。按照提交者的说法是:

    make IE<=8 happy😁

    3.如何实现一个自己的jsonp?

    通过分析上面的代码,我们不难发现,主要是完成以下几个功能

    1. 实现请求超时报错
    2. 实现将回调函数挂载至window
    3. 实现处理url请求
    4. 实现创建script标签,并插入页面中

    第一、四部分的代码,我们可以继续使用。

    第二部分的代码,实际上还是无法保证回调函数的名称不与全局的方法冲突,因此需要生成一个唯一的函数名称,如果检查名称有冲突则知道生成一个唯一的名称为止。

    第三部分的代码,在处理的请求中,传入的参数用的是string,但是平时开发常用的多为对象,因此在这里需要支持传入对象后并处理成字符串。

    3.1 生成唯一函数名代码

    function getRandomKey(length = 6) {
        let randomKey = '';
    
        for (let i = 0; i < length; i++) {
            // 生成0~9和a-z的随机字符串
            randomKey += ((Math.random() * 36) | 0).toString(36);
        }
    
        return randomKey;
    }
    
    function checkRandomKey(key, obj) {
        // 检查当前生成的key值是否已经存在于obj中
        return obj[key] === undefined
            ? key
            : checkRandomKey(getRandomKey(), obj);
    }
    
    checkRandomKey(getRandomKey(), window);
    

    将会在window上检测生成的随机字符串是否已被占用,如果被占用,则再生成一个。

    3.2 拼接对象类型的参数

    for (var key in params) {
        param += `${key}=${encodeURIComponent(params[key])}&`;
    }
    

    将代码拼接成字符串,并且使用encodeURIComponent进行转义。

    3.3 优化传入参数

    url参数并入opts中,并将opts改名为config(比较喜欢axios的设计,所以叫了一样的名字😁),fn修改为callback

    4. 最终代码

    function jsonp(config, callback) {
        let {url, params, name, prefix = '_jsonp_callback_', timeout = 60000} = config;
    
        const target = document.getElementsByTagName('script')[0] || document.head;
        let script;
        let timer;
        let callbackFunctionName;
        let paramsString = '';
    
        // 定义空函数
        function noop() {
        }
    
        // 生成随机key值
        function getRandomKey(length = 6) {
            let randomKey = '';
    
            for (let i = 0; i < length; i++) {
                // 生成0~9和a-z的随机字符串
                randomKey += ((Math.random() * 36) | 0).toString(36);
            }
    
            return randomKey;
        }
    
        function checkRandomKey(key, obj) {
            // 检查当前生成的key值是否已经存在于obj中
            return obj[key] === undefined
                ? key
                : checkRandomKey(getRandomKey(), obj);
        }
    
        // 确定挂在window上的回调函数名称
        callbackFunctionName = name || checkRandomKey(getRandomKey(), window);
    
        // 清理不需要的代码
        function cleanup() {
            if (script.parentNode) script.parentNode.removeChild(script);
            window[callbackFunctionName] = noop;
            if (timer) clearTimeout(timer);
        }
    
        // 取消调用
        function cancel() {
            if (window[callbackFunctionName]) cleanup();
        }
    
        // 设置定时器
        if (timeout) {
            timer = setTimeout(function () {
                cleanup();
                if (callback) callback(new Error('Timeout'));
            }, timeout);
        }
    
        // 将传入的params转化为字符串
        if (params) {
            for (var key in params) {
                paramsString += `${key}=${encodeURIComponent(params[key])}&`;
            }
        }
    
        // 拼接默认的callback内容
        paramsString += `callback=${prefix}${callbackFunctionName}`;
    
        // 将回调函数设置到window上
        window[callbackFunctionName] = function (data) {
            cleanup();
            if (callback) callback(null, data);
        };
    
        // 将请求参数拼接至url上
        url += (~url.indexOf('?') ? '&' : '?') + paramsString;
        url = url.replace('?&', '?');
    
        // 创建一个script标签并插入到页面中
        script = document.createElement('script');
        script.src = url;
        target.parentNode.insertBefore(script, target);
    
        // 返回取消函数
        return cancel;
    }
    

    至此我们完成了我们自己的jsonp轮子。如果发现有问题,欢迎评论区留言。

    5. 参考资料

    展开全文
  • 现在流行的axios库不支持jsonp,因此这里推荐一个jsonp库,简单易用。以下是介绍: Easy JSONP A minimal and lightweight JSONP implementation which is used to be a kind of cross domain solutions. Features ...

    现在流行的axios库不支持jsonp,因此这里推荐一个jsonp库,简单易用。以下是介绍:

    Easy JSONP

    A minimal and lightweight JSONP implementation which is used to be a kind of cross domain solutions.

    Features

    • Implement JSONP request from the browser
    • Combine URL query parameters by default behavior
    • Support the [Promise] API
    • Limit JSONP request period
    • Handle network error response

    Install

    # using npm
    npm i easy-jsonp
    # using yarn
    yarn add easy-jsonp
    # using script target
    <script src="jsonp.js"></script>

    Usage

    JSONP only support GET methods, same as easy-JSONP.

    • The code below show you how to use package as a dependency
    // as a request dependency named jsonp
    import jsonp from 'easy-jsonp'
    const jsonp = require('easy-jsonp').default
    jsonp({
      url: 'http://localhost',
      // global function named `callback` will be invoked when JSONP response
      callback: 'callback', // any different name from request module
      timeout: 3000,
      params: {
        // eg. ?key0=0&key1=1...
        key0: 0,
        key1: 1
      }
    })
      .then(res => console.log(res))
      .catch(err => console.error(err))

    ⚠️ Notice: Parameter callback value MUST NOT be same as request module name (eg. dependency named jsonp above code), otherwise request module only works once and function named value of parameter callback will be reset to null (internal implementation) which means the same name request module will be also reset unexpectedly.

    For more customization capability, This package wouldn't convert callback to a new name to prevent unexpected reset.
    jsonp({
      // custom configuration
    })

    ⚠️ Notice: For same reason, parameter callback value MUST NOT be jsonp.

    Parameters

    options parametertyperequireddescription
    urlStringtrueJSONP request address
    timeoutNumberfalse, default : 6000 millisecondshow long after timeout error is emitted. 0 to disable
    callbackStringfalse, default : 'jsonpCallback'+Date.now() global callback function name which is used to handle JSONP response.
    paramsObjectfalse, default: {} other parameters in query string parameters

    Notice

    • Uncaught SyntaxError: Unexpected token :error

    It mostly doesn't support JSONP request when you are calling a JSON api. The difference between JSON api and JSONP is that JSON api response with an object like { num: 1 } (It will throw a error when client executed this response as a function. ). On the other hand, JSONP will respond with a function wrapped object like callback({ num: 1 }) and we will get what we need when client executed this response as a function.

    展开全文
  • title: 封装用于vue项目使用的jsonp库 date: 2017年10月4日 17:21:23 tags: js categories: 教程 author: "JiaWei" 一个方便使用的jsonp库 API: jsonp(url, data, option) /* 形参 : url(String) , 拼接...

    title: 封装用于vue项目使用的jsonp库 date: 2017年10月4日 17:21:23 tags: js categories: 教程 author: "JiaWei"

    一个方便使用的jsonp库

    API: jsonp(url, data, option)
    /*
    形参 : url(String) , 拼接数据(Object) , 选项(Object) { param (String) 指定回调函数名称(defaults is callback), timeout (Number) 响应时长(defaults is 60000) } */


      • cnpm install jsonp --save // 项目中 npm 安装 jsonp
      • new jsonp.js // 建立自己的jsonp.js文件

      • 使用

    展开全文
  • flex-jsonp 支持JSONP的承诺。 演示 安装 npm install flex-jsonp --save 连锁使用 flexJsonp ( { url : 'http://suggestion.baidu.com/su' , params : { wd : keywords , p : 3 , t : new Date ( ) . getTime...
  • $.getJSONP( " http://www.360buy.com/lishiset.aspx?id=317923 " ,jdRecent.setData); script > head > < body > body > html > 转载于:...
    
      
    <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >
    < html >
    < head >
    < meta http-equiv ="Content-Type" content ="text/html; charset=iso-8859-1" >
    < title > Untitled Document </ title >
    < script type ="text/javascript" src ="jquery-1.5.min.js" ></ script >
    < script type ="text/javascript" src ="effects-20090707.js" ></ script >
    < script type ="text/javascript" >
    var jdRecent =
    {
    setData:
    function (result)
    {
    alert(result.name);
    }
    };
    $.getJSONP(
    " http://www.360buy.com/lishiset.aspx?id=317923 " ,jdRecent.setData);
    </ script >
    </ head >
    < body >
    </ body >
    </ html >

    转载于:https://www.cnblogs.com/lovening/archive/2011/02/17/1956629.html

    展开全文
  • Vixen JS JSONP 关于 Vixen JS JSONP 是一个开源(MIT 许可),用于需要 JavaScript 应用程序中的轮询和信号类型功能的应用程序。 该简单、简短且简洁,旨在保持这种状态。 用途 轮询 // The URL we want ...
  • 一个用于处理JSONP请求的微型。 快速开始 作为Vue插件: import { VueJsonp } from 'vue-jsonp' // Vue Plugin. Vue . use ( VueJsonp ) // Now you can use this.$jsonp in Vue components. const vm = new Vue...
  • JSONPCallbackValidator:验证JSONP回调的
  • jsonp

    2018-04-28 15:22:35
    jsonp跨域原理 在项目中遇到一个jsonp跨域的问题,于是仔细的研究了一番jsonp跨域的原理。搞明白了一些以前不是很懂的地方,比如: 1)jsonp跨域只能是get请求,而不能是post请求; 2)jsonp跨域的原理到底是...
  • vue封装jsonp

    2019-02-02 14:08:12
    使用jsonp库封装jsonp请求 // jsonp只能发送get请求 import myJSONP from 'jsonp' // 封装的jsonp方法 export default jsonp (url, data, options) { url += (url.indexOf('?') &amp;lt; 0 ? '?' : '&...
  • 原生ajax,实现jsonp跨域,短小精悍。
  • Secure-JSONP-源码

    2021-05-10 15:07:13
    安全的JSONP库 概述 该库允许您以安全的方式进行跨域jsonp调用。 这是通过在其他域的iframe中进行实际的jsonp调用来实现的(因此,您将需要控制两个域来设置此库)。 jsonp通常不安全的原因是,您实际上包含了来自...
  • 一个轻巧迷你的HTTP请求,专为简单web应用提供了Ajax, jsonp and ready等特性功能!一个轻巧迷你的HTTP请求,专为简单web应用提供了Ajax, jsonp and ready等特性功能!tips: 无论是jQuery到zepto,抑或是vue-...
  • JSONP

    2018-06-03 14:03:47
    了解数据库 1. 文件系统是一种数据库; 2. MySQL是一种数据库。 只要能够长久存数据的就是数据库 ...因为JSONP是通过动态创建script来实现的, 动态创建script的时候只能用GET没有办法用POST 复制代码
  • (如果看过 JSONP 的源码就知道,常见的实现代码其实就是 document.createElement(‘script’) 生成一个 script 标签,然后插 body 里而已。在这里根本没有设置请求格式的余地)。所以JSONP的实现
  • 一篇文章吃透Jsonp

    2018-01-21 11:47:33
    最近因为工作的缘故,几乎把市面上所有Jsonp库都下载了一遍,却发现没有百分百让我满意的,最后自己手动改写了Jsonp,才符合了要求,也因此有了这篇文章。本文示例详实,代码简单,想弄明白Jsonp, 这一篇文章就够了...
  • (如果看过 JSONP 的源码就知道,常见的实现代码其实就是 document.createElement(‘script’) 生成一个 script 标签,然后插body里而已。在这里根本没有设置请求格式的余地)。 所以JSONP的实现原理就是创建一个...
  • HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #q{ ... height: 30p...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,062
精华内容 5,624
关键字:

jsonp库