大话讲解编程实战之利器AJAX机制及示例

本文主要从Ajax的产生背景讲起,分享什么是ajax?我们为什么要用ajax?ajax适用于什么场合?以及我们如何来使用ajax。本文通过ajax的两个常见案例来讲解ajax的编码步骤,学习目的要求熟练掌握ajax的5个开发步骤。学习的前提要求已经掌握了html,css,js,xml,jsp,servlet的基本知识。

一、Ajax简介

AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。

传统的web应用允许用户填写表单(form),当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单,然後返回一个新的网页。这个做法浪费了许多带宽,因为在前後两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求,应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。

与此不同,AJAX应用可以仅向服务器发送并取回必需的数据,它使用SOAP或其它一些基于XML的web service接口,并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少,结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成,所以Web服务器的处理时间也减少了。

Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,从而达到节约ISP的空间及带宽租用成本的目的。


二、Ajax使用场景

AJAX【适合】不用来传递大量数据,而只用来【传递少量数据】,在用户的【体验】上,【更加人性化】

AJAX是一个和服务器无关的技术,即服务器可使用:JavaEE,.NET,PHP,。。。这些技术都可

AJAX只管向服务器发送请求,同时只管接收服务器的HTML或XML或JSON载体响应

服务端不能使用转发或重定向到web页面,因为这样会起浏览器全面刷新

即只能以流的方式响应给浏览器。

1、数据验证:在文本框等输入表单中给予输入提示,或者自动完成,可以有效的改善用户体验,尤其是那些自动完成的数据可能来自于服务器端的场合,Ajax是很好的选择。

2、按需取数据

我们以前的对级联菜单的处理多数是这样的:

为了避免每次对菜单的操作引起的重载页面,不采用每次调用后台的方式,而是一次性将级联菜单的所有数据全部读取出来并写入数组,然后根据用户的操作用 JavaScript来控制它的子集项目的呈现,这样虽然解决了操作响应速度、不重载页面以及避免向服务器频繁发送请求的问题,但是如果用户不对菜单进行 操作或只对菜单中的一部分进行操作的话,那读取的数据中的一部分就会成为冗余数据而浪费用户的资源,特别是在菜单结构复杂、数据量大的情况下(比如菜单有 很多级、每一级菜又有上百个项目),这种弊端就更为突出。

如果在此案中应用Ajax后,结果就会有所改观:

在初始化页面时我们只读出它的第一级的所有数据并显示,在用户操作一级菜单其中一项时,会通过Ajax向后台请求当前一级项目所属的二级子菜单的所有数据,如 果再继续请求已经呈现的二级菜单中的一项时,再向后面请求所操作二级菜单项对应的所有三级菜单的所有数据,以此类推……这样,用什么就取什么、用多少就取 多少,就不会有数据的冗余和浪费,减少了数据下载总量,而且更新页面时不用重载全部内容,只更新需要更新的那部分即可,相对于后台处理并重载的方式缩短了 用户等待时间,也把对资源的浪费降到最低。

三、Ajax编码

1、创建AJAX异步对象,例如:createAJAX()

2、准备发送异步请求,例如:ajax.open(method,url)

3、如果是POST请求的话,一定要设置AJAX请求头,例如:ajax.setRequestHeader() 如果是GET请求的话,无需设置设置AJAX请求头

4、真正发送请求体中的数据到服务器,例如:ajax.send()

5、AJAX不断的监听服务端响应的状态变化,例如:ajax.onreadystatechange,后面写一个无名处理函数

6、在匿名处理函数中,获取AJAX的数据后,按照DOM规则,用JS语言来操作Web页面


四、 AJAX状态码

0:ajax异步对象创建好了,但暂时没有准备发送请求

1:ajax已经调用了open方法,但暂时没有真正发送请求

2:ajax已调用了seng()方法,但暂时没有到达服务器

3:请求已经到达服务器,正在处理中,服务器正在将响应返回的过程中

4:ajax异步对象已经完全接收到了服务端的响应信息,但这个时候的响应状态码不一定是正确的,可能是404/500或者200等


示例:

一、检测用户名是否被注册

需求:该示例为当我们平时注册网站时,输入一个用户名 鼠标移开后会立即提示是否被注册,如下图所示



因为有的浏览器可能会不支持ajax,所以我们需要来判断一个浏览器是否兼容。这里也就是先创建一个ajax对象。


CSS部分:

JS部分:

data.txt


效果:


后续示例下次更新。