【JS基础笔记】之【AJAX】

4. AJAX

4.1 简介

• 功能：
  • 不刷新页面更新网页
  • 在页面加载后从服务器请求数据
  • 在页面加载后从服务器接收数据
  • 在后台向服务器发送数据

4.2 工作原理

1. 网页中发生一个事件（页面加载、按钮点击）
2. 由 JavaScript 创建 XMLHttpRequest 对象
3. XMLHttpRequest 对象向 web 服务器发送请求
4. 服务器处理该请求
5. 服务器将响应发送回网页
6. 由 JavaScript 读取响应
7. 由 JavaScript 执行正确的动作（比如更新页面）
   

4.3 XMLHttpRequest 对象

• XMLHttpRequest对象是Ajax 的核心。
• 所有现代浏览器都支持XMLHttpRequest对象。
• XMLHttpRequest对象用于同幕后服务器交换数据。

4.3.1 创建XMLHttpRequest 对象

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

4.3.2 XMLHttpRequest 对象方法

xmlhttp.open("POST", "test1.php", true);
// method：请求类型
// url：文件位置
// async：true（异步）或false（同步）
// GET方式："test_Get.php?q=" + str

xmlhttp.setRequestHeader(
        "Content-type",
        "application/x-www-form-urlencoded"
      );
// 添加请求头（post请求方式才需要添加）

xmlhttp.send("username=" + username + "&password=" + password);
// 发送数据

实例：https://blog.csdn.net/qq_44874645/article/details/119561259