什么是jsonp

jsonp 是前端一种用来解决网站跨域的技术,利用script标签不受同源策略影响的特性引入一个非同源的js文件,并定义一个回调函数来接收数据,这样就可以实现跨域获取数据了,例如:
现在有一个链接返回的数据是这样的:

cb({
    "name": "swk",
    "age": 18
})

这是一个标准的jsonp格式,它通过调用函数cb来传递数据,那么我们只需要定义一个函数cb来接收数据就可以了,例如:

function cb(data) {
    console.log(data); //{ name: "swk", age: 18 }
}

那么我们只需要在页面中引入这个js文件就可以了,例如:

<script src="xxx.xxx?callback=cb"></script>

这样就可以实现跨域获取数据了,但是这种方式有一个缺点,就是只能通过get方式来传递数据,例如:

<script src="xxx.xxx?callback=cb&name=swk&age=18"></script>

这样就可以传递数据了,但是如果数据量比较大的话,那么就会有问题,因为get方式传递的数据是有长度限制的,所以这种方式只适合传递少量的数据,如果数据量比较大的话,那么就需要使用ajax的jsonp的方式来传递数据了,例如:

$.ajax({
    url: 'xxx.xxx',
    dataType: 'jsonp',
    jsonp: 'callback',
    data: {
        name: 'swk',
        age: 18
    },
    success: function (data) {
        console.log(data);
    }
})
jsonp的格式

一般情况下jsonp的内容是这样的:

callback({
    "name":"zhangsan",
    "age":18
})

也有有可能是这样的:

callback(
    'name',
    (function(a,b,c){
        return {
            name:a,
            age:b,
            gender:c
        }
    })('孙悟空',18,'男')
)

原文链接:https://www.cnblogs.com/primice/p/17384564.html

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:什么是jsonp - Python技术站

(0)
上一篇 2023年5月9日
下一篇 2023年5月9日

相关文章

  • JS添加或删除HTML dom元素的方法实例分析

    关于“JS添加或删除HTML dom元素的方法实例分析”的攻略,我将会为您提供一些详尽的说明。 添加HTML DOM元素 使用 JavaScript 来动态添加 HTML DOM 元素,对于网站交互性、用户体验以及动画效果的实现是非常有帮助的。 1. 使用 createElement 方法添加元素 createElement 方法可以创建一个指定的 HTML…

    JavaScript 2023年6月10日
    00
  • js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换&#XX的函数代码

    下面是详细的攻略。 js中文汉字转Unicode 在 js 中,可以使用以下代码将中文汉字转换为 Unicode 码: function chineseToUnicode(str) { var res = []; for (var i = 0; i < str.length; i++) { res[i] = ("00" + str.…

    JavaScript 2023年6月1日
    00
  • JavaScript在for循环中绑定事件解决事件参数不同的情况

    JavaScript 在 for 循环中绑定事件时,通常会遇到事件参数不同的情况,这种情况下,如果不加以处理,则会导致事件回调出错或者引起内存泄漏等问题。解决该问题的方法是通过使用闭包和立即执行函数表达式,来给事件参数绑定上恰当的值。下面是具体的攻略: 1. 通过立即执行函数表达式给事件参数绑定上值 通过立即执行函数表达式可以在每次迭代时创建一个新的作用域,…

    JavaScript 2023年6月10日
    00
  • javascript函数式编程程序员的工具集

    对于JavaScript函数式编程程序员,以下是一些常用的工具集合,我们将会一一讲解。 Ramda Ramda是一个功能强大且易于使用的JavaScript函数式编程库。它包含很多函数,如map,filter,compose等,以帮助你更容易地完成计算型编程任务。 下面是一个简单的示例,演示如何使用Ramda: import R from ‘ramda’; …

    JavaScript 2023年5月27日
    00
  • JavaScript中双向数据绑定详解

    JavaScript中双向数据绑定详解 双向数据绑定是指数据模型(Model)与视图(View)双方的数据自动进行同步,一方数据的改变会自动反映到另一方。在JavaScript中实现双向数据绑定可以减少代码量及提高开发效率。 实现方式 方式一:脏值检查 脏值检查指的是使用定时器或者计数器,定期去检查数据模型与视图是否同步,若不同步则进行更新。 此方式的实现较…

    JavaScript 2023年6月10日
    00
  • js获取本日、本周、本月的时间代码

    下面是获取本日、本周、本月的时间代码的完整攻略。 获取本日时间代码 我们可以使用JavaScript Date对象中的方法获取当前本日的时间。首先,我们需要创建一个Date对象,然后使用该对象的方法获取日期、月份和年份。下面是示例代码: const today = new Date(); const year = today.getFullYear(); c…

    JavaScript 2023年5月27日
    00
  • JavaScript Canvas编写炫彩的网页时钟

    下面是我对”JavaScript Canvas编写炫彩的网页时钟”的完整攻略。 什么是Canvas? Canvas 是 HTML5 中添加的绘图标签,它允许在浏览器中绘制图像、图形和动画。Canvas 与 SVG (纯向量)形成鲜明对比,它使用像素来绘制图像、图形和动画。 开始编写时钟 我们将在 HTML 中创建一个结构,然后使用 JavaScript 在 …

    JavaScript 2023年6月11日
    00
  • 如何快速高效创建JavaScript 一维数组方法详解

    当我们需要存储一组相关数据时,数组是JavaScript中最常用的数据类型之一。创建JavaScript一维数组非常简单,我们只需要将不同的数值或字符串用逗号隔开即可。但是,当数组中数据很多时,我们需要更高效,更便利地来创建数组。 下面是创建JavaScript一维数组的一些方法详解。 1. 直接赋值法 这是最基本的方法,我们可以直接在代码中定义值为数组类型…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部