理解Jsonp的基本概念 (理解js对象就理解js)

理解JSONP的基本概念：从JS对象到跨域通信的演变

一、引言

在Web开发和数据交互的过程中，JavaScript对象（JS对象）扮演着至关重要的角色。
它们用于存储和传递数据，实现页面功能等。
随着技术的发展，JSONP（JSON with Padding）作为一种跨域通信的方式逐渐受到广泛关注。
本文将详细介绍JSONP的基本概念，帮助读者理解如何从JS对象引申出JSONP，并了解其在现代Web开发中的应用。

二、JSON与JS对象

1. JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于阅读和写入。它基于ECMAScript的一个子集，采用文本格式表示数据，包括键值对、数组等结构。
2. JS对象：在JavaScript中，对象是一种复合数据类型，用于存储多个值。这些值可以是基本类型（如字符串、数字等），也可以是其他对象或数组。JSON格式的数据在JavaScript中通常被解析为一个对象。

三、JSONP的诞生背景

在早期的Web开发中，由于浏览器的同源策略限制，跨域请求数据是一个难题。
同源策略是指浏览器只允许执行来自同一源（域名、协议、端口都相同）的脚本。
为了解决这个问题，JSONP应运而生。

四、JSONP的基本概念

JSONP是一种利用HTML的script标签绕过同源策略限制，实现跨域通信的技术。
它通过在回调函数中返回JSON格式的数据，实现数据的跨域传输。
JSONP的核心在于将数据格式化成函数调用的形式，从而避免浏览器的同源策略限制。

五、JSONP的实现原理

1. 客户端发起一个带有特定回调函数的请求到服务器；
2. 服务器接收到请求后，将需要返回的数据包装在一个函数调用中，然后将这个函数以脚本标签的形式插入到HTML响应中；
3. 浏览器加载这个脚本时，会执行其中的函数，从而实现跨域数据的传输和处理。

六、JSONP的应用场景

JSONP主要用于跨域获取数据。
例如，一个网页需要从其他域名下的API获取数据，就可以使用JSONP来实现。
在实际应用中，许多第三方API都支持以JSONP的方式提供数据服务。

七、JSONP与CORS

随着技术的发展，CORS（跨源资源共享）成为了一种更为完善的跨域解决方案。
相比JSONP，CORS具有更好的兼容性和安全性。
在实际开发中，开发者可以根据具体需求和场景选择合适的技术方案。

八、JSONP的优缺点

1. 优点：简单易用，实现跨域通信；
2. 缺点：存在安全风险（例如，跨站请求伪造攻击），不适合大规模或高安全需求的场景；同时，由于JSONP只能发送GET请求，对于需要发送POST或其他类型请求的场景并不适用。

九、结论

本文从JS对象引入，介绍了JSONP的基本概念、诞生背景、实现原理、应用场景以及与CORS的对比。
通过了解JSONP，我们可以更好地理解JavaScript在Web开发中的数据交互和跨域通信机制。
在实际开发中，开发者应根据具体需求和场景选择合适的技术方案。

十、拓展知识：从JSONP到现代Web开发

随着Web技术的不断发展，现代前端开发中很少直接使用JSONP，而更多地使用CORS、WebSockets等技术进行跨域通信和数据交互。
前端框架如React、Vue等也提供了更为便捷的数据请求和处理方式。
了解这些技术的发展历程和最新进展，对于开发者来说是非常重要的。

理解JSONP的基本概念有助于我们深入理解JavaScript在Web开发中的应用。
通过不断学习和实践，我们可以更好地掌握现代Web开发技术，为创建更丰富的网页应用打下坚实的基础。

ajax和jsonp有区别吗？

实现方法完全不一样。 ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。

JSONP 的工作原理是什么？

可以直接理解为服务端输出JS代码：客户端POST或GET请求都没关系重点在服务端输出的结果。首先响应结果中Content-Type=text/javascript然后前端代码直接以

在 java web开发中怎么使用json

JSON建构有两种结构： json简单说就是javascript中的对象和数组，所以这两种结构就是对象和数组2种结构，通过这两种结构可以表示各种复杂的结构1、对象：对象在js中表示为“{}”括起来的内容，数据结构为 {key：value，key：value,...}的键值对的结构，在面向对象的语言中，key为对象的属性，value为对应的属性值，所以很容易理解，取值方法为对象获取属性值，这个属性值的类型可以是数字、字符串、数组、对象几种。在Java中就是一种Map结构。 2、数组：数组在js中是中括号“[]”扩起来的内容，数据结构为 [java,javascript,vb,...]，取值方式和所有语言中一样，使用索引获取，字段值的类型可以是数字、字符串、数组、对象几种。在Java中是一种list结构。经过对象、数组2种结构就可以组合成复杂的数据结构了。二、Json in Javascript使用Json语法创建对象var people = {name:jack,sex:mail}; 可以通过这种语法创建json对象，用“{}”括起来，用“，”隔开key：value使用Json语法创建数组var arr =[value1,value2...]; 一个包含多个people的数组 peoples = [{name:jack,sex:mail},{name:lily,sex:femail}; Json数组可以通过这种语法创建，用[]括起来，数组元素之间用“，”分隔开，下面是这种语法的示意图：在使用Json格式字符串与服务器交互时候，可以利用Json扩展的方法将字符串转换成一个JavaScript对象，或者将一个对象转换成Json格式字符串。不过先要登录下载文件。引入该包后，js对象直接用toJSONString()装换为字符串格式，字符串可以用parseJSON()转换成js对象。访问数据只需用点号表示法来表示数组元素。所以，要想访问上面peoples列表的第一个条目的名字，只需在 JavaScript 中使用下面这样的代码：peoples[0]利用这样的语法，可以处理任何 JSON 格式的数据，而不需要使用任何额外的 JavaScript 工具包或 API。修改数据正如可以用点号和方括号访问数据，也可以按照同样的方式轻松地修改数据： peoples[0] = Rachmaninov;　在将字符串转换为 JavaScript 对象之后，就可以像这样修改变量中的数据。