前言

到B站找了视频看了，发现大多讲的不是很清楚，所以我觉得自己看文档，并把我认为适合学习的东西总结出来，希望也能帮到你了解Ajax。

因为我个人也是刚入门前端三个月，所以可能内容难免会有所差错，望各位读者不吝赐教。

学习资源：w3c文档（本来想看MDN的，但是目前英语水平略差，就看中文的好了。）

AJAX 简介

AJAX 是开发者的梦想，因为您能够：

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

什么是 AJAX？

AJAX = Asynchronous JavaScript And XML.

AJAX 并非编程语言。

AJAX 仅仅组合了：

浏览器内建的 XMLHttpRequest 对象（从 web 服务器请求数据）J
JavaScript 和 HTML DOM（显示或使用数据）

Ajax 是一个令人误导的名称。Ajax 应用程序可能使用 XML 来传输数据，但将数据作为纯文本或 JSON 文本传输也同样常见。

Ajax 允许通过与场景后面的 Web 服务器交换数据来异步更新网页。这意味着可以更新网页的部分，而不需要重新加载整个页面。

AJAX 如何工作

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

AJAX - XMLHttpRequest 对象

Ajax 的核心是 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象

为了应对所有浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，创建 XMLHttpRequest 对象，如果不支持，则创建 ActiveX 对象：

实例

var xhttp;
if (window.XMLHttpRequest) {
  xhttp = new XMLHttpRequest();
} else {
  // code for IE6, IE5
  xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

跨域访问

出于安全原因，现代浏览器不允许跨域访问。

这意味着尝试加载的网页和 XML 文件都必须位于相同服务器上。

如果您希望在自己的页面上使用以上实例，那么您所加载的 XML 文件必须位于您自己的服务器上。

XMLHttpRequest 对象方法

在这里插入图片描述

XMLHttpRequest 对象属性

在这里插入图片描述

AJAX - XMLHttpRequest

XMLHttpRequest 对象用于同服务器交换数据。

GET 还是 POST？

GET 比 POST 更简单更快，可用于大多数情况下。

不过，请在以下情况始终使用 POST：

缓存文件不是选项（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 无大小限制）
发送用户输入（可包含未知字符），POST 比 GET 更强大更安全

Get请求实例

xhttp.open("GET", "demo_get.asp", true);
xhttp.send();

在上面的例子中，您可能会获得一个缓存的结果。为了避免此情况，请向 URL 添加一个唯一的 ID：

xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();

异步 - ture 还是 false？

xhttp.open("GET", "ajax_test.asp", true);

onreadystatechange 属性

通过 XMLHttpRequest 对象，您可以定义当请求接收到应答时所执行的函数。

xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.responseText;
  }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();