浅谈AJAX

什么是AJAX？

AJAX(Asynchronous JavaScript and XML)，中文叫做:异步的JavaScript和XML。这是一种 Web 交互方法

AJAX说白了，就是”服务器和客户端之间是如何交流的？“

这是一种“老技术，新用法”。它最早是2005年由"AJAX之父"Jesse James Garrett提出。

实际上，它是由几项已经存在的技术组合而成的。AJAX技术包含了JavaScript、XML、CSS、XTSL、DOM、HTML/XHML和XMLHttpRequest 七种技术，这些技术通过AJAX联合起来，取长补短。

AJAX 允许只更新一个 HTML 页面的部分 DOM（文档对象模型：当网页被加载时，浏览器会创建页面的文档对象模型），而无须重新加载整个页面。AJAX 还允许异步工作，这意味着当网页的一部分正试图重新加载时，你的代码可以继续运行（相比之下，同步会阻止代码继续运行，直到这部分的网页完成重新加载）。

通过XMLHttpRequest（XHR）对象与服务器进行交互 (通过XMLHttpRequest可以在不刷新页面的情况下请求特定 URL，获取数据。尽管名称如此，XMLHttpRequest 可以用于获取任何类型的数据，而不仅仅是 XML。它甚至支持 HTTP 以外的协议（包括 file:// 和 FTP），尽管可能受到更多出于安全等原因的限制。)
XHR请求的数据不是页面
XHR可以连续向服务器发送请求（即支持异步操作）

首先建立 XMLHttpRequest 对象，目的是需要一个包含功能的对象实例去使用Javascript去向服务器发送 HTTP 请求

const httpRequest = new XMLHttpRequest();

发送请求后就会有响应。此时，需要告诉 XMLHttpRequest 对象哪个Javascript函数去处理响应，并设置了对象的 onreadystatechange 属性后给它命名，当请求状态改变时调用函数

function handler() {
  // 在这里处理服务器响应。
}

httpRequest.onreadystatechange = handler;//引用赋值给函数

要注意的是，函数名后没有括号和参数，因为这是把一个引用赋值给了函数，而不是真正的调用了它。

接下来，声明当你接到响应后要做什么，你要通过调用 HTTP 请求对象的 open() 和 send() 方法发送一个实际的请求，像下面这样：

httpRequest.open("GET", "http://www.example.org/some.file", true);
httpRequest.send();

open() 的参数主要采用 请求方法 + url，最后一个true是一个可选项，用于设置请求是否是异步的。如果设为 true（默认值），即开启异步

send() 方法的参数可以是任何你想发送给服务器的内容，如果是 POST 请求的话。发送表单数据时应该用服务器可以解析的格式

发送请求时，你提供的 Javascript 函数名负责处理响应，下文中的nameOfTheFunction可以视为第一步的handler：

httpRequest.onreadystatechange = nameOfTheFunction;

这个函数应该做什么？首先，函数要检查请求的状态。如果状态的值是 XMLHttpRequest.DONE （对应的值是 4），意味着服务器响应收到了并且是没问题的，然后就可以继续执行。

if (httpRequest.readyState === XMLHttpRequest.DONE) {
  // 很好，服务器已经接收到了响应。
} else {
  // 还没准备好。
}

对于XMLHttpRequest.DONE的状态码，如下所示：

接下来，检查 HTTP 响应的响应状态码。在下面的例子中，我们通过检查响应码 200 OK 判断 AJAX 调用有没有成功。

if (httpRequest.status === 200) {
  // 完美！
} else {
  // 请求有问题。
  // 比如，响应可能是 404 (Not Found)
  // 或 500 (Internal Server Error) 响应码。
}

HTTP 响应状态码用来表明特定 HTTP 请求是否成功完成。响应被归为以下五大类：

信息响应 (100–199)
成功响应(200–299)
重定向消息(300–399)
客户端错误响应 (400–499)
服务端错误响应 (500–599)

想了解更多的小伙伴看这篇响应状态码。

标签：HTTP,浅谈,请求,响应,AJAX,服务器,页面
From： https://www.cnblogs.com/meloo/p/17770996.html