通过实例解析JSON与JSONP原理及使用方法

什么是JSON

JSON（JavaScript Object Notation）即 JavaScript 对象表示法，是一种轻量级的数据交换格式，易于阅读和编写。JSON采用基础元素（值value，列表list/array，对象object）来描述数据对象，因此可以表示复杂的数据结构。

JSON的基本语法

在JSON中，数据由键/值对组成，用逗号分隔，放在花括号中。例如：

{
   "firstName": "John",
   "lastName": "Smith",
   "age": 25,
   "address": {
       "streetAddress": "21 2nd Street",
       "city": "New York",
       "state": "NY",
       "postalCode": "10021"
   },
   "phoneNumbers": [
       {
           "type": "home",
           "number": "212 555-1234"
       },
       {
           "type": "fax",
           "number": "646 555-4567"
       }
   ],
   "email": "[e-mail]"
}

上述JSON表示了一个人的基本信息，包含了姓名、年龄、地址、电话号码等一系列信息。

JSONP的基本概念

JSONP（JSON with Padding）是一种解决跨域请求的数据交互方式。在浏览器中，由于安全限制，JavaScript只能请求同域名下的数据，而JSONP则通过添加<script>标签来绕过这个限制，实现跨域请求。

JSONP的原理是：客户端利用<script>标签可以跨域的特点，将要请求的数据放在回调函数中，服务器在接收到请求后，返回一个JavaScript脚本，其中包含要请求的数据以及回调函数的调用。客户端接收到响应后，浏览器会自动执行响应中返回的JavaScript脚本，从而实现对跨域数据的请求。

JSONP的使用方法

1. 在客户端定义回调函数

客户端在请求JSONP数据之前，首先需要在全局作用域中定义一个回调函数，用于接收返回的数据。例如：

function handleResponse(response) {
  console.log("Response received: ", response);
}

2. 发送JSONP请求

为了发送JSONP请求，我们需要通过动态创建<script>标签的方式来发送请求。具体步骤如下：

• 创建一个<script>标签，将其加入网页中。
• 将请求URL组装成一个如下所示的字符串：http://example.com/data?callback=handleResponse。其中，handleResponse即为第一步中定义的回调函数名。
• 将该URL赋给<script>标签的src属性。
• 发送请求。

下面是一个完整的例子：

<script>
  function handleResponse(response) {
    console.log("Response received: ", response);
  }

  var script = document.createElement('script');
  script.src = "http://example.com/data?callback=handleResponse";
  document.head.appendChild(script);
</script>

上述例子中，我们请求了http://example.com/data网址中的数据，并指定了回调函数为handleResponse。当响应返回时，浏览器会自动执行回调函数，并将响应数据作为参数传入。

3. 服务器端返回数据

服务器端收到请求后，根据请求中指定的回调函数名称，构造响应的JavaScript脚本，将需要返回的数据以及回调函数的调用写入脚本中，并返回给浏览器。例如：

handleResponse({"name": "John", "age": 25});

JSON与JSONP的区别

JSON与JSONP的最大区别在于，JSON是一种数据格式，而JSONP则是一种数据交互协议。

JSON在数据格式上具有更广泛的适用性，可以在各个应用场景中直接使用。但由于浏览器的安全限制，仅能用于同域名下的数据交互。而JSONP通过在客户端定义回调函数和服务器端返回JavaScript脚本，可以实现跨域数据交互。

另外，由于JSONP在请求数据时需要添加回调函数参数，因此与普通的JSON请求相比，JSONP的请求URL会更长一些。

示例

示例一：JSON

在HTML页面中，我们可以通过JavaScript的JSON.parse()方法将符合JSON格式的字符串转换为JavaScript对象。例如，下面是一个将JSON字符串转换为JavaScript对象的示例：

// JSON字符串
var jsonString = '{"name": "John", "age": 25, "gender": "male"}';

// 将JSON字符串转换为JavaScript对象
var jsonObject = JSON.parse(jsonString);

// 输出JavaScript对象的属性
console.log("Name: ", jsonObject.name);
console.log("Age: ", jsonObject.age);
console.log("Gender: ", jsonObject.gender);

示例二：JSONP

下面是一个使用JSONP请求远程数据的示例。在这个例子中，我们请求的URL返回的数据格式为JSONP，即响应内容是一个JavaScript脚本，其中包含了回调函数的调用和需要返回的数据。

<script>
  function handleResponse(response) {
    console.log("Response received: ", response);

    // 进一步处理响应数据
    // ...
  }

  var script = document.createElement('script');
  script.src = "http://example.com/data?callback=handleResponse";
  document.head.appendChild(script);
</script>

在上述代码中，我们定义了一个回调函数handleResponse()，并使用<script>标签动态加载了一个外部JavaScript文件。这个文件返回的数据是在服务器端包装好的JSONP格式，其中包含了回调函数的调用和需要返回的数据。当浏览器接收到这个脚本时，会自动执行其中的回调函数，并将响应数据作为参数传入。