AJAX JavaScript XMLHttpRequest 使用JsonP

在本文中，我们将介绍如何使用AJAX JavaScript XMLHttpRequest和JsonP来进行数据请求和响应处理。

阅读更多：AJAX 教程

AJAX

AJAX（Asynchronous JavaScript and XML）是一种用于创建快速、动态网页的技术。它允许网页与服务器进行异步数据交互，无需重新加载整个网页。

AJAX的核心是XMLHttpRequest对象，它可以从服务器异步获取数据，然后在不重新加载网页的情况下对数据进行更新。

以下是一个简单的AJAX请求的例子：

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.responseText;
  }
};
xhttp.open("GET", "example.php", true);
xhttp.send();

在这个例子中，我们创建了一个XMLHttpRequest对象，并通过open()方法指定了请求的类型、URL和是否异步。然后，我们使用send()方法发送请求。当服务器响应时，onreadystatechange事件被触发，我们可以通过检查readyState和status属性来获取响应数据，并对页面进行更新。

JavaScript XMLHttpRequest

XMLHttpRequest是AJAX的核心对象，用于发起HTTP请求并获取服务器响应。它提供了许多方法和属性来处理请求和响应。

以下是一些常用的XMLHttpRequest方法和属性：

open(method, url, async)：指定请求的类型、URL和是否异步。
send()：发送HTTP请求。
setRequestHeader(header, value)：设置HTTP请求头。
getResponseHeader(header)：获取指定HTTP响应头的值。
responseText：获取响应的文本。
status：获取响应的状态码。

var xhttp = new XMLHttpRequest();
xhttp.open("GET", "example.php", true);
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    console.log(this.responseText);
  }
};
xhttp.send();

在这个例子中，我们使用了open()方法指定了GET请求，然后发送请求并处理响应。当readyState为4（请求已完成）且status为200（成功）时，我们输出响应文本。

使用JsonP

JsonP（JSON with Padding）是一种绕过AJAX请求同源策略的方法。它利用了script标签没有同源策略限制的特点，可以从其他域获取数据。

以下是一个使用JsonP的例子：

function handleResponse(response) {
  document.getElementById("demo").innerHTML = response.name;
}

var script = document.createElement("script");
script.src = "https://example.com/api?callback=handleResponse";
document.head.appendChild(script);