AJAX简介

Asynchronous JavaScript and XML

• AJAX是一种无需重新加载整个页面的情况下，能够更新部分网页的技术
• AJAX通过在后台与服务器交换数据，并能够更新部分网页内容

工作原理

1. 事件触发
   1. 如点击按钮或者页面加载
2. AJAX请求
   1. 通过JavaScript创建一个XMLHttpRequest对象，向服务器发送请求
3. 服务器处理请求
   1. 服务器（通常使用PHP、Node.js等）接收请求，处理并返回响应数据（JSON、XML、HTML等）
4. AJAX相应处理
   1. 浏览器接收响应，使用JavaScript在页面上更新内容，而无需重新加载整个页面

AJAX - 创建XMLHttpRequest对象

• XMLHttpRequest是AJAX的基础

XMLHttpRequest对象

• 所有现代浏览器均支持XMLHttpRequest对象
• XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新

创建XMLHttpRequest对象

• 创建XMLHttpRequest对象的语法：

  var xhr = new XMLHttpRequest();
  

• 老版本的Internet Explorer 使用ActiveX对象：

  var xhr = new ActiveXObject("Microsoft.XMLHTTP");
  

• 为了应对所有的现代浏览器，包括 IE5 和 IE6（现在应该很少人使用了），请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

  var xmlhttp;
  if (window.XMLHttpRequest) {
      //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
      xmlhttp=new XMLHttpRequest();
  } else {
      // IE6, IE5 浏览器执行代码
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  

• 示例

  // 创建 XMLHttpRequest 对象
  var xhr = new XMLHttpRequest();
  
  // 配置请求
  xhr.open('GET', '<https://api.example.com/data>', true);
  
  // 设置请求头（如果需要的话）
  // xhr.setRequestHeader('Content-Type', 'application/json');
  
  // 定义回调函数
  xhr.onload = function () {
      if (xhr.status >= 200 && xhr.status < 300) {
          // 请求成功，处理响应
          console.log('Response:', xhr.responseText);
      } else {
          // 处理错误
          console.error('Error:', xhr.statusText);
      }
  };
  
  // 处理网络错误
  xhr.onerror = function () {
      console.error('Request failed');
  };
  
  // 发送请求
  xhr.send();