1. 认识AJAX

  AJAX(Asynchronous JavaScript and XML,即异步JavaScript与XML),是由咨询顾问Jesse James Garrett 首先提出来的,通常被人们叫作“阿贾克斯”。

1.1 AJAX的基本概念

 用户在浏览网页时,无论是打开一段新的评论,还是填写一张调查问卷,都需要反复与服务器进行交互。

 传统的Web应用采用同步交互的形式,当用户向服务器发送一个请求,web服务器根据用户的请求执行相应任务,返回结果。这是一种不连贯的运行模式,常常伴随着长时间的等待以及整个页面的刷新,即通常所说的“白屏”现象。在用户提交请求之后,屏幕将一片空白(“白屏”现象),在得到返回结果之后除了等待用户什么都做不了,更不能在等待时查看原本的内容。

Java阿贾克斯技术 阿贾克斯是什么意思_Java阿贾克斯技术


当客户端将请求发送给服务器后,往往需要长时间等待服务器返回处理好的数据(注意:这个时候界面是“白屏”的),而有时用户仅仅需要更新页面中的一小部分数据,而不是整个页面的刷新。传统web应用增加了用户等待时间,数据的重复传递也浪费了大量的资源和网络宽带。

 而AJAX,它采用的是异步交互的方式,它在客户端与服务器之间引入了一个中间媒介,从而改变了同步交互的过程中“处理---等待----处理---等待”的模式。用户的浏览器在执行任务时即装载了AJAX引擎。该引擎通常是JavaScript编写的,通常位于页面的框架中,负责转发客户端与服务器之间的交互。通过AJAX,可以使得用户不再被整体刷新,而仅仅更新用户需要的部分,不但避免了“白屏”现象,还大大节省了带宽,加快了web浏览的速度。

基于AJAX的web框架:

i

Java阿贾克斯技术 阿贾克斯是什么意思_AJAX_02

 

1.2 AJAX的好处

(1)减轻服务器的负担,加快浏览速度。AJAX在运行时仅仅按照用户的需求从服务器获取数据,而不是每次都获取整个页面,这样最大限度地减少冗余请求,减轻服务器的负担,从而大大提高浏览速度。

(2)带来更好的用户体验。“白屏”现象很不友好,AJAX的局部刷新技术使得用户在浏览页面时就像在使用自己的计算机上的桌面程序一样。

(3)基于标准化且被广泛支持的技术

(4)进一步促进页面呈现与数据分离。

 

1.3 AJAX的组成

AJAX不是单一的技术,而是4种技术的集合。

(1) JavaScript

(2) CSS

(3) DOM  通过JS修改DOM,AJAX应用程序可以运行时改变用户界面,或者局部更新某个节点

(4) XMLHttpRequest对象   XMLHttpRequest对象 用来与服务器进行异步通信,在用户工作时提交用户的请求并获取最新的数据,它允许web程序员从web服务器以后台的方式获取数据,数据格式通常是XML,或者是文本。

JavaScript 就像胶水一样将各个部分粘合在一起。

Java阿贾克斯技术 阿贾克斯是什么意思_服务器_03

 

 

1.4 例子:

Google Maps (谷歌地图),当用户在地图上随意拖动、缩放时,刷新的不是整个页面,而仅仅是地图区域的一块,同时还可以进行其他操作而不被打断。整个页面浏览起来非常流畅就像在使用自己的计算机上的桌面程序一样。

它还有一个实用的功能就是动态信息提示。当用户把鼠标指针移动到相应位置时(或者单击),会出现相关位置的详细信息,而这些信息是即时获取的,而不是事先保存在浏览器本地的,这也是AJAX获取数据的一个原则。

Gmail邮箱,将AJAX运用在邮件系统中,如:1.新的邮件发送到信箱,用户无需刷新页面,就会看到“收件箱”自动变成蓝色粗体字,并且数目自动+1,收件箱中也会自动添加一行,显示出邮件标题。这些收取邮件的工作都是不知不觉中完成的,与用户的如何其他操作无关,这就是所谓是异步,整个网页在后端与服务器进行着通信,自动完成了邮件的获取工作。
2.写新邮件时,当在“收件人”一栏输入一个字母,便会自动进行提示,列出相关的邮件供用户选择。

..............

自言:

后台功能的查询,不用AJAX,如果要查找指定用户,必须点击搜索按钮,并且在数据查出来之前,屏幕将保持白屏状态,你原来查的数据也看不了了。但用了AJAX,因为是在前端控制是否查询,1.你可以直接通过事件动态捕捉它,一旦用户输入查询条件,就去查找,不必点击搜索按钮  2.屏幕不会有白屏状态,在没有得到返回结果之前,会显示原有数据,得到返回结果,实现局部刷新(只刷新table),显示你需要的数据。