AJAX跨域请求之JSONP获取JSON数据

JSONP（JSON with Padding）是一种非官方的协议，它巧妙地在服务器端集成Script tags并将其返回给客户端，通过JavaScript回调函数的方式实现了跨域访问。这是Ajax技术的一种扩展应用，让Web应用程序能够超越同源策略的限制，实现跨域数据交互。

在理解JSONP之前，我们首先需要了解Ajax技术。Ajax，即Asynchronous JavaScript and XML，是驱动新一代Web站点（也就是Web 2.0站点）的关键技术。它允许在不干扰Web应用程序的显示和行为的情况下在后台进行数据检索，通过XMLHttpRequest函数获取数据。由于浏览器的同源策略限制，Ajax无法直接实现跨域通信。

那么，什么是同源策略限制呢？简单来说，同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说，请求的URL的域必须与当前Web页面的域相同。这个策略从Netscape Navigator 2.0版本开始就存在，旨在防止不同源的内容之间的操作，保障浏览器安全。

让我们关注原始的HTML代码部分：

```html

```

这段代码设定了网页内容的字符集为UTF-8，确保网页能够正确各种字符。

接下来的JavaScript部分，我们看到了一个名为`jsonpCallback`的函数，它接收一个名为`result`的参数。这个函数通过弹窗的形式输出参数的内容。代码中创建了一个脚本元素（`JSONP`），用来发起跨域请求，请求的地址是`

```html

```

方式一：使用$.getJSON方法

通过加载jQuery库后，可以直接使用$.getJSON方法从服务器获取JSON格式的数据。示例代码如下：

```javascript

```

在这个例子中，`$.getJSON` 方法向 ` 发起请求，获取 JSON 数据，并通过回调函数处理返回的数据。

方式二：使用$.ajax方法

$.ajax方法是jQuery中更强大的数据请求方法，可以处理更复杂的请求和响应。示例代码如下：

```javascript

```

在这个例子中，我们使用 `$.ajax` 方法发起一个异步请求，设置 `dataType` 为 `jsonp` 以获取跨域 JSON 数据。成功获取数据后，通过回调函数处理数据。

方式三：使用$.get方法

这种方式结合了GET请求和JSONP跨域通信的优势，适合获取跨域JSON数据。示例代码如下：

```javascript