Jsonp详解：与Ajax、JSON的区别及跨域原理

"Jsonp 关键字详解及json和jsonp的区别，ajax和jsonp的区别" Jsonp (JSON with Padding) 是一种跨域数据交互协议，它的基本思想是利用 `<script>` 标签不受同源策略限制的特性，来实现浏览器与服务器之间的通信。与传统的 AJAX（Asynchronous JavaScript and XML）技术相比，JSONP 主要用于解决浏览器的同源策略限制，从而允许从不同的源获取数据。 首先，我们要理解为什么需要 JSONP。在 Web 开发中，由于同源策略的限制，浏览器不允许 JavaScript 代码从一个域名下的网页去请求另一个域名的数据，除非两个域名完全相同。为了解决这个问题，JSONP 应运而生，它允许在客户端通过创建动态 `<script>` 标签并设置其 `src` 属性指向提供数据的服务器端接口，服务器端返回的不是纯 JSON 数据，而是一个 JavaScript 函数调用，函数名是预先约定好的，函数参数是 JSON 格式的数据。当这个 `<script>` 被加载时，浏览器会执行这个函数，从而实现跨域数据的获取。 例如，假设我们的约定函数名为 `handleData`，服务器端返回的 JSONP 响应可能是这样的： ```javascript handleData({"name":"hanzichi","age":10}); ``` 客户端的 JavaScript 代码会类似这样： ```javascript function handleData(data) { console.log(data); } var script = document.createElement('script'); script.src = 'http://example.com/data?callback=handleData'; document.body.appendChild(script); ``` 在这个例子中，`data?callback=handleData` 是服务器端接口的 URL，`callback` 参数告诉服务器我们需要的回调函数名为 `handleData`。服务器接收到请求后，会将 JSON 数据包裹在 `handleData` 函数调用中返回。 而 JSON（JavaScript Object Notation）则是一种轻量级的数据交换格式，它采用完全独立于语言的文本格式，易于人阅读和编写，同时也易于机器解析和生成。JSON 格式通常用于 AJAX 请求的响应数据，但受限于同源策略，不能在不同源之间直接通过 XMLHttpRequest（XHR）进行传输。 Ajax 和 JSONP 的主要区别在于： 1. **跨域能力**：Ajax 受限于同源策略，而 JSONP 可以实现跨域。 2. **请求类型**：Ajax 使用 XMLHttpRequest 对象，支持 POST 和 GET 等多种请求方式；JSONP 只支持 GET 请求，因为 `<script>` 标签只能发起 GET 请求。 3. **安全性**：由于 JSONP 是通过在页面中注入脚本来实现的，如果服务器端的响应被恶意篡改，可能会执行恶意代码，因此安全性相对较低。Ajax 使用 HTTP 协议，可以通过 HTTPS 提供安全保护。 4. **错误处理**：Ajax 可以通过 XMLHttpRequest 对象的 onerror 事件捕获错误，而 JSONP 的错误处理相对复杂，通常需要依赖于超时机制。 总结起来，JSONP 是一种为了解决浏览器同源策略限制而诞生的技术，主要用于跨域获取 JSON 格式的数据，它利用 `<script>` 标签的特性，通过指定回调函数的方式让服务器返回可执行的 JavaScript 代码。而 AJAX 更加通用，不仅限于 JSON 数据，也支持 POST 等其他请求方式，但在跨域方面需要借助 CORS（跨源资源共享）等机制。