DOM XMLHttpRequest

DOM XMLHttpRequest

概述

XMLHttpRequest（XHR）是JavaScript的一个对象，它可以在不刷新整个网页的情况下，从服务器请求数据。这使得网页可以异步更新，提高了用户体验。XHR最初由微软在Internet Explorer 5中引入，后来被其他浏览器采纳，并成为W3C标准的一部分。

使用场景

1. 动态内容加载

XHR最常见的用途是动态加载网页内容。例如，当用户填写表单时，可以使用XHR向服务器发送数据，并接收响应，而不需要重新加载整个页面。

2. 数据交互

XHR可以用于从服务器获取数据，并与前端JavaScript代码交互。例如，可以用来获取JSON或XML格式的数据，然后在前端进行解析和使用。

3. AJAX

XHR是实现AJAX（Asynchronous JavaScript and XML）技术的基础。AJAX允许网页在不重新加载的情况下，与服务器进行数据交换。

基本用法

1. 创建XHR对象

var xhr = new XMLHttpRequest();

2. 配置请求

xhr.open('GET', 'https://api.example.com/data', true);

3. 发送请求

xhr.send();

4. 处理响应

xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  }
};

进阶用法

1. POST请求

xhr.open('POST', 'https://api.example.com/data', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('key1=value1&key2=value2');

2. 处理JSON响应

xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    var data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};

3. 错误处理

xhr.onerror = function() {
  console.log('Request failed');
};

兼容性

XMLHttpRequest在现代浏览器中都有很好的支持。对于较旧的浏览器，可以使用ActiveXObject对象（仅限IE）。

var xhr;
if (window.XMLHttpRequest) {
  xhr = new XMLHttpRequest();
} else {
  xhr = new ActiveXObject('Microsoft.XMLHTTP');
}

总结

XMLHttpRequest是一个强大的工具，用于实现异步数据交换和动态内容加载。掌握XHR的基本用法和进阶技巧，可以帮助开发者构建更高效、更流畅的Web应用程序。