【JavaScript】AJax

在传统的web应用里,每个请求即对应一个页面,不管客户端以post还是Get方式提交请求,每次请求前都会丢失当前页面,等待服务器生成页面.在等待期间,旧的页面已经丢失,新的页面还没有完全生成,整个浏览器将一片空白(虽然现在网络很快,但是当我们刷新的时候依然能看到页面会变白),这时我们只能等待,对于用户而言这是一种不连续的体验,感觉会非常的不好.

面对这样的情况,一种新的技术就应运而生了.这就是Ajax

Ajax全称为”AsynchronousJavaScript and XML”(异步JavaScript和XML)，它并不是指单一的一种技术，而是有机的利用了一系列交互式网页应用相关的救赎所形成的结合体。它的出现，揭开了无刷新更新页面的新时代。

Ajax所包含的的技术

1. 使用CSS和XHTML来表示

2. 使用DOM模型来交互和动态显示

3. 使用XMLHttpRequest 来和服务器进行异步通信

4. 使用JavaScript来绑定和调用。

Ajax的优势

1. 不需要插件,用户只需要允许JavaScript在浏览器上运行即可

2. 相对优秀的用户体验.这是Ajax技术最大的有点,能在不刷新整个页面的前提下更新数据.使web程序能更迅速的回应用户的操作

3. 提高web程序的性能,Ajax模式在性能上的最大的区别就在于传输数据的方式,在传统模式中,数据提交时通过表单来提交的,而数据获取靠的是全页刷新来重新获取整页内容,而Ajax模式只是通过XMLHttpRequest对象像服务器提交希望提交的数据,即按需发送.

4. 减轻服务器的和带宽的负担.Ajax的工作原理相当于在用户和服务器之间加了一个中间层.把传统方式下的一些服务器负担的工作转移到客户端.便于客户端来处理.减轻服务器和带宽的负担

Ajax的不足

1. 浏览器对XMLhttpRequest对象的支持度不足.让各个浏览器都支持Ajax应用开发难度相对较大.

2. 破坏浏览器前进.后退按钮的正常功能.这使得用户经常会碰到这种情况.当触发Ajax交互后,单击后退按钮,结果浏览器后退到了先前的一个页面,通过Ajax交互得到的内容完全消失了,虽然这种情况可以解决,但相对麻烦.

3. 对搜索引擎的支持不足

4. 开发和调试工具缺乏



Ajax的工作原理



从这张图上我们可以看到,传统的网页发送请求后只有在得到响应之后才能发送下一次请求,而在等待响应的这段时间我们是需要等待的,

而使用Ajax后,我们发送请求后还是可以继续再发送请求的.不再受响应的限制



这张图展示了传统的web页和加入Ajax后的区别。我们看到在用户和服务器之间加了一个中间层。通过这种方式，使我们的请求并不全是直接提交给服务器，而是交给AJax引擎，像一些数据验证和数据处理等都交给Ajax引擎来做，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求