本文介绍如何利用 JSONP 技术解决在本地通过 AJAX 读取 JSON 文件时遇到的跨域错误。通过解析 script 标签不受同源策略限制的特性，阐述 JSONP 的工作原理，并提供具体的代码实现与注意事项，帮助开发者绕过浏览器安全限制获取数据。
前言与问题背景
前言
本文主要介绍如何利用 JSONP 技术解决在本地通过 JavaScript 读取 JSON 文件时遇到的跨域问题，分享相关实现方案供参考学习，接下来将详细介绍具体步骤。
一、问题描述
尝试通过 AJAX 方式读取本地 JSON 文件时，谷歌浏览器会提示跨域错误，导致无法获取到 JSON 数据。
 |
跨域报错.png
AJAX 获取 JSON 数据的代码示例如下：
$.ajax({
url: "file/employeejson.json",//json文件位置
type: "GET",//请求方式为get
dataType: "json", //返回数据格式为json
success: function(data) {//请求成功完成后要执行的方法
console.log(data);
}
})这段代码本身逻辑没有错误，但由于谷歌浏览器出于安全考虑，会拦截此类本地文件访问。不过，在火狐浏览器中该操作可以正常执行，读者可以尝试验证。
JSONP 解决跨域原理
二、解决跨域问题
采用 JSONP 方法来解决跨域限制（此方法仅适用于 GET 请求）。
实现原理如下：
<script> 标签不受同源策略的限制，它可以加载任意位置的 JavaScript 文件，无需遵循同源要求。
因此，JSONP 的核心思想是：客户端与服务端约定一个函数名。当客户端请求文件时，服务端返回一段 JavaScript 代码，这段代码会调用约定好的函数，并将数据作为参数传入。巧合的是（这也并非偶然），JSON 的数据格式与 JavaScript 中对象的格式完全一致，因此在约定的函数内部可以直接使用该对象。
具体代码实现如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSON文件的调用</title>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
</head>
<body>
</body>
<script>
//回调函数
function train (data){
console.log(data);
}
</script>
<!--jsonp中 需要注意的是
<script src="file/employeejson.json?cb=train"></script>
src ? 之前为文件地址，? 之后为回调函数callback名称，
回调函数可以简写为 cb , 然后 回调函数 名称要与JSON文件中的名称一致
可以在 对应的文件名中看下，如，employeejson.json?callback=train,employeejson.json的 函数名为 train-->
<script src="file/employeejson.json?cb=train"></script>
</html>
//JSON文件
train(
[
{
"name":"xx",
"id":"ww"
}
]
)关键注意事项
三、注意事项
- 必须确保在 JSON 文件外部使用函数名加括号的方式包裹数据；
- JavaScript 中的回调函数名称必须与 JSON 文件中定义的函数名保持一致；
总结
以上就是本文的全部内容，希望这些内容对大家的编程学习或工作有所帮助。如有疑问欢迎留言交流，感谢支持。