认识ajax

刺骨的言语ヽ痛彻心扉 2022-04-23 09:32 54阅读 0赞

随着互联网的广泛应用，基于B/S结构的Web应用程序越来越受到推崇，但不可否认的是，B/S架构的应用程序在界面效果及操控性方面比C/S架构的应用程序差很多，这也是Wb应用程序普遍存在的一个问题。

在传统的 Web应用中，每次请求服务器都会生成新的页面，用户在提交请求后，总是要等待服务器的响应。如果前一个请求没有得到响应，则后一个请求就不能发送。 由于这是一种独占式的请求，因此如果服务器响应没有结束，用户就只能等待或者不断地刷新页面。在等待期间，由于新的页面没有生成，整个浏览器将是一片空白， 而用户只能继续等待。对于用户而言，这是一种不连续的体验，同时，频繁地刷新页面也会使服务器的负担加重。

Ajax技术正是为了弥补以上不足而诞生的。Ajax应用采用异步请求模式，不用每次请求都重新加载页面。发送请求后不需要等待服务器响应，而是可以继续原来的操作，在服务器响应完成后，浏览器再将响应展示给用户。

使用 Ajax技术，从用户发送请求到获得响应，当前用户界面在整个过程中不会受到干扰而且可以在必要的时候只刷新页面的一小部分，而不用刷新整个页面，即“无刷新”技术。例如新浪微博更新内容就使用了Ajax技术，在浏览微博的时候，如果有新消息出现，页面给出提示，点击刷新后，页面中仅仅是加载新的微博内容，已经获取到的微博内容并不会再次请求刷新，这就避免了重复加载、浪费网络资源的现象。这是无刷新技术的第一个优势。

再以土豆网为例，在观看视频的时候，我们可以在页面上单击其他按钮执行操作，由于只是局部刷新，视频可以继续播放，不会受到影响。这体现了无刷新技术的第二个优势:提供连续的用户体验，而不被页面刷新中断。

最后看一下Google网的例子。由于采用用了无刷新技术，我们可以实现一些以前B/S程序很难做到的事情，如 Google地图提供的拖动、放大、输小等操作，Ajax强调的是异步发送用户请求，在一个请求的服务器响应还没返回时，可以再次发送请求。这种发送请求的模式可以使用户获得类似桌面程序的用户体验。

**Ajax工作原理**

使用Ajax技术可以通过JavaScript发送请求到服务器，在服务器响应结束后，可以根据返回结果只更新局部页面，提供连续的客户体验，那么到底什么是Ajax呢?  
Ajax (Asynchronous JavaScript and XML)并不是一种全新的技术，而是整合了JavaScript,XML, CSS等几种现有技术而成。Ajax的执行流程是，在用户界面触发事件调用JavaScript ,通过Ajax引擎——XMLHttpRequest 对象异步发送请求到服务器，服务器返回XML、JSON或 HTML格式的数据，然后利用返回的数据使用DOM和CSS技术局部更新用户界面。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3Nzc0MTcx_size_16_color_FFFFFF_t_70]  
Ajax的关键元素包括以下内容：

*  JavaScript语言：ajax技术的主要开发语言
 *  XML/JSON/HTML等：用来封装请求或响应的数据格式
 *  DOM（文档对象模型）：通过DOM属性或方法修改页面元素，实现页面局部刷新
 *  CSS:改变样式，美化页面效果
 *  Ajax引擎：XMLHttpRequest对象，以异步方式在客户端与服务器端之间传递数据

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3Nzc0MTcx_size_16_color_FFFFFF_t_70]: /images/20220321/65953a905f0043ae851a2d272671586b.png