Ajax是什么以及Ajax交互原理（详，图文并茂，原理篇）

浅浅的花香味﹌ 2023-10-01 12:12 4阅读 0赞

### 一 Ajax技术与原理 ###

#### 1.1 Ajax简介 ####

Ajax = Asynchronous JavaScript and XML (翻译成人话就是，异步的 javascript 和 XML 相结合的一种技术 )

需要澄清的是，Ajax不是新的编程语言，而是一种 **使用现有标准的新方法**，还是一种 **与服务器交换数据并实现只更新网页局部的艺术**（也就是在，不重新加载整个页面就能实现**数据的动态变化**）

#### 1.2 Ajax所包含的技术 ####

需要强调的是，Ajax并非一种新的技术，而是几种原有技术的结合体。 以下便是Ajax所包含的技术

> 1.使用CSS和XHTML来表示  
> 2.使用DOM模型来交互和动态显示  
> 3.使用XMLHttpRequest来和服务进行异步通信  
> 4.使用javascript来绑定和调用

**Ajax的核心**，使用的 XMLHttpRequest 对象，但是需要注意的是——不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的

如：**IE浏览器使用 ActiveXObject，而其他浏览器则使用 XMLHttpRequest的 javascript 的内建对象**

#### 1.3 Ajax的工作原理 ####

Ajax的工作原理相当于在用户和服务器之间加了一个中间层（Ajax引擎），**使用户操作和服务器响应异步化。**

可以先问问自己，Ajax技术与传统方式 在具体的工作上 有什么区别呢？

![请添加图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6bqm55Sw6YeM55qE5a6I5pyb6ICF5ZGA_size_10_color_FFFFFF_t_70_g_se_x_16]

**图一讲解：** 首先客户端先发送一个HTTP请求，HTTP请求发送之后再将其发送给服务器，接下来再去调取数据库，然后再去返回

![请添加图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6bqm55Sw6YeM55qE5a6I5pyb6ICF5ZGA_size_10_color_FFFFFF_t_70_g_se_x_16 1]  
**图二讲解：** Ajax技术会使你和用户，以及服务器之间多了一个Ajax引擎，通过这个引擎就可以实现一些异步操作。*那这意味着什么呢？*

> 意味着，用户在客户端发送请求时，这个方式是JS请求。再由Ajax引擎将其转换成HTTP请求，后台接收到这个请求之后再进行处理。
> 
> 需要注意的是，服务器本身是没有变化的。数据处理完成之后，就会返回给客户端。
> 
> 而传统方式返回的是HTML+CSS这样一种  
> 固定的结构，但是现在呢则是先返回一个XML数据或是文本文档数据给Ajax引擎，通过Ajax引擎，再把返回的内容渲染成最后要的一个结果。

总结：Ajax实际上是在其中扮演着一个 媒介的作用，这个媒介呢，既可以发送请求又可以 给服务器返回数据。

#### 1.3.1 接下来再看看他们各自的交互： ####

首先是，浏览器的普通交互方式

![请添加图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6bqm55Sw6YeM55qE5a6I5pyb6ICF5ZGA_size_20_color_FFFFFF_t_70_g_se_x_16]  
![请添加图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6bqm55Sw6YeM55qE5a6I5pyb6ICF5ZGA_size_10_color_FFFFFF_t_70_g_se_x_16 2]

最后是，Ajax的交互方式

![请添加图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6bqm55Sw6YeM55qE5a6I5pyb6ICF5ZGA_size_20_color_FFFFFF_t_70_g_se_x_16 1]

![请添加图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6bqm55Sw6YeM55qE5a6I5pyb6ICF5ZGA_size_7_color_FFFFFF_t_70_g_se_x_16]

通过分析对比我们发现，Ajax其实就像是去食堂打饭，每个窗口都能打。而传统的则像是小饭店，只能一个一个顾客排队点菜。

### 总结一下优点： ###

1.  用户体验的提升。在创建Web站点时，在客户端执行屏幕更新的时候，相较于传统方式，能为用户提供更好的体验、更好的灵活性。
2.  处理速度的提升

#### 1.1 在实践中的应用： ####

1.  **如动态更新购物车的物品总数**，无需等待用户单机Update并等待服务器重新发送整个页面
2.  **提升站点的性能**，这个呢则是通过减少从服务器下载的数据量而实现的。 例如：Amazon的购物车页面，当用户更新篮子中的一项物品的数量时，会重新载入整个页面，而这，就必须下载32k的数据。 但若使用Ajax计算新的总量，服务器就只会返回新的总量值，因此所需的宽带仅为原来的百分之一。
3.  **消除每次用户在输入时都会页面刷新的不良体验**。因为Ajax可以做到只刷新网站的局部内容
4.  **可直接编辑表格数据**，⽽不是要求⽤户导航到新的⻚⾯来编辑数据。对于Ajax，当⽤户单击Edit时，可以 将静态表格刷新为内容可编辑的表格。⽤户单击Done之后，就可以发出⼀个Ajax请求来更新服务器，并刷新表格，使其包含静态、只读的数据。

最后送各位编程人们我最喜欢的一句话：“坚持和耐心总能奇迹般地扫除一切困难和障碍。（关注博主，长期更新~嘻嘻）  
=￣ω￣= 加油！！

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6bqm55Sw6YeM55qE5a6I5pyb6ICF5ZGA_size_10_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/c166c43a51874eae929bd4d8dad800c5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6bqm55Sw6YeM55qE5a6I5pyb6ICF5ZGA,size_10,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6bqm55Sw6YeM55qE5a6I5pyb6ICF5ZGA_size_10_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/d13caa2f3fc64c9489526bc43aeb4061.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6bqm55Sw6YeM55qE5a6I5pyb6ICF5ZGA,size_10,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6bqm55Sw6YeM55qE5a6I5pyb6ICF5ZGA_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/ae686e80a46b422c918f822b5de954a6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6bqm55Sw6YeM55qE5a6I5pyb6ICF5ZGA,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6bqm55Sw6YeM55qE5a6I5pyb6ICF5ZGA_size_10_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/9ba1aaf8d4b04e69a423aa7be69ba406.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6bqm55Sw6YeM55qE5a6I5pyb6ICF5ZGA,size_10,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6bqm55Sw6YeM55qE5a6I5pyb6ICF5ZGA_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/eafd0210a99f447396f9dd0bd8669fc6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6bqm55Sw6YeM55qE5a6I5pyb6ICF5ZGA,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6bqm55Sw6YeM55qE5a6I5pyb6ICF5ZGA_size_7_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/3258d15362c74e53831d49c5cb137a5a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6bqm55Sw6YeM55qE5a6I5pyb6ICF5ZGA,size_7,color_FFFFFF,t_70,g_se,x_16