jQuery 允许跨域
在开发 Web 应用时，我们经常会遇到需要从其他域名或者端口获取数据的需求。然而，由于浏览器的同源策略限制，JavaScript 默认是禁止跨域请求的。但是，jQuery 提供了一种简单的方式来允许跨域请求，使得我们能够轻松地获取其他域名的数据。
什么是跨域请求？
跨域请求是指在浏览器中使用 JavaScript 发送 HTTP 请求时，请求的目标 URL 与当前页面的域名或者端口不一致的情况。比如，当前页面的 URL 是 获取数据。由于域名不一致，浏览器会禁止这种跨域请求。
同源策略的限制
同源策略是浏览器的一个安全机制，用于限制跨域请求。同源策略要求请求的域名、端口和协议必须完全一致，否则浏览器会拒绝请求。这个机制的目的是防止恶意网站通过跨域请求获取用户的敏感信息。
jQuery 的跨域请求
jQuery 提供了 jQuery.ajax 方法来发送跨域请求。该方法使用了一种叫做 JSONP 的技术来实现跨域请求。JSONP（JSON with Padding）是一种利用 <script> 标签来加载跨域 JavaScript 的技术。通过使用 JSONP，我们可以绕过浏览器的同源策略限制。
下面是一个使用 jQuery 发送跨域请求的示例代码：
$.ajax({
url: "
dataType: "jsonp",
success: function(response) {
// 处理响应数据
},
error: function(xhr, status, error) {
// 处理错误信息
}
});
在上面的代码中，我们使用 $.ajax 方法发送一个跨域请求到 dataType参数为"jsonp"`，告诉 jQuery 使用 JSONP 技术来处理跨域请求。
在成功回调函数中，我们可以处理服务器返回的数据。在错误回调函数中，我们可以处理请求失败的情况。
跨域请求的限制
虽然 jQuery 提供了一种简单的方式来允许跨域请求，但是跨域请求仍然受到一些限制。
首先，服务器必须支持 JSONP 技术。JSONP 要求服务器返回的数据必须是一个函数调用，而不是简单的 JSON 数据。服务器需要根据请求的参数，返回一个包含数据的 JavaScript 函数调用。例如，服务器返回的数据可能是 callback({ "name": "John" }) 这样的形式。
其次，服务器需要在响应头中设置 Access-Control-Allow-Origin 字段，来允许特定的域名进行跨域请求。如果服务器没有设置该字段，浏览器将不会允许跨域请求。
实例：使用 jQuery 绘制饼状图
现在，让我们来看一个使用 jQuery 发送跨域请求并绘制饼状图的实例。
首先，我们需要一个用于显示饼状图的 HTML 元素：
<div id="piechart"></div>
然后，我们可以使用以下代码来发送跨域请求并绘制饼状图：
$.ajax({
url: "
dataType: "jsonp",
success: function(response) {
// 处理响应数据
drawPieChart(response);
},
error: function(xhr, status, error) {
// 处理错误信息
}
});
function drawPieChart(data) {
// 使用 Highcharts 绘制饼状图
Highcharts.chart('piechart', {
chart: {
type: 'pie'
},
title: {
text: '数据分布'
},
series: [{
name: '数据',
data: data
}]
});
}
