怎么过去外部js中的json数据

当你在网页制作或者应用开发中，经常会遇到需要从外部JavaScript文件中导入JSON数据的情况，JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成，在这篇文章里，我会带你了解如何将外部JS文件中的JSON数据引入到你的项目中，并进行有效利用。

让我们从基础开始，JSON数据通常以对象或数组的形式存在，它们可以包含字符串、数字、布尔值、数组以及嵌套的对象或数组，在外部JS文件中，你可以这样定义一个JSON对象：

var myData = {
  name: "John",
  age: 30,
  city: "New York"
};

或者是一个JSON数组：

var myArray = [
  { name: "John", age: 30, city: "New York" },
  { name: "Jane", age: 25, city: "Los Angeles" }
];

要将这些数据引入到你的HTML页面中，你需要使用<script>标签，这个标签允许你指定外部JS文件的路径，并且可以选择是否在文档加载时立即执行该脚本。

引入外部JS文件

你可以在HTML文档的<head>部分或者<body>结束标签之前添加<script>标签，如下所示：

<script src="path/to/your/external.js"></script>

这里的src属性指定了外部JS文件的路径，请确保路径是正确的，否则浏览器无法加载文件，你的JSON数据也就无法被引入。

使用JSON数据

一旦外部JS文件被加载，你就可以在同一个域下的任何JavaScript代码中访问这些JSON数据，如果你有一个函数需要处理这些数据，你可以这样写：

function processData() {
  console.log(myData.name); // 输出: John
  console.log(myArray[0].age); // 输出: 30
}

异步加载外部JS文件

如果你的外部JS文件很大，或者你希望在不阻塞页面渲染的情况下加载它，可以使用异步加载，这可以通过设置<script>标签的async属性来实现：

<script src="path/to/your/external.js" async></script>

添加async属性后，脚本会在后台异步加载，不会影响页面的解析，一旦脚本加载并解析完成，会立即执行，而不会等待其他脚本。

跨域问题

在实际应用中，你可能会从不同的域引入JSON数据，这时，你可能会遇到跨域资源共享（CORS）的问题，解决这个问题的一种方法是在服务器端设置CORS策略，允许你的域访问资源，另一种方法是使用JSONP（JSON with Padding），这是一种通过<script>标签实现跨域请求的技术。

JSONP的使用

JSONP通过动态创建<script>标签并设置其src属性为带有回调函数的URL来实现。

function handleData(data) {
  console.log(data);
}
var script = document.createElement('script');
script.src = 'http://example.com/data?callback=handleData';
document.head.appendChild(script);

在这个例子中，http://example.com/data是提供JSON数据的URL，callback=handleData指定了处理数据的回调函数，服务器需要特别处理这个请求，将JSON数据包裹在handleData函数调用中返回。