解释 JSONP 的工作原理（以及它实际上并非 Ajax）| 附带解决方案的测验面试题

TL;DR

JSONP（带填充的 JSON）是一种用于克服 Web 浏览器中的同源策略的技术，允许您从不同域的服务器请求数据。它的工作原理是动态创建 <script> 标签，并将其 src 属性设置为数据源的 URL。服务器使用一个脚本进行响应，该脚本使用数据作为其参数调用预定义的 callback 函数。与 Ajax 不同，JSONP 不使用 XMLHttpRequest 对象，并且仅限于 GET 请求。

JSONP 的工作原理（以及它实际上并非 Ajax）

什么是 JSONP？

JSONP 代表带填充的 JSON。它是一种用于绕过 Web 浏览器中的同源策略的技术，该策略限制网页向提供该网页的域以外的域发出请求。

JSONP 的工作原理

动态脚本标签创建：动态创建 <script> 标签，并将其 src 属性设置为数据源的 URL，包括回调函数名称作为查询参数。
服务器响应：服务器使用一个脚本进行响应，该脚本调用回调函数，并将数据作为参数传递。
回调执行：浏览器执行脚本，使用数据调用回调函数。

这是一个简单的例子：

<!doctype html>
<html>
  <head>
    <title>JSONP Example</title>
    <script>
      function handleResponse(data) {
        console.log(data);
      }

      function fetchData() {
        var script = document.createElement('script');
        script.src = 'https://example.com/data?callback=handleResponse';
        document.body.appendChild(script);
      }
    </script>
  </head>
  <body>
    <button onclick="fetchData()">Fetch Data</button>
  </body>
</html>

在此示例中，当单击该按钮时，将创建一个 <script> 标签，其 src 属性设置为 https://example.com/data?callback=handleResponse。example.com 上的服务器将使用如下脚本进行响应：

handleResponse({
  name: 'John',
  age: 30,
});

JSONP 与 Ajax 的区别

传输机制：JSONP 使用 <script> 标签来获取数据，而 Ajax 使用 XMLHttpRequest 对象。
请求类型：JSONP 仅限于 GET 请求，而 Ajax 可以使用各种 HTTP 方法，如 GET、POST、PUT、DELETE 等。
同源策略：JSONP 可以绕过同源策略，而 Ajax 请求受其约束，除非使用 CORS（跨域资源共享）。
错误处理：与 Ajax 相比，JSONP 的错误处理能力有限。

JSONP 的局限性

安全风险：如果外部服务器受到破坏或恶意攻击，JSONP 可能会使您的应用程序面临跨站点脚本 (XSS) 攻击。
仅限于 GET 请求：JSONP 不能用于 POST 请求或其他 HTTP 方法。
错误处理：与 Ajax 相比，JSONP 缺乏强大的错误处理机制。

解释 JSONP 的工作原理（以及它实际上并非 Ajax）