Javascript笔试题目（三）
1.如何使用JS实现setTimeout功能来模拟setlnterva请写出具体代码
在JavaScript中，setTimeout 和 setInterval 是两个常用的定时器函数，但它们的行为有所不同。setTimeout 用于在指定的延迟后执行一次代码，而 setInterval 则用于每隔指定的时间间隔重复执行代码。
虽然 setInterval 更适合用于需要重复执行的任务，但有时我们可能希望通过 setTimeout 来模拟 setInterval 的行为。这可以通过在 setTimeout 的回调函数中再次调用 setTimeout 来实现。
以下是一个使用 setTimeout 来模拟 setInterval 功能的示例代码：
// 模拟 setInterval 的函数
function customSetInterval(callback, delay) {
// 定义一个内部函数来递归调用 setTimeout
function repeat() {
// 执行传入的回调函数
callback();
// 在延迟后再次调用 repeat 函数，以模拟 setInterval 的重复执行
setTimeout(repeat, delay);
}
// 首次调用 repeat 函数以启动定时器
setTimeout(repeat, delay);
}
// 示例用法：每隔 1000 毫秒（1 秒）打印一次消息
customSetInterval(function() {
console.log('This message is printed every second.');
}, 1000);在这个示例中，customSetInterval 函数接受两个参数：一个是要执行的回调函数 callback，另一个是时间间隔 delay（以毫秒为单位）。它内部定义了一个名为 repeat 的函数，该函数会调用传入的回调函数，并使用 setTimeout 来安排自己的下一次执行。这样，repeat 函数就会每隔指定的时间间隔被调用一次，从而模拟了 setInterval 的行为。
需要注意的是，使用 setTimeout 模拟 setInterval 时，由于每次调用 setTimeout 都会有一定的延迟（尽管这个延迟通常非常小），所以实际的时间间隔可能会比指定的值稍微大一些。此外，如果回调函数执行时间过长，也可能会导致下一次调用被延迟。在大多数情况下，这种差异是可以忽略不计的，但在对时间精度要求非常高的场景下，使用 setInterval 可能会更加合适。
防抖节流与setTimeout√setIntervl×
setInterval和setTimeout是 JavaScript 中用于定时执行任务的两个函数，而节流（throttle）和防抖（debounce）是两种优化高频率事件触发场景的技术。尽管它们在某些方面有相似之处，但setInterval、setTimeout与节流、防抖并不是直接对应的。setInterval 和 setTimeout
setInterval：用于每隔固定的时间间隔重复执行某个任务。它无法处理任务执行所需时间超过间隔的情况，这可能导致任务堆积或延迟。setTimeout：用于在指定的延迟后执行一次任务。它更灵活，可以用于创建基于时间的延迟或一次性任务。节流（Throttle）
节流是一种限制函数执行频率的技术，确保函数在指定的时间间隔内只执行一次。它常用于处理如滚动、窗口大小调整等频繁触发的事件，以防止性能问题。
防抖（Debounce）
防抖是一种限制函数在短时间内被频繁调用的技术。它确保只有在最后一次调用后的一段时间内没有新的调用时，才执行该函数。这常用于处理如输入框输入、按钮点击等事件，以减少不必要的计算或操作。
关系与区别
setInterval与节流：虽然节流可以限制函数执行的频率，但它不是通过简单地重复执行来实现的。节流通常使用定时器（如setTimeout）来确保在指定的时间间隔内只执行一次任务，但它会根据任务的执行时间和触发事件的频率动态调整。setTimeout与防抖：防抖的实现确实经常使用setTimeout来延迟函数的执行，直到没有新的触发事件为止。然而，防抖不仅仅是一个简单的setTimeout调用，它还需要一种机制来取消之前的定时器，并在新的触发事件发生时重新设置它。因此，虽然
setInterval和setTimeout可以用于实现节流和防抖的效果，但它们本身并不等同于这两种技术。节流和防抖是更高级的函数式编程概念，它们通过更复杂的逻辑来优化事件处理，以减少不必要的计算和资源消耗。
2.如何使用JS实现一个模板引擎的功能?请写出具体代码
let template = '我是{{name}}，年龄{{age}}，性别{{sex}}';
let data = { name: '姓名', age: 18 }
render(template, data); // 我是姓名，年龄18，性别undefined
function render(template, data) { //code here }
要实现一个简单的模板引擎功能，你可以使用正则表达式来查找模板字符串中的占位符（如 {{name}}、{{age}} 等），并用提供的数据对象中的相应值来替换它们。以下是一个实现这种功能的 render 函数：
let template = '我是{{name}}，年龄{{age}}，性别{{sex}}';
let data = {
name: '姓名',
age: 18
};
function render(template, data) {
// 使用正则表达式匹配模板中的占位符，如 {{key}}
const regex = /{{([\w]+)}}/g;
// 使用 replace 方法替换匹配到的占位符
return template.replace(regex, (match, key) => {
// 从 data 对象中获取对应的值，如果未定义则返回 ''
return data.hasOwnProperty(key) ? data[key] : '';
});
}
console.log(render(template, data)); // 输出：我是姓名，年龄18，性别undefined在这个实现中：
-
正则表达式
/{{([\w]+)}}/g用于匹配模板字符串中的占位符。这里的[\w]+匹配一个或多个字母、数字或下划线，这通常是占位符中的键名。 -
template.replace(regex, (match, key) => { ... })方法用于替换所有匹配的占位符。match是整个匹配的占位符（如{{name}}），key是通过正则表达式捕获组提取的键名（如name）。replace()方法会对每个匹配项调用回调函数 -
在箭头函数中，
data.hasOwnProperty(key) ? data[key] : ''用于检查data对象中是否存在该键名，如果存在则返回对应的值，否则返回空字符串''。 -
最后，
render函数返回替换后的模板字符串。
这个简单的模板引擎不支持复杂的逻辑或循环，但它足够用于基本的字符串替换任务。如果你需要更强大的模板引擎功能，可以考虑使用现有的库，如 Handlebars、Mustache 或 EJS。
3.如何使用JS实现一个下划线（gis_jing)驼峰(gisJing)相互转换的函数?请写出具体代码
在 JavaScript 中，你可以编写函数来实现下划线命名法（snake_case）和驼峰命名法（camelCase）之间的相互转换。以下是一个具体的实现，包括两个函数：一个用于将下划线命名法转换为驼峰命名法，另一个用于将驼峰命名法转换为下划线命名法。
// 下划线命名法转换为驼峰命名法
function snakeToCamel(str) {
return str.replace(/_(\w)/g, function(match, group1) {
return group1.toUpperCase();
});
}
// 驼峰命名法转换为下划线命名法
function camelToSnake(str) {
return str.replace(/[A-Z]/g, function(match) {
return '_' + match.toLowerCase();
}).replace(/^_/, ''); // 去除字符串开头的下划线（如果有的话）
}
// 测试
let snakeCaseStr = 'this_is_a_test_string';
let camelCaseStr = 'thisIsATestString';
console.log(snakeToCamel(snakeCaseStr)); // 输出: thisIsATestString
console.log(camelToSnake(camelCaseStr)); // 输出: this_is_a_test_string解释
- snakeToCamel 函数
- 使用正则表达式
/_(\w)/g来匹配下划线及其后面的一个字母。 - 在回调函数中，将匹配到的字母（
group1）转换为大写，并返回。这样就实现了将下划线后面的字母大写，从而转换为驼峰命名法。
- 使用正则表达式
- camelToSnake 函数
- 使用正则表达式
/[A-Z]/g来匹配所有大写字母。 - 在回调函数中，将匹配到的大写字母转换为小写，并在其前面加上下划线。
- 使用
.replace(/^_/, '')来去除字符串开头的下划线（这是因为在转换第一个大写字母时会在前面加上一个不必要的下划线）。
- 使用正则表达式
这两个函数可以相互转换下划线命名法和驼峰命名法，适用于变量名、函数名或任何需要这两种命名风格之间转换的场景。
4.如何使用JS实现一个JSON.stringify函数?请写出具体代码
在 JavaScript 中，实现一个类似于 JSON.stringify 的函数需要递归地遍历对象的属性，并将它们转换为 JSON 格式的字符串。以下是一个简化的 myJSONStringify 函数实现，它支持对象、数组、字符串、数字、布尔值和 null 的转换，但不包括一些高级功能，如处理函数、undefined、Symbol、循环引用或日期对象等。
function myJSONStringify(value, replacer, space) {
// 处理 replacer 函数或数组
if (typeof replacer === 'function') {
value = replacer(value, '');
} else if (Array.isArray(replacer)) {
const keys = Object.keys(value);
const filtered = {};
for (const key of replacer) {
if (keys.includes(key)) {
filtered[key] = value[key];
}
}
value = filtered;
}
// 处理 space 参数
const indent = (typeof space === 'number' ? ' '.repeat(space) : space || '') || '';
const newline = typeof space === 'number' || typeof space === 'string' ? '\n' : '';
// 处理基本数据类型
if (value === null) {
return 'null';
} else if (typeof value === 'string') {
return '"' + value.replace(/\\/g, '\\\\').replace(/"/g, '\\"') + '"';
} else if (typeof value === 'number' || typeof value === 'boolean') {
return String(value);
}
// 处理对象或数组
if (Array.isArray(value)) {
const elements = [];
for (const element of value) {
elements.push(myJSONStringify(element, replacer, space));
}
return '[' + (newline + indent + indent + elements.join(',' + newline + indent + indent) + newline + indent) + ']';
} else if (typeof value === 'object') {
const entries = [];
for (const key in value) {
if (value.hasOwnProperty(key)) {
entries.push(myJSONStringify(key, replacer, space) + ':' + (newline + indent + indent + myJSONStringify(value[key], replacer, space)));
}
}
return '{' + (newline + indent + indent + entries.join(',' + newline + indent + indent) + newline + indent) + '}';
}
// 处理无法转换的值（如函数、undefined、Symbol）
throw new TypeError('Converting circular structure to JSON'); // 这里简单地抛出一个错误，实际情况可能需要更复杂的处理
}
// 测试
const obj = {
name: "John",
age: 30,
isStudent: false,
scores: [85, 90, 92],
address: {
city: "New York",
zipcode: "10001"
}
};
console.log(myJSONStringify(obj, null, 2));
/*
输出：
{
"name": "John",
"age": 30,
"isStudent": false,
"scores": [
85,
90,
92
],
"address": {
"city": "New York",
"zipcode": "10001"
}
}
*/注意：
-
这个实现没有处理循环引用，如果尝试转换包含循环引用的对象，它会抛出一个
TypeError。在实际应用中，你可能需要实现一个检测循环引用的机制。 -
这个实现也没有处理
undefined、函数、Symbol和其他特殊对象类型。JSON.stringify会忽略undefined值、函数和Symbol，并且会抛出错误或转换为null（对于包含这些值的对象）。 -
replacer参数的实现是简化的，它只支持函数和数组形式。JSON.stringify的replacer参数更加复杂，可以是一个函数，用于对每个键值对进行过滤或转换，也可以是一个数组，只包含要包含在结果中的属性名。 -
space参数用于美化输出，可以是数字（表示缩进的空格数）或字符串（表示缩进的字符串）。这个实现支持这两种形式。
5.如何使用JS实现一个JSON.parser函数?请写出具体代码
在 JavaScript 中，实现一个类似于 JSON.parse 的函数（我们称之为 myJSONParse）是一个相当复杂的任务，因为你需要处理 JSON 字符串中的各种数据类型（对象、数组、字符串、数字、布尔值、null），以及处理嵌套结构和可能的语法错误。然而，为了简化起见，我们可以编写一个基本的解析器，它能够处理一些常见的 JSON 格式。但请注意，这个解析器将不会处理所有可能的 JSON 边缘情况，也不会像原生的 JSON.parse 那样健壮和高效。
以下是一个简化版的 myJSONParse 函数，它能够解析简单的 JSON 对象和数组：
function myJSONParse(jsonString) {
// 移除字符串两端的空白字符
jsonString = jsonString.trim();
// 处理空字符串或null的情况
if (jsonString === '' || jsonString === 'null') {
return null;
}
// 处理数字（包括整数和小数）
if (!isNaN(jsonString) && !jsonString.includes('{') && !jsonString.includes('[') && !jsonString.includes('"')) {
return Number(jsonString);
}
// 处理布尔值
if (jsonString === 'true') {
return true;
}
if (jsonString === 'false') {
return false;
}
// 处理字符串（只考虑双引号包裹的字符串，且不考虑转义字符）
if (jsonString.startsWith('"') && jsonString.endsWith('"')) {
// 这里应该处理转义字符，但为了简化，我们省略了这一步
return jsonString.slice(1, -1);
}
// 处理对象和数组（只考虑简单的、没有嵌套函数或特殊字符的情况）
let result;
let i = 0;
// 检查是对象还是数组
if (jsonString.startsWith('{')) {
result = {};
let key = '';
let isValue = false;
while (i < jsonString.length) {
const char = jsonString[i];
if (char === '"') {
// 开始或结束一个键或字符串值
let j = i + 1;
while (jsonString[j] !== '"' && j < jsonString.length) {
j++;
}
const valuePart = jsonString.slice(i + 1, j);
if (!isValue) {
key = valuePart;
isValue = true;
} else {
// 这里应该调用递归的myJSONParse来处理嵌套的值，但为了简化，我们假设所有值都是字符串
result[key] = valuePart; // 注意：这里应该使用递归调用myJSONParse，但在此示例中省略
isValue = false;
// 跳过逗号（如果有的话），并找到下一个键或结束的大括号
i = j + 1;
while (jsonString[i] === ',') {
i++;
}
if (jsonString[i] === '}') {
break;
}
}
}
if (char === '}') {
break;
}
i++;
}
} else if (jsonString.startsWith('[')) {
result = [];
let isValue = false;
let arrayElement;
while (i < jsonString.length) {
const char = jsonString[i];
if (char === '"' || (char >= '0' && char <= '9') || char === '-' || char === '.') {
// 开始一个值（数字或字符串，这里简化处理）
let j = i;
// 找到值的结束位置（简化处理，不考虑逗号后面的空格）
while (j < jsonString.length && !(jsonString[j] === ',' || jsonString[j] === ']')) {
j++;
}
const valuePart = jsonString.slice(i, j).trim();
// 这里应该调用递归的myJSONParse来处理嵌套的值，但为了简化，我们假设所有值都是字符串或数字（直接返回）
arrayElement = !isNaN(valuePart) ? Number(valuePart) : valuePart.startsWith('"') ? valuePart.slice(1, -1) : valuePart;
// 注意：这里应该使用递归调用myJSONParse，但在此示例中省略，直接添加到数组中（对于数字字符串，我们将其转换为数字）
result.push(arrayElement);
isValue = true;
// 跳过逗号（如果有的话），并继续查找下一个值或结束的大括号
i = j;
if (jsonString[i] === ',') {
i++;
} else if (jsonString[i] === ']') {
break;
}
} else {
i++;
}
}
} else {
throw new SyntaxError('Unexpected token ' + jsonString[0] + ' in JSON at position 0');
}
// 注意：这个简化版的解析器有很多限制和错误处理不足的地方，比如它不能处理带有转义字符的字符串、嵌套的对象和数组、布尔值以外的其他类型（除了数字和字符串）、以及JSON格式错误的情况。
// 在实际应用中，你应该使用JavaScript内置的JSON.parse方法，或者使用一个成熟的JSON解析库。
return result;
}
// 测试案例（注意：这个测试案例只针对简化版的解析器，它不能处理所有有效的JSON字符串）
const jsonString = '{"name": "John", "age": 30, "isStudent": false, "scores": [85, 90, 92]}';
try {
const parsedObject = myJSONParse(jsonString);
console.log(parsedObject);
} catch (e) {
console.error(e.message);
}重要提示：
-
这个
myJSONParse函数是一个极度简化的版本，它不能正确处理包含转义字符的字符串、嵌套的对象和数组、null值、以及JSON格式错误的情况。 -
在实际应用中，你应该始终使用 JavaScript 内置的
JSON.parse方法来解析 JSON 字符串，因为它能够处理所有有效的 JSON 格式，并且提供了更好的错误处理和性能。 -
如果你需要编写一个自定义的 JSON 解析器（例如，用于学习目的或处理特定格式的 JSON），你应该深入研究 JSON 的语法规则，并编写一个能够正确处理所有边缘情况的解析器。这通常是一个复杂且容易出错的任务，因此不建议在生产环境中使用自定义的解析器。
6.如何使用JS实现红黄绿三个灯不断交替重复亮灯?请写出具体代码，要求3s亮一次、黄灯2s亮一次、绿灯1s亮一次
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Traffic Light Simulation</title>
<style>
.light {
width: 50px;
height: 50px;
border-radius: 50%;
margin: 10px;
display: inline-block;
}
#red { background-color: red; }
#yellow { background-color: yellow; }
#green { background-color: green; }
.hidden { display: none; }
</style>
</head>
<body>
<div id="red" class="light"></div>
<div id="yellow" class="light hidden"></div>
<div id="green" class="light hidden"></div>
<script>
function showLight(lightId, duration) {
const light = document.getElementById(lightId);
light.classList.remove('hidden');
// 使用setTimeout在duration毫秒后隐藏当前灯并显示下一个灯
setTimeout(() => {
light.classList.add('hidden');
nextLight(lightId);
}, duration);
}
function nextLight(currentLightId) {
let nextLightId;
switch (currentLightId) {
case 'red':
nextLightId = 'yellow';
break;
case 'yellow':
nextLightId = 'green';
break;
case 'green':
nextLightId = 'red';
break;
}
// 根据灯的亮起时间显示下一个灯
const durations = {
'red': 3000, // 红灯3秒
'yellow': 2000, // 黄灯2秒
'green': 1000 // 绿灯1秒
};
showLight(nextLightId, durations[nextLightId]);
}
// 从红灯开始
nextLight(''); // 这里传入一个空字符串是为了处理首次调用时没有上一个灯的情况
// 注意：由于nextLight函数内部会处理灯的顺序，所以首次调用时传入任何非灯ID的值都是可以的，
// 但为了代码清晰，我们传入一个空字符串来表示这是一个特殊的首次调用。
// 实际上，你也可以直接调用 showLight('red', 3000); 来开始循环。
</script>
</body>
</html>
——————————————————————————————————————————————————————————————————————————————————
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Traffic Light Simulation</title>
<style>
/* 样式可以根据需要调整，这里仅作为示例 */
.light {
width: 50px;
height: 50px;
border-radius: 50%;
margin: 10px;
display: inline-block;
opacity: 0; /* 初始时隐藏所有灯 */
transition: opacity 0.5s; /* 添加过渡效果 */
}
#red.active { background-color: red; opacity: 1; }
#yellow.active { background-color: yellow; opacity: 1; }
#green.active { background-color: green; opacity: 1; }
</style>
</head>
<body>
<div id="red" class="light"></div>
<div id="yellow" class="light"></div>
<div id="green" class="light"></div>
<script>
function red() {
console.log('red');
showLight('red', 3000, green);
}
function green() {
console.log('green');
showLight('green', 1000, yellow);
}
function yellow() {
console.log('yellow');
showLight('yellow', 2000, red);
}
function showLight(lightId, duration, nextFunction) {
// 隐藏所有灯
const lights = document.querySelectorAll('.light');
lights.forEach(light => {
light.classList.remove('active');
});
// 显示当前灯
const currentLight = document.getElementById(lightId);
currentLight.classList.add('active');
// 使用setTimeout在延时后调用下一个函数
setTimeout(() => {
nextFunction();
}, duration);
}
// 从红灯开始循环
document.addEventListener('DOMContentLoaded', () => {
red();
});
</script>
</body>
</html>7.如何基于XMLHttpRequest对象实现AJAX请求?请写出具体代码
// 创建一个XMLHttpRequest实例
var xhr = new XMLHttpRequest();
// 配置请求：GET方法，请求的URL
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);
// 设置响应类型（可选，默认为空字符串，表示服务器返回什么类型就接受什么类型）
xhr.responseType = 'json'; // 这里我们期望服务器返回JSON格式的数据
// 定义当请求完成并且响应已就绪时要调用的函数
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) {
// 请求成功，处理响应数据
var responseData = xhr.response; // 由于设置了responseType为'json'，这里直接得到JSON对象
console.log(responseData);
// 例如，将响应数据显示在页面上
document.getElementById('responseDiv').innerText = JSON.stringify(responseData, null, 2);
} else {
// 请求失败，处理错误
console.error('The request failed with status ' + xhr.status + ': ' + xhr.statusText);
}
};
// 定义当请求发生错误时要调用的函数（可选，但推荐设置）
xhr.onerror = function() {
console.error('An error occurred during the request.');
};
// 发送请求（对于GET请求，没有请求体，所以这里不需要传递任何数据）
xhr.send();
————————————————————————————————————————————————————————————————————————————————————————
// 创建一个XMLHttpRequest实例
var xhr = new XMLHttpRequest();
// 配置请求：POST方法，请求的URL
xhr.open('POST', 'https://example.com/api/data', true);
// 设置请求头（如果需要的话，比如设置Content-Type）
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
// 定义当请求完成并且响应已就绪时要调用的函数
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) {
// 请求成功，处理响应数据
var responseData = JSON.parse(xhr.responseText); // 解析服务器返回的JSON响应
console.log(responseData);
// 例如，将响应数据显示在页面上
document.getElementById('responseDiv').innerText = JSON.stringify(responseData, null, 2);
} else {
// 请求失败，处理错误
console.error('The request failed with status ' + xhr.status + ': ' + xhr.statusText);
}
};
// 定义当请求发生错误时要调用的函数（可选，但推荐设置）
xhr.onerror = function() {
console.error('An error occurred during the request.');
};
// 准备要发送的数据（这里将表单数据转换为JSON格式）
var formData = new FormData(document.getElementById('dataForm'));
var postData = {
name: formData.get('name'),
age: formData.get('age')
};
var jsonData = JSON.stringify(postData);
// 发送请求并传递数据
xhr.send(jsonData);
8.如何使用JS实现基于Promise的AJAX请求封装?请写出具体代码
function ajax(method, url, data = null, headers = {}) {
return new Promise((resolve, reject) => {
// 创建一个XMLHttpRequest实例
const xhr = new XMLHttpRequest();
// 初始化请求
xhr.open(method, url, true);
// 设置请求头（如果需要的话）
for (let key in headers) {
if (headers.hasOwnProperty(key)) {
xhr.setRequestHeader(key, headers[key]);
}
}
// 定义当请求完成并且响应已就绪时要调用的函数
xhr.onload = function() {
// 检查请求是否成功
if (xhr.status >= 200 && xhr.status < 300) {
// 请求成功，解析响应数据并调用resolve
try {
const responseData = JSON.parse(xhr.responseText);
resolve(responseData);
} catch (error) {
// 如果解析JSON失败，则调用reject
reject(new Error('Failed to parse response as JSON'));
}
} else {
// 请求失败，调用reject并传递错误信息
reject(new Error(`Request failed with status ${xhr.status}: ${xhr.statusText}`));
}
};
// 定义当请求发生错误时要调用的函数
xhr.onerror = function() {
// 请求过程中发生错误，调用reject并传递错误信息
reject(new Error('An error occurred during the request.'));
};
// 设置请求体（如果是POST或PUT等需要发送数据的请求）
const contentType = headers['Content-Type'] || 'application/x-www-form-urlencoded';
let requestBody = null;
if (data !== null && contentType.includes('application/json')) {
requestBody = JSON.stringify(data);
} else if (data !== null && contentType.includes('application/x-www-form-urlencoded')) {
requestBody = new URLSearchParams(data).toString();
}
// 发送请求
xhr.send(requestBody);
});
}
// 使用示例
ajax('GET', 'https://jsonplaceholder.typicode.com/posts/1')
.then(response => {
console.log('Success:', response);
})
.catch(error => {
console.error('Error:', error);
});
// POST请求示例
const postData = {
title: 'foo',
body: 'bar',
userId: 1
};
const headers = {
'Content-Type': 'application/json'
};
ajax('POST', 'https://jsonplaceholder.typicode.com/posts', postData, headers)
.then(response => {
console.log('Post Success:', response);
})
.catch(error => {
console.error('Post Error:', error);
});9.如何使用JS实现jsonp请求?请写出具体代码
JSONP
JSONP（JSON with Padding）是一种非官方的跨域数据交换协议，它允许网页从不同域名（服务器）请求数据，而不必受到同源策略（Same-Origin Policy）的限制。同源策略是浏览器的一个安全功能，它阻止网页向与其不同源的服务器发送请求或接收响应，以防止恶意网站窃取敏感信息。
JSONP的工作原理是通过在
<script>标签的src属性中包含一个URL来动态加载脚本。这个URL通常指向一个返回JSON格式数据的服务器端脚本。但是，由于直接返回JSON数据会导致跨域问题，JSONP通过在响应数据中包裹一个函数调用，来绕过这个限制。具体来说，JSONP请求包含以下几个步骤：
客户端定义回调函数：在客户端（通常是浏览器），开发者定义一个全局函数，这个函数将作为回调函数来接收服务器返回的数据。
发送JSONP请求：客户端通过创建一个
<script>标签，并将其src属性设置为包含回调函数名和查询参数的URL，来发起JSONP请求。这个URL指向一个服务器端脚本，该脚本负责处理请求并返回数据。服务器端处理请求：服务器端脚本接收到请求后，解析查询参数中的回调函数名，然后将数据作为参数传递给这个函数，并生成一个JavaScript代码片段。这个代码片段调用了客户端定义的回调函数，并将数据作为参数传递给它。
客户端接收响应：当
<script>标签被加载时，它会执行服务器返回的JavaScript代码片段，这导致客户端定义的回调函数被调用，并且服务器返回的数据作为参数传递给了这个函数。处理响应数据：在回调函数中，开发者可以访问和处理服务器返回的数据。
需要注意的是，JSONP有几个重要的限制和安全问题：
- 只能使用GET请求：由于JSONP是通过
<script>标签的src属性来发起请求的，因此它只能使用GET方法，而不能使用POST或其他HTTP方法。- 全局函数命名冲突：JSONP依赖于全局函数来处理响应数据，这可能导致命名冲突，特别是当页面上有多个JSONP请求时。
- 安全风险：由于JSONP请求是通过加载脚本的方式来实现的，因此它容易受到XSS（跨站脚本攻击）等安全威胁。如果服务器被恶意攻击者控制，它可能会返回恶意的JavaScript代码，从而危害用户的安全。
因此，在现代Web开发中，JSONP已经被CORS（跨源资源共享）和fetch API等更安全和更灵活的技术所取代。这些技术提供了更好的跨域数据交换解决方案，并且不需要在客户端和服务器端之间进行特殊的约定或处理。
JSONP（JSON with Padding）是一种跨域请求数据的解决方案，它允许网页从另一个域名（服务器）请求数据，而不需要使用CORS（跨源资源共享）或代理服务器。JSONP通过在URL中添加一个回调函数名，并在服务器响应中包含该回调函数的调用来实现。
以下是一个使用原生JavaScript实现JSONP请求的示例代码：
// 定义一个全局的回调函数，用于接收JSONP响应
window.jsonpCallback = function(data) {
console.log('JSONP response:', data);
// 在这里处理响应数据
};
// 创建一个函数来发起JSONP请求
function jsonp(url, callbackName = 'callback', params = {}) {
// 将参数转换为查询字符串
const queryString = Object.keys(params)
.map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
.join('&');
// 如果URL中已经有查询字符串，则添加&；否则添加?
const fullUrl = url.includes('?') ? `${url}&${queryString}` : `${url}?${queryString}`;
// 在URL中添加回调函数名
const jsonpUrl = `${fullUrl}&${callbackName}=jsonpCallback`;
// 创建一个script元素来发起JSONP请求
const script = document.createElement('script');
script.src = jsonpUrl;
// 将script元素添加到DOM中，这将触发请求
document.body.appendChild(script);
// 监听脚本加载完成事件（注意：这里不处理错误，因为JSONP没有标准的错误处理机制）
script.onload = function() {
// 可以在这里做一些清理工作，比如移除script元素
document.body.removeChild(script);
};
// 注意：由于JSONP的异步性质，我们不能直接返回数据。相反，我们依赖全局回调函数来处理响应。
}
// 使用示例
jsonp('https://example.com/data', 'cb', { foo: 'bar' });
// 需要注意的是，上面的代码假设服务器会返回如下格式的响应：
// jsonpCallback({ "key": "value" });
// 并且服务器必须支持JSONP，即接受callback参数并在响应中调用它。
// 由于安全原因，现代Web开发中更推荐使用CORS或fetch API（配合适当的服务器配置）来处理跨域请求。
// JSONP已经逐渐被淘汰，因为它依赖于全局函数，这可能导致命名冲突和安全问题。重要提示：
- JSONP依赖于
<script>标签的src属性来发起请求，并且由于<script>标签的加载是异步的，因此JSONP请求也是异步的。 - JSONP没有标准的错误处理机制。如果请求失败或服务器返回无效数据，全局回调函数可能不会被调用，或者会抛出错误。
- 由于JSONP使用全局函数来处理响应，这可能导致命名冲突，特别是当页面上有多个JSONP请求时。
- 出于安全考虑，现代Web开发中更推荐使用CORS（跨源资源共享）或fetch API（配合适当的服务器配置）来处理跨域请求。这些技术提供了更好的安全性和灵活性。
原文地址：https://blog.csdn.net/m0_55049655/article/details/142888128
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！