博客

【前端基础】动态脚本与JSONP

  • Post category:other

【前端基础】动态脚本与JSONP的完整攻略

动态脚本和JSONP是前端开发中常用的技术，可以帮助我们实现跨域请求数据和动态加载脚本等功能。本文将为您提供动态脚本和JSONP的完整攻略，包括以下内容：

  1. 动态脚本的使用方法
  2. JSONP的使用方法
  3. 示例说明

动态脚本的使用方法

动态脚本是通过JavaScript动态创建和加载脚本的技术。以下是动态脚本的使用方法：

  1. 创建一个script元素，并设置其src属性为要加载的脚本的URL。
  2. 将script元素添加到文档中，即可开始加载脚本。

以下是动态脚本的示例代码：

var script = document.createElement('script');
script.src = 'http://example.com/myscript.js';
document.head.appendChild(script);

JSONP的使用方法

JSONP是一种跨域请求数据的技术，它利用了script元素可以跨域加载脚本的特性。以下是JSONP的使用方法：

  1. 创建一个script元素，并设置其src属性为要请求的数据的URL，同时在URL中添加一个回调函数的参数。
  2. 在页面中定义一个与回调函数同名的函数，该函数将在数据加载完成后被调用，并将数据作为参数传递给它。

以下是JSONP的示例代码：

function handleData(data) {
  console.log(data);
}

var script = document.createElement('script');
script.src = 'http://example.com/data.json?callback=handleData';
document.head.appendChild(script);

在上面的示例中，我们请求了一个名为data.json的数据文件，并在URL中添加了一个名为callback的参数，该参数的值为我们在页面中定义的回调函数handleData。当数据加载完成后，服务器将调用该回调函数，并将数据作为参数传递给它。

示例说明

以下是两个使用动态脚本和JSONP的示例：

示例1：使用动态脚本加载jQuery库

var script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.6.0.min.js';
document.head.appendChild(script);

在上面的示例中，我们使用动态脚本加载了jQuery库。当脚本加载完成后，我们就可以在页面中使用jQuery了。

示例2：使用JSONP请求天气数据

function handleWeather(data) {
  console.log(data);
}

var script = document.createElement('script');
script.src = 'http://api.openweathermap.org/data/2.5/weather?q=London&appid=YOUR_APP_ID&callback=handleWeather';
document.head.appendChild(script);

在上面的示例中，我们使用JSONP请求了一个名为openweathermap的天气API，并在URL中添加了一个名为callback的参数，该参数的值为我们在页面中定义的回调函数handleWeather。当数据加载完成后，服务器将调用该回调函数，并将天气数据作为参数传递给它。

Tags: