AJAX 使用 JsonP 的 JavaScript XMLHttpRequest

在本文中，我们将介绍使用 AJAX 和 JsonP 进行数据交互的方法。AJAX（Asynchronous JavaScript and XML）是一种用于在后台与服务器进行异步通信的技术，而 JsonP（JSON with Padding）则是一种允许跨域请求的方法。通过结合使用 AJAX 和 JsonP，我们可以实现在网页上无需刷新页面的情况下获取数据并进行展示。

阅读更多：AJAX 教程

AJAX 的基本原理

AJAX 的基本原理是通过 JavaScript 中的 XMLHttpRequest 对象与服务器进行通信。通过使用 XMLHttpRequest 对象，我们可以在不刷新整个页面的情况下发送请求并获取服务器返回的数据。前端开发者可以使用 JavaScript 的方式来控制 AJAX 请求的发送和响应。

以下是一个简单的使用 AJAX 进行数据请求的示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      var data = JSON.parse(xhr.responseText);
      // 对返回的数据进行处理
    } else {
      // 处理请求失败的情况
    }
  }
};
xhr.send();

上述代码中，我们创建了一个 XMLHttpRequest 对象，并使用 open() 方法指定了请求的类型（GET）、请求的 URL（http://example.com/data）以及是否异步发送请求（true）。然后，我们使用 onreadystatechange 事件监听器来处理请求的响应。当请求状态改变时（readyState），我们可以通过判断状态码（status）来判断请求的成功与否。如果请求成功（status 为 200），我们可以使用 responseText 属性获取服务器返回的数据，并进行相应的处理。

然而，由于同源策略的限制，上述代码只能用于访问同一域名下的数据。如果需要访问不同域名下的数据，我们就需要使用到 JsonP。

JsonP 的原理与用法

JsonP 是通过动态创建