AJAX 和 JSONP 是前端开发中经常用到的两种技术，它们可以帮助我们在不刷新整个页面的情况下，向服务器请求数据并更新页面。在本文中，我们将详细介绍如何使用原生 JavaScript 实现 AJAX 和 JSONP 请求，并提供示例代码。
AJAX
AJAX（Asynchronous JavaScript and XML）是一种在后台与服务器交换数据的技术，能够在不刷新整个页面的情况下局部更新页面内容。使用 AJAX 技术可以提升用户体验，减少服务器压力，这也是为什么 AJAX 在现代 Web 开发中如此流行。
XMLHttpRequest 对象
XMLHttpRequest 是 AJAX 的核心对象，它可以发送 HTTP 请求和接收服务器响应。以下是一个简单的 AJAX 示例：
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.open('GET', '/api/data', true);
xhr.send();上面的代码创建了一个 XMLHttpRequest 对象，并指定了其 onreadystatechange 属性，当 readyState 的值改变时便会触发该函数。readyState 有五种状态，分别是 0（未初始化）、1（正在载入）、2（已载入）、3（交互中）、4（完成）。当 readyState 的值为 4 且 status 的值为 200 时，表示请求成功，可以通过 responseText 属性获取服务器返回的数据。
发送 POST 请求
除了 GET 请求，我们还可以发送 POST 请求，将数据传递给服务器。以下是一个发送 POST 请求的示例：
-- -------------------- ---- -------
----- --- - --- -----------------
---------------- ------------ ------
------------------------------------ --------------------
---------------------- - ---------- -
-- --------------- --- - -- ---------- --- ---- -
------------------------------
-
--
----- ---- - ---------------- ----- ------- ---- -- ---
---------------在这个示例中，我们将请求方法设置为 POST，并且通过 setRequestHeader 方法设置 Content-Type 为 application/json，表示请求体中的数据是 JSON 格式。然后使用 send 方法发送数据。
JSONP
JSONP（JSON with Padding）是一种跨域请求的方法，它利用动态创建 script 标签的方式来从其他域名获取数据。由于同源策略的限制，不能直接使用 AJAX 请求其他域名下的数据，因此需要使用 JSONP 技术来实现跨域请求。
实现原理
JSONP 的实现基于 script 标签的特性，当浏览器解析到 script 标签时，会立即向 src 属性指定的 URL 发送请求，并将响应作为脚本执行。因此，我们可以通过动态创建 script 标签的方式来请求其他域名下的数据，并将返回的数据作为参数传递给一个回调函数。
假设有一个 API 接口地址为 http://example.com/api/data?callback=callbackFunc，其中 callback 参数指定了回调函数的名称。当我们请求该接口时，服务器会返回一个 JavaScript 函数调用的形式，例如：
callbackFunc({ name: 'John', age: 30 });浏览器将会自动执行该函数，并将传入的参数作为数据处理。
示例代码
以下是一个使用原生 JavaScript 实现 JSONP 请求的示例：
-- -------------------- ---- -------
-------- ---------- --------- -
----- ------ - ---------------------------------
---------- - ----
----------------------------------
---------------- - -------------- -
----------------------------------
------ -----------------
---------------
--
-
-------------------------------------------------------- -------------- -
------------------
---在这个示例中，我们定义了一个 jsonp 函数，在该函数内部动态创建了一个 script 标签，并将 src 属性设置为
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/2348