2.AJAX简介与原理

╰+哭是因爲堅強的太久メ 2023-06-13 06:23 16阅读 0赞

# AJAX简介与原理 #

### 关联网址 ###

**（1）聚合数据https://www.juhe.cn/docs/api/id/39—天气  
（2）JSON API免费接口http://www.bejson.com/knownjson/webInterface/**

# 大纲 #

**（1）AJAX简介  
（2）AJAX应用案例  
（3）传统验证方式  
（4）AJAX验证方式  
（5）AJAX通俗理解+工作方式**

# ajax简介 #

**（1）什么是AJAX？**  
正如之前所说，Ajax 即Asynchronous Javascript And XML（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术（←本质）。

Ajax = 异步 JavaScript 和 XML或HTML （标准通用标记语言的子集）

工作实现原理：JavaScript和XML在AJAX中都是异步工作的，因此，任何使用AJAX的web应用程序都可以从服务器发送和检索数据，至此便无需重新加载整个网页的情况下，能够更新部分网页的技术。

**起源：**  
AJAX概念实际上是从90年代中期开始出现的，然而，当谷歌在2004年开始在谷歌邮件和谷歌地图上引入这个概念，这种技术可以从服务器请求数据，而无需重新加载页面，这样会带来更好的客户体验。一时间，席卷全球。  
**命名：**  
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），前端开发里一般叫阿贾克斯。  
**最大特点：页面不刷新**

**（1）百度关键词特效**  
例如百度搜索的自动填充功能，它可以帮助您在键入关键词时自动补充这些关键词。关键词实时变化，但页面保持不变。  
在90年代早期，互联网还没有那么发达，同样的功能要求百度每次在屏幕上弹出一个新建议时都要重新加载页面。AJAX允许数据交换和表示层同时工作，而不影响彼此的功能。

# （1）百度关键词特效 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]

**随着输入关键词的不同，底下会从服务器拉取不同数据（在不刷新页面的前提下）**

# （2）www.163.com网易的邮箱注册 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]  
**ajax在输入框失去焦点时，会把用户名传递给服务器，做查询对比。之后把查询的结果在页面上展示出来。**

**（3）投票及评级制度**  
在网上购买的产品打分或者填写过网上投票表格的都知道，无论哪种方式，这两种操作都使用AJAX。

一旦点击评级或投票按钮，网站将更新计算结果，但整个页面保持不变。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 2]

# （4）聊天室 #

有些网站在主页上安装了一个内置的聊天室，你可以和他们的客服人员聊天。如果想同时浏览该页面，则无需担心，AJAX不会在每次发送和接收新消息时重新加载页面。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 3]

**（5）微博趋势的通知**  
微博使用AJAX进行更新，每次有关于某些热门话题的新推文发布，微博都会在不影响主页的情况下更新新数据。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 4]

# 传统验证方式 #

### 传统方式用户名验证 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 5]  
**验证失败后返回失败信息，重新加载页面。之前填写的数据需要重新填写**

**传统验证方式缺点**  
（1）耗费流量：其他数据反复提交给服务器  
（2）耗费时间较长：多次提交耗时  
（3）用户体验差：仅仅因为用户名验证失败，导致整个页面重新记载，其他数据就又得重新填写。

# AJAX验证方式 #

**AJAX方式用户名验证**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 6]  
**AJAX验证方式优点**  
（1）节省流量：只传递需要验证的数据（用户名）  
（2）节省操作时间，可以快速提示错误并进行修改  
（3）用户体验好，页面不刷新

# AJAX简介 #

**简介**  
**分析**：ajax语言载体和核心技术是javascript；XML主要用于保存和传输数据，就是可与服务器进行异步或者同步交互一门技术，很大程度上改变了WEB开发的格局，在常见的社交网站、地图等均应用了ajax技术。  
不是某种编程语言，是一种在无需重新加载整个网页的情况下能够更新部分页面内容的技术。

# ajax工作方式 #

**ajax是如何工作的？**

首先要明确一点，AJAX是一种技术，不是一种编程语言。如前所述，AJAX是一组web开发技术，该系统一般包括：  
1、HTML/XHTML为主要模板标签语言，CSS为表示形式。  
2、用于动态显示数据及其交互的文档对象模型(DOM)。  
3、用于数据交换的XML和用于操作的XSLT，许多开发人员已经开始用JSON替代，因为JSON在形式上更接近JavaScript。  
4、用于异步通信的XMLHttpRequest—XHR对象  
最后，JavaScript编程语言将所有这些技术结合在一起。

**AJAX工作的一般过程非常简单，参考下面图表**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 7]  
**小结**：抛开定义不谈，使用AJAX的最大好处是它简化了用户体验。访问者不需要等待很长时间就可以访问内容。

**AJAX工作的一般过程非常简单，参考下面图表**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 8]

# 如有问题或者疑问请留言联系小编！！！！！ #

# 感谢来访！！！！ #

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191114183916348.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191114183933848.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191114184003102.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191114184019879.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191114184031717.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20191114184057658.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20191114184233985.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20191114184329642.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20191114184353349.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70