526互联

浅谈AJAX

发布时间 2023-10-17 23:19:48作者: Melo70000

什么是AJAX？

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

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

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

AJAX技术的理解

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

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

AJAX的五大特点

  1. 无需刷新页面就可以改变页面内容，减少用户等待事件和资源调用。
  2. 按需获取数据，每次只从服务器端获取需要的数据
  3. 读取外部数据，进行数据处理整合
  4. 异步与服务器进行交互，在交互过程中用户无需等待，仍然可以继续操作
  5. 改善表单验证方式，不需要打开新页面，也不需要将整个页面数据提交

AJAX与传统web区别

AJAX交互

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

传统web交互

  • 通过HTTP与服务器交互

  • HTTP请求的是整个页面

  • HTTP是请求响应的，必须等服务器响应页面后，才能再发送下一个HTTP请求（即不支持异步操作）

AJAX的核心优势

  • 按需获取数据（核心）

    不像传统web一样，服务其每次响应一整个页面。Ajax可以只会让服务器响应当下页面需要更新的数据，大大减少了数据的实际传输量

  • 节约网络带宽

    由于降低数据传输量，就相当于减轻服务器和带宽的负担，并且Ajax技术可以将传统服务器的工作转嫁给客户端，进一步节约空间和带宽

  • 无需刷新页面

    通过异步发送请求，Ajax技术只是更新数据，无需改变整个页面

  • 基于标准化技术

    几乎所有的浏览器都支持Ajax技术

AJAX使用的步骤

  • 建立XMLHTTPRequest对象（原因见上述区别）
  • 设置获取web服务器数据的回调函数
  • 使用open()方法与web服务器建立连接
  • 使用send()方法对服务器发送XHR请求
  • 在回调函数中接收web服务器返回的数据

首先建立 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的状态码，如下所示：

  • 0（未初始化）或（请求还未初始化）
  • 1（正在加载）或（已建立服务器链接）
  • 2（已加载）或（请求已接收）
  • 3（交互）或（正在处理请求）
  • 4（完成）或（请求已完成并且响应已准备好）

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

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

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

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

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