Ajax的梳理

Posted 2021-01-25 xiaomou

Ajax梳理

一、Ajax 简介

（1）定义

AJAX = 异步 javascript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。
这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

（2）具体过程：

• 服务器响应过程

1.用户填写表单字段并单击 Submit 按钮，整个表单发送到服务器
2.服务器将它转发给处理表单的脚本（通常是 php 或 Java）
3.脚本执行完成后再发送回全新的页面。
4.当然，在服务器上的脚本或程序处理和返回新表单时用户必须等待。屏幕变成一片空白，等到服务器返回数据后再重新绘制。这就是交互性差的原因，用户得不到立即反馈，因此感觉不同于桌面应用程序。

• Ajax在其中的作用
  • 作用范围
    Ajax 基本上就是把 JavaScript 技术和 XMLHttpRequest 对象放在 Web 表单和服务器之间。
  • 实现过程
    1.当用户填写表单时，数据发送给一些 JavaScript 代码而不是直接发送给服务器。相反，JavaScript 代码捕获表单数据并向服务器发送请求。同时用户屏幕上的表单也不会闪烁、消失或延迟。
    2.换句话说，JavaScript 代码在幕后发送请求，用户甚至不知道请求的发出。
    3.更好的是，请求是异步发送的，就是说 JavaScript 代码（和用户）不用等待服务器的响应。因此用户可以继续输入数据、滚动屏幕和使用应用程序。
• 流程如下

二、ajax实现过程

一个简单的ajax实现：

（1）创建 XMLHttpRequest 对象

如上文图中的信息

（2）发送请求

• xmlhttp.open( method, url, async ); //连接服务器
  • 参数详解
    • method：请求的类型，GET 或 POST
    • url：文件在服务器上的位置
    • async：true（异步）或 false（同步）

  • xmlhttp.send(string); //发生请求,string可以不填

    注意：

    • 同步：指发出数据后，等接收到响应以后再发送下一个数据包的通讯方式。
    • 异步：指发出数据后，不用等待接收到响应，接着发送下一个数据包的通讯方式。

注意：
如果需要像 html 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：
POST 请求:

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");    // 向请求添加HTTP头
xmlhttp.send("fname=Bill&lname=Gates");

注意：
GET 还是 POST?
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：

• 无法使用缓存文件（更新服务器上的文件或数据库）
• 向服务器发送大量数据（POST 没有数据量限制）
• 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

(3)、接收服务器响应

• 如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
  • responseText：获得字符串形式的响应数据。
  • responseXML：获得 XML 形式的响应数据。
• 当请求被发送到服务器时，我们需要执行一些基于响应的任务。
  XMLHttpRequest 对象有三个重要的属性：
  • Onreadystatechange
    ??存储函数（或函数名），每当readyState 属性改变时，就会调用该函数。
  • readyState
    ??存有XMLHttpRequest 的状态信息，从 0 到 4 发生变化。
    ??- 0: 请求未初始化
    ??- 1: 服务器连接已建立
    ??- 2: 请求已接收
    ??- 3: 请求处理中
    ??- 4: 请求已完成，且响应已就绪
  • Status（HTTP状态码）
    ??- 1字头：消息。这一类型的状态码，代表请求已被接受，需要继续处理。
    ??- 2字头：成功。这一类型的状态码，代表请求已成功被服务器接收、理解、并接受。( 200:‘OK‘ )
    ??- 3字头：重定向。这类状态码代表需要客户端采取进一步的操作才能完成请求。( 304:‘Not Modified‘ )
    ??- 4字头：请求错误。这类的状态码代表了客户端看起来可能发生了错误，妨碍了服务器的处理。
    ??- 5、6字头：服务器错误。这类状态码代表了服务器在处理请求的过程中有错误或者异常状态发生。

注意：每当 readyState 改变时，就会触发 onreadystatechange 事件。
在onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当readyState 等于 4 且 status 为 2字头或 304 时，表示响应已就绪。

参考：

• 菜鸟教程
• https://blog.csdn.net/qq_14947845/article/details/54670214
• https://blog.csdn.net/github_36111469/article/details/53313959