关于JSON与JSONP简单总结

关于JSON与JSONP简单总结

什么是JSON?

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。

JSON格式如下:

{
  "name": "John",
  "age": 30,
  "country": "USA",
  "hobbies": ["reading", "traveling"]
}

其中,每个键值对用冒号分隔,每个键值对之间用逗号分隔,整个结构用大括号括起来。

什么是JSONP?

JSONP(JSON with Padding)是一种跨域数据交互方式。由于浏览器的同源策略,JavaScript只能访问与本网页同源的资源,而JSONP通过动态创建DOM节点的方式引入一个外部脚本,再将JSON数据作为该脚本的参数传递过来,从而实现跨域数据交互。JSONP请求的响应数据需要是一段可执行的JavaScript代码,由于可以在前端执行,所以JSONP常用于跨域调用API。

JSONP的格式如下:

callback({
  "name": "John",
  "age": 30,
  "country": "USA",
  "hobbies": ["reading", "traveling"]
})

其中callback是前端定义的一个回调函数,服务端通过将JSON数据作为参数传递到callback函数中来构造响应。

JSON与JSONP示例

JSON示例

以下示例演示如何使用JavaScript解析JSON数据:

<!DOCTYPE html>
<html>
  <body>
    <p id="demo"></p>
    <script>
      var jsonText = '{ "name": "John", "age": 30, "country": "USA", "hobbies": ["reading", "traveling"] }';
      var obj = JSON.parse(jsonText);
      document.getElementById("demo").innerHTML = "Name: " + obj.name + ", Age: " + obj.age;
    </script>
  </body>
</html>

解析后输出结果为:Name: John, Age: 30。

JSONP示例

以下示例演示如何使用jQuery跨域调用API:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  </head>
  <body>
    <p id="demo"></p>
    <script>
      function getData(data) {
        var name = data.name;
        var age = data.age;
        document.getElementById("demo").innerHTML = "Name: " + name + ", Age: " + age;
      }
      $.ajax({
        url: "http://example.com/api?callback=getData",
        dataType: "jsonp",
      });
    </script>
  </body>
</html>

将getData函数作为callback参数传递给API,JSONP响应的数据将作为getData函数的参数,解析后输出结果同上。

总结

JSON是一种常用的数据交换格式,易于读写,常用于前后端数据交互。JSONP则是一种跨域数据交互方式,常用于跨域调用API。了解JSON与JSONP的格式以及相关应用场景,有助于提高前端开发的技术水平。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:关于JSON与JSONP简单总结 - Python技术站

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

相关文章

  • 最新C语言自定义类型详解

    最新C语言自定义类型详解 在C语言中,自定义类型是一种常用的概念,通过自定义类型可以定义属于自己的类型,并且可以实现对这种类型的操作。自定义类型主要可以通过结构体、联合体和枚举来实现。 结构体 结构体是一种组合类型,可以包含多个不同数据类型的成员,这些成员可以是基本数据类型,也可以是自定义数据类型。结构体的定义格式如下: struct 结构体名称{ 数据类型…

    C 2023年5月23日
    00
  • C语言回溯法 实现组合数 从N个数中选择M个数

    下面是C语言回溯法实现组合数从N个数中选择M个数的完整攻略: 核心思路 回溯法是一种经典的问题求解方法,其基本思路是:从一条路径开始,依次尝试每一个分支,递归地进行尝试,直到找到解为止,而如果该路径无解,则回退到上一个路径,继续尝试其他分支。 在利用回溯法解决从N个数中选择M个数的组合数问题时,我们可以将每个数看作一个节点,根据回溯的思想依次尝试每一个节点,…

    C 2023年5月22日
    00
  • C++中异常处理的基本思想及throw语句抛出异常的使用

    C++中异常处理的基本思想是当程序在执行的过程中发生错误或异常,程序可以抛出一个异常,然后程序会将异常传递到异常处理函数进行处理。异常处理函数可以捕获异常并对其进行相应的处理,而不是直接在程序中崩溃。 异常处理的基本思想可以使用try块和catch块实现。try块用来定义可能会抛出异常的代码块,而catch块用来定义抛出异常后的处理代码。当try块中的代码抛…

    C 2023年5月22日
    00
  • 基于C程序启动代码的深入分析

    基于C程序启动代码的深入分析 简介 本攻略旨在深入分析C程序启动过程中所涉及到的启动代码,为C语言开发搭建深入理解的基础。本文将从以下几个方面展开: 常见的C程序启动过程及启动代码 启动代码中的关键函数及其作用 通过示例说明启动代码在实际应用中的运行流程 C程序启动过程及启动代码 在大多数操作系统中,C程序的启动过程可以分为以下几个步骤: 加载器将可执行文件…

    C 2023年5月23日
    00
  • C/C++高精度算法的实现

    C/C++高精度算法的实现攻略 什么是高精度算法? 在计算机上进行数学运算通常都是使用二进制来表示数字,而二进制可以在内存中用 0 和 1 表示。在使用标准类型(如 int, long)时,它们可以很方便地执行大量的数学运算。但是,对于较大的数字或需要较高精度的计算,这些类型可能无法满足需求,因为它们只能容纳有限数量的比特,从而有限表示。基于这些原因诞生了高…

    C 2023年5月23日
    00
  • C语言中实现itoa函数的实例

    C语言中实现itoa函数的实例 什么是itoa函数? itoa函数是C++的标准库函数,可以将整型数据转换成对应的字符串。但在C中并没有该函数,为了方便C程序员的编程,我们需要自己实现该函数。 实现itoa函数的过程 实现itoa函数主要包括以下几个步骤: 判断待转换的整数是否为负数,如果是负数,则需要在最终的字符串前面添加负号。 将整型数按位分解,得到每个…

    C 2023年5月23日
    00
  • Android NDK开发(C语言基本数据类型)

    Android NDK开发(C语言基本数据类型)攻略 什么是Android NDK? Android NDK(Native Development Kit)是一个允许您使用C和C++代码在Android设备上开发应用程序的工具集。NDK允许您在Android应用程序中使用底层C和C++代码,从而提高应用程序性能。使用NDK可以实现以下功能: 构建基于C/C+…

    C 2023年5月24日
    00
  • 汇编语言入门教程(这一篇足矣)

    《汇编语言入门教程(这一篇足矣)》是一篇介绍汇编语言基础知识的文章,适合初学者入门。下面我将按照文章的结构进行详细讲解。 一、前言 本文介绍汇编语言基础知识和相关工具的使用,重点讲解x86汇编语言。同时要求读者有一定的基础知识,建议了解计算机系统、数据结构和算法。本文主要内容包括汇编语言基本语法、寄存器和指令等。 二、汇编语言基础 本节主要讲解汇编语言的基本…

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