浅析json与jsonp区别及通过ajax获得json数据后格式的转换

下面就详细讲解一下关于“浅析json与jsonp区别及通过ajax获得json数据后格式的转换”的攻略。

一、JSON与JSONP的区别

1. JSON

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,这种文本格式很容易被人类阅读和编写,同时也很容易被机器解析和生成。在现代web应用中,JSON已经成为了一种非常流行的数据格式,用来代替XML格式来作为数据的传输方式。

JSON数据格式基本上由两种数据结构,对象和数组表示。对象是一个无序的键值对集合,用花括号 {} 表示,每个键值对之间使用冒号 : 分隔开来。例如:

{
    "name": "John",
    "age": 20,
    "address": {
        "city": "Beijing",
        "street": "Xidan"
    }
}

数组是值的一个有序集合,用方括号 [] 表示,在数组中的每个值之间使用逗号 , 分隔开来。例如:

[
    "apple",
    "banana",
    "orange"
]

2. JSONP

JSONP (JSON with Padding) 是一种跨域数据请求方式,它允许在服务器端动态地生成JSON数据并将其在客户端调用指定的函数时作为参数传递。

JSONP主要是通过script标签的src属性来请求数据,服务器返回的是一段JavaScript代码,而这段代码的执行结果就是所需的JSON数据。例如:

/* HTML页面中的代码 */
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSONP示例</title>
</head>
<body>
    <div id="result"></div>

    <script>
        function handleJSONP(data) {
            document.getElementById("result").innerHTML = JSON.stringify(data);
        }

        var script = document.createElement("script");
        script.src = "http://example.com/data.php?callback=handleJSONP";
        document.getElementsByTagName("head")[0].appendChild(script);
    </script>
</body>
</html>

/* PHP服务器端的代码 */
<?php
$jsonData = array(
    "name" => "John",
    "age" => 20,
    "address" => array(
        "city" => "Beijing",
        "street" => "Xidan"
    )
);

$callback = $_GET["callback"];
echo $callback . "(" . json_encode($jsonData) . ")";
?>

上述代码中的handleJSONP函数就是客户端指定的回调函数,服务器端返回的数据将被作为回调函数调用时的第一个参数传入。

二、通过AJAX获得JSON数据后的格式转换

在前端开发中,我们常常通过AJAX来异步获取数据,这些数据可能是JSON格式的数据,因此需要进行一些格式的转换才能适用于我们的程序。

1. 获取JSON数据

我们可以通过下面的方式使用AJAX来获取JSON数据:

/* 建立AJAX对象 */
var xhr = new XMLHttpRequest();

/* 监听数据返回事件 */
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var jsonData = JSON.parse(xhr.responseText);
        console.log(jsonData);
    }
};

/* 发送AJAX请求 */
xhr.open("GET", "http://example.com/data.json", true);
xhr.send();

上述代码中,我们使用了XMLHttpRequest对象来发起一个异步请求,当返回的数据状态码为200时,可以获取到返回的数据,并使用JSON.parse方法将其转换为JSON对象。

2. JSON转对象/字符串

在JavaScript中,我们可以使用JSON对象提供的parse和stringify方法来完成JSON与JavaScript对象/字符串之间的相互转换。

2.1 JSON转对象

我们可以使用JSON.parse方法将JSON格式的字符串转换为JavaScript对象。例如:

var jsonString = '{"name":"John","age":20,"address":{"city":"Beijing","street":"Xidan"}}';
var jsonObject = JSON.parse(jsonString);
console.log(jsonObject);

上述代码中,我们将JSON格式的字符串存放到了变量jsonString中,并使用JSON.parse方法将其转换为JavaScript对象,并将其赋值给了变量jsonObject。

2.2 JSON转字符串

我们可以使用JSON.stringify方法将JavaScript对象/数组转换为JSON格式的字符串。例如:

var jsonObject = {
    "name": "John",
    "age": 20,
    "address": {
        "city": "Beijing",
        "street": "Xidan"
    }
};
var jsonString = JSON.stringify(jsonObject);
console.log(jsonString);

上述代码中,我们将JavaScript对象{…}存放到了变量jsonObject中,使用JSON.stringify方法将其转换为JSON格式的字符串,并将其赋值给了变量jsonString。

三、示例说明

下面通过两个示例来说明一下JSON和JSONP的使用:

1. 使用JSONP获取百度热榜

我们可以通过JSONP来获取百度热榜的数据,代码如下:

/* 首先定义一个叫做baiduHot的全局函数 */
function baiduHot(data) {
    console.log(data);
}

/* 创建script标签来发起请求 */
var script = document.createElement("script");
script.src = "http://top.baidu.com/buzz?b=1&jsonp=baiduHot";
document.getElementsByTagName("head")[0].appendChild(script);

上述代码中,我们定义了一个全局函数baiduHot,用来处理返回的数据,调用时将数据作为参数传入。然后通过创建script标签,并将其添加到文档中来发起JSONP请求,将指定的回调函数名字jsonp=baiduHot传入。

2. 使用AJAX获取新浪微博数据

我们可以通过AJAX来获取新浪微博的数据,并将获取到的JSON数据转换为字符串格式。代码如下:

/* 建立AJAX对象 */
var xhr = new XMLHttpRequest();

/* 监听数据返回事件 */
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var jsonData = JSON.parse(xhr.responseText);
        var jsonString = JSON.stringify(jsonData);
        console.log(jsonString);
    }
};

/* 发送AJAX请求 */
xhr.open("GET", "http://api.weibo.com/2/statuses/public_timeline.json?source=211160679", true);
xhr.send();

上述代码中,我们使用AJAX来获取新浪微博公共时间线的数据,并在响应中将其转换为JSON对象,然后使用JSON.stringify方法将其转换为字符串形式。最终将转换后的字符串打印出来。

以上便是关于“浅析JSON与JSONP区别及通过AJAX获得JSON数据后格式的转换”的攻略了。如果还有不清楚的地方,可以再联系我哦~

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:浅析json与jsonp区别及通过ajax获得json数据后格式的转换 - Python技术站

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

相关文章

  • java序列化与反序列化的使用方法汇总

    下面是对“java序列化与反序列化的使用方法汇总”的详细讲解。 什么是Java序列化和反序列化? Java序列化是指将Java对象转换为可存储或可传输格式的过程,也就是将Java对象转换成字节流的过程。Java反序列化则是将字节流转换成Java对象的过程。 Java序列化和反序列化功能被广泛地应用在网络传输和文件存储等场景中。 Java序列化的实现方式 Ja…

    C 2023年5月23日
    00
  • GTA5抢劫任务人员搭配攻略 抢劫任务队员介绍

    GTA5抢劫任务人员搭配攻略 引言 GTA5中的抢劫任务是玩家中非常有趣的游戏内容,但抢劫需要合理的人员配搭才能快速完成任务而不被警察抓住。本文介绍了如何选择合适的人员搭配完成抢劫任务。 抢劫任务人员分类 外围人员:外围人员主要负责支援任务,并提供帮助、掩护、干扰等。外围人员包括司机、狙击手、盾牌、混混等。 技术人员:技术人员负责突破保险柜、绕过安保系统、钻…

    C 2023年5月22日
    00
  • Golang中的错误处理的示例详解

    Golang中的错误处理的示例详解 为什么需要错误处理 在编程中,无论我们的语言是什么,都会遇到各种错误。为了避免出现错误后程序崩溃或者无法正常工作,我们需要考虑错误的处理方法。Golang官方鼓励使用错误来处理问题,而不是抛出异常或者在程序中使用错误的标记。因此,学习如何使用Golang来处理错误显得尤为必要。 错误类型 在Golang中,错误是一个内置接…

    C 2023年5月22日
    00
  • C语言中常用的几个头文件及库函数

    下面我来详细讲解一下“C语言中常用的几个头文件及库函数”。 常用的头文件 #include stdio.h 是C语言中用来进行输入输出(IO)操作的头文件。常见的IO函数有: printf: 打印输出。 scanf: 读入输入。 getchar: 读入单个字符。 示例: #include <stdio.h> int main() { printf…

    C 2023年5月22日
    00
  • C语言中程序环境和预处理的详细图文讲解

    针对“C语言中程序环境和预处理的详细图文讲解”这一主题,我会为你提供一份完整攻略。本攻略主要分两部分:程序环境和预处理。下面就分别进行详细讲解。 程序环境 什么是程序环境? 程序环境指的是程序执行的环境,包括操作系统、硬件设备等因素。C语言的程序需要在特定的环境下才能执行。 程序的执行过程 当程序运行时,它需要在内存中占用一定的空间。程序在执行过程中分为以下…

    C 2023年5月23日
    00
  • c++ lambda捕获this 导致多线程下类释放后还在使用的错误问题

    在C++11引入的Lambda表达式语法中,我们可以使用[=]、[&]等符号来捕获当前作用域中的变量,而同时也可以使用[this]来捕获当前对象的this指针。然而,在多线程环境下,如果Lambda表达式捕获了this指针但没有正确处理,可能会导致对象在析构后依然被Lambda表达式所引用,从而产生严重的未定义行为,比如内存泄漏、指针悬挂等。 为了避…

    C 2023年5月22日
    00
  • 详解几十行代码实现一个vue的状态管理

    下面我将详细讲解如何实现一个vue的状态管理。 1. 状态管理器的作用 在使用Vue进行大型前端应用开发时,随着组件数量的增加,组件之间的状态共享也变得越来越复杂。这时候就需要一个或多个状态管理器来维护应用的整体状态,使得组件间的状态共享变得更加灵活、稳定。 2. 状态管理器的实现 一个简单的vue状态管理器有以下几个基本要素: 2.1. 状态(state)…

    C 2023年5月23日
    00
  • CGLD是什么币种?一文了解CGLD币怎么样

    CGLD是什么币种? CGLD(Celo Gold)是Celo协议的代币,是以太坊 ERC20 标准代币,也是Celo生态系统中的原生资产。Celo是基于信任的区块链平台,专门设计用于支持金融包容,旨在实现金融服务的覆盖面和可用性。 Celo协议旨在为人们提供使用区块链技术进行支付和汇款服务,特别是为那些没有银行账户的人提供服务。基于Celo 协议的平台允许…

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