jsonp详解：突破跨域限制的巧妙方法

本文将详细介绍JSONP（JSON with Padding）的概念及其在解决浏览器跨域问题中的应用。JSONP是一种利用`<script>`标签的特性绕过同源策略的方法，允许从一个源（通常为客户端）加载来自另一个源（跨域）的JavaScript代码。同源策略是浏览器为了保护用户数据安全而实施的一种机制，它限制了来自不同源的脚本之间的交互。 首先，我们理解什么是同源策略。浏览器基于安全原因，禁止一个来源的脚本访问其他来源的文档属性，以防止恶意代码注入。当尝试从2698端口的页面通过jQuery发起对2701端口的请求时，由于同源策略的限制，这些请求会被浏览器阻止，导致请求失败。 然后，JSONP的核心原理在于利用`<script>`标签的特性。通常，当浏览器遇到`<script>`标签时，它会执行其中的JavaScript代码，即使这个脚本来自不同的源。作者通过创建一个带有特定回调函数名称的URL（如`http://localhost:2701/home/index?callback=yourCallbackName`），并在客户端定义这个回调函数，服务器端返回一个包裹在JavaScript函数调用中的JSON数据，比如`yourCallbackName({data: '...'})`。这样，浏览器解析到的是合法的JavaScript代码，并执行回调函数，从而间接地实现了跨域数据的获取。 举个例子，作者在2698端口的页面上使用`<script>`标签发起请求，指定回调函数名： ```html <script type="text/javascript" src="http://localhost:2701/Scripts/jquery-1.4.4.min.js?callback=handleData"></script> ``` 在服务器端，如果返回的响应类似于： ```javascript handleData({"key": "value"}); ``` 当这个脚本被加载时，`handleData`函数会被调用，从而接收到JSON数据。 JSONP巧妙地利用了`<script>`标签的特性，通过动态创建并执行回调函数，实现了在浏览器的同源策略限制下，从其他源获取数据的功能。这对于那些需要跨域交互的场景，特别是当数据源无法更改（如第三方API）时，JSONP是一个实用且常见的解决方案。