XMLHttpRequest 教程展示了如何使用 XMLHttpRequest 在 JavaScript 中发出 HTTP 请求。
XMLHttpRequest
XMLHttpRequest 是一个内置的浏览器对象,允许在 JavaScript 中发出 HTTP 请求。 XMLHttpRequest API 提供客户端功能,用于在客户端和服务器之间传输数据。它提供了一种从 URL 检索数据的简单方法,而无需刷新整个页面。
因此,网页必须只更新页面的一部分,而不会中断用户正在做的事情。 XMLHttpRequest 在 AJAX 编程中大量使用。 XMLHttpRequest 以两种操作模式工作:同步和异步。尽管名称如此,但 XMLHttpRequest 可以对任何数据进行操作,而不仅仅是 XML。
XMLHttpRequest 示例
以下示例创建对测试站点的请求并返回当前日期时间。
let getJSON = (url, callback) => { let xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.responseType = 'json'; xhr.onload = () => { let status = xhr.status; if (status == 200) { callback(null, xhr.response); } else { callback(status); } }; xhr.send(); }; getJSON('http://time.jsontest.com', (err, data) => { if (err != null) { console.error(err); } else { let text = `Date: ${data.date} Time: ${data.time} Unix time: ${data.milliseconds_since_epoch}` console.log(text); } });
此示例使用XMLHttpRequest
读取JSON 数据。
let xhr = new XMLHttpRequest();
XMLHttpRequest
的新实例被创建。
xhr.open('GET', url, true);
open
方法初始化对指定 URL 的 GET 请求。第三个参数true
让它成为一个异步请求。
xhr.responseType = 'json';
responseType
值定义响应类型。
xhr.onload = function() { var status = xhr.status; if (status == 200) { callback(null, xhr.response); } else { callback(status); } };
在onload
方法中,我们等待服务器的响应。
xhr.send();
send
方法发送请求;默认情况下请求是异步的。
let text = `Date: ${data.date} Time: ${data.time} Unix time: ${data.milliseconds_since_epoch}` console.log(text);
我们将日期、时间和 Unix 时间记录到控制台。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Consume XML request</title> <script src="fetch_time.js"></script> </head> <body> </body> </html>
代码被加载到 HTML 页面中。在浏览器中加载页面后,我们会转到浏览器控制台,它在开发人员工具中可用。
在本文中,我们使用 XMLHttpRequest 在 JavaScript 中创建了一个 HTTP 请求。
列出所有 JavaScript 教程。