浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用

JSON和JSONP   　　JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，用于在浏览器和服务器之间交换信息。   　　JSONP(JSON With Padding)，就是打包在函数调用中的的JSON（或者包裹的JSON）。   　　JSON是一种数据格式，JSONP是一种数据调用方式。   代码如下:  //JSON  {  “name”: “sb”  } 代码如下:  //JSONP  callback({  “name”: “sb”  }) 　　出于安全考虑，脚本（AJAX）不能访问非本域的内容。但是，静态资源是不受域策略限制的，可 JSON和JSONP是Web开发中两个重要的概念，主要用于在客户端（浏览器）和服务器之间进行数据交换。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它采用完全独立于语言的文本格式，但同时也使用了类似于C家族语言（包括JavaScript）的结构，因此非常适合人阅读和编写，也便于机器解析和生成。JSON格式通常用于前后端数据交互，例如API接口返回的数据通常是JSON格式。 而JSONP（JSON with Padding）则是一种绕过同源策略的技术，因为JavaScript的AJAX请求受到同源策略的限制，无法直接访问跨域的HTTP资源。JSONP的核心思想是利用HTML的`<script>`标签可以跨域加载JavaScript文件的特性，将JSON数据包装在一个JavaScript函数调用中，由客户端（浏览器）预先定义好一个函数，服务器返回的JSON数据则作为参数调用这个函数。 举个例子，假设我们有一个客户端定义的函数`showPrice`，服务器返回的JSONP数据如下： ```javascript showPrice({symbol: 'IBM', price: 91.42}); ``` 这段代码会被浏览器当作JavaScript执行，从而实现了跨域数据的传递。客户端通过动态创建`<script>`标签并设置`src`属性为服务器提供的URL，服务器根据请求中的回调函数名参数（如`callback=showPrice`）生成上述格式的响应。 在jQuery中，我们可以使用`$.ajax`或`$.getJSON`等方法轻松实现JSONP请求。例如： ```javascript $.ajax({ url: "http://example.com/service", type: "GET", dataType: "jsonp", success: function(data) { console.log("Symbol: " + data.symbol + ", Price: " + data.price); } }); ``` 在这个例子中，jQuery会自动处理JSONP请求的细节，包括动态创建`<script>`标签和处理回调函数。服务器端收到请求后，需要根据请求中的`callback`参数，将JSON数据包裹在指定的回调函数调用中返回。 JSONP虽然方便，但也存在一些局限性。它只能用于GET请求，因为`<script>`标签只支持GET方式加载。没有错误处理机制，如果服务器返回的数据格式不正确，或者服务器端没有正确地生成回调函数调用，客户端很难捕获到错误。此外，由于JSONP是基于脚本注入，所以安全性较弱，容易遭受XSS（跨站脚本攻击）。 JSON是数据格式，而JSONP是一种跨域数据获取的机制，它们共同服务于Web应用的数据交换需求。在实际开发中，理解这两者的区别和使用场景，有助于构建更高效、安全的前端应用。