XMLHTTPrequest对象、原理、以及常用的方法和属性

XMLHTTPrequest概念

XMLHTTPrequest是用于在浏览器中给服务器发送http请求和接收响应的javascript的api。它是Asynchronous JavaScript and XML的核心技术，通过它可以在不刷新页面的情况下与服务器进行数据交互，实现异步加载数据更新页面。

它的核心方法包括：

• open(method, url, async)：初始化一个请求。
• send(data)：发送请求。
• setRequestHeader(header, value)：设置请求头部信息。

除了上述方法， onreadystatechange 事件、readyState 属性以及 status 属性，用于监听请求状态变化并获取响应的状态码。

XMLHTTPrequest发送请求实例：

// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();

// 设置请求参数
xhr.open('POST', 'https://api.example.com/endpoint', true);
xhr.setRequestHeader('Content-Type', 'application/json');

// 监听事件，处理响应
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      // 请求成功
      var response = JSON.parse(xhr.responseText);
      console.log('响应数据:', response);
    } else {
      // 请求失败
      console.error('请求失败，状态码:', xhr.status);
    }
  }
};

// 创建要发送的数据
var data = {
  username: '6hao',
  password: '666'
};

// 将数据转换为 JSON 字符串
var jsonData = JSON.stringify(data);

// 发送请求
xhr.send(jsonData);

• xhr.readyState 的取值范围是 0 到 4，表示请求的不同状态：

  • 0: 未初始化
  • 1: 启动
  • 2: 发送
  • 3: 接收
  • 4: 完成

• xhr.status 表示响应的状态码，常见的状态码有：

  • 200: 请求成功
  • 404: 请求的资源未找到
  • 500: 服务器内部错误等

xhr.readyState 表示请求的状态码，xhr.status 表示响应的状态码。