AJAX(Asynchronous JavaScript and XML)不是一个新的通信协议,而是一种使用现有通信协议的新方法。AJAX 能够在不刷新页面的情况下更新数据。它通过在后台与服务器进行少量数据交换,实现网页的异步更新。其核心是JavaScript、XMLHTTPRequest对象,还有其他Web技术的组合。
在AJAX中,通信协议使用的主要是HTTP协议,因为它是互联网上最常用的协议。AJAX可以使用GET或POST方法与服务器进行通信。
以下是使用JavaScript的XMLHttpRequest对象发送AJAX HTTP GET请求的示例:
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var json = JSON.parse(xhr.responseText);
console.log(json);
}
};
xhr.send();
以下是使用JavaScript的XMLHttpRequest对象发送AJAX HTTP POST请求的示例:
var xhr = new XMLHttpRequest();
xhr.open("POST", "https://api.example.com/data", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var json = JSON.parse(xhr.responseText);
console.log(json);
}
};
xhr.send("key1=value1&key2=value2");
在这两个示例中,我们创建了一个新的XMLHttpRequest对象,然后使用open()方法初始化一个请求。我们可以指定请求的类型(GET或POST),以及请求的URL。然后,我们设置了一个事件监听器,当readyState属性改变时触发,当请求完成并且响应已经完全接收时,我们解析响应并在控制台中记录它。
对于POST请求,我们还需要设置请求头,以告知服务器我们正在发送的数据类型。然后,我们使用send()方法发送数据。对于GET请求,我们不需要设置请求头,因为我们不发送任何数据,而是将数据添加到URL中。最后,我们在回调函数中解析响应并在控制台中记录它。