看完必会的JSONP

最新推荐文章于 2024-03-11 17:24:48 发布

睡在我下铺的上铺的胖子

最新推荐文章于 2024-03-11 17:24:48 发布

阅读量1.4k

点赞数 1

分类专栏：前端大杂烩文章标签： jsonp ajax

本文链接：https://blog.csdn.net/real_bird/article/details/52724800

版权

本文介绍了JSONP的概念，作为解决AJAX跨域问题的方案。详细阐述了JSON数据格式的规则，并通过jQuery示例解释了JSONP的工作原理。此外，还提供了一个模拟百度搜索的应用实例，帮助读者深入理解JSONP的使用。

摘要由CSDN通过智能技术生成

导读

　　为了弥补AJAX无法跨域的问题，JSONP应运而生。不过JSONP并不是唯一跨域的技术，更新的有CORS技术。

简介

　　JSONP是JSON with padding（填充式JSON或参数式JSON）的简写，是应用JSON的一种新方法。JSONP看起来和JSON差不多，只不过是被包含在函数调用中的JSON，就像下面这样。callback({ "name": "real"})。下面分别来谈谈JSON和JSONP。

JSON

JSON的优点

JSON是一种数据格式。
基于纯文本，跨平台不是问题。
JavaScript原生支持。JSON是JavaScript的一个严格的子集，利用了JavaScript中的一些模式（对象、数组等）来表示结构化数据。
经过合理的排版后可读性较强，XML过于繁琐、冗长。
容易编写和解析（JSON.stringify、JSON.parse），前提是要知道格式。

JSON数据的规则

　　JSON的语法可以表示为以下三种类型的值。
　　
1、简单值：字符串，数值，布尔值，null。但不支持undefined。如：5，”hello”，false。值得注意的是：JSON字符串必须使用双引号（单引号会导致语法错误）。
2、对象：”{}/Object”。对象是一种复杂数据类型。是一组无序的键值对。而每个键值对中的值可以使简单值（字符串），也可以是复杂数据类型（数组，对象）。

{
  "name": "real",
  "age": 20,
  "friends": ["Laki", "Sonny"]
}

3、数组: “Array”。数组也是一种复杂数据类型，表示有序的值列表。其中数组中的值可以是简单数据类型（字符串），也可以复杂数据类型（数组、对象）。

[
  {
    "name": "Laki",
    "age": "21"
  },
  {
    "name": "Sonny",
    "age": "22",
    "friens": [ "real", "Laki" ]
  }
]

　　对于日期类型：
　　

var day = {
  date: new Date( 2016, 10, 2 )
}
var jsonDay = JSON.stringify( day );// 转换为JSON格式
/* 解析 */
var day2 = JSON.parse( jsonDay, function ( key, value) {
   
  if ( key === "date" ) {
    return new Date( value );
  } else {
    return value;
  }
})