Ajax(
Asynchronous JavaScript and XML
)
是
一种创建互动式网页应用的网页开发技术
。
根据
Ajax
提出者
Jesse James Garrett
建议
，它：
- 使用XHTML+CSS
来表示资讯；
- 使用JavaScript
操作DOM
（Document Object Model
）进行动态显示及互动；
- 使用XML
和XSLT
进行资料交换及相关操作；
- 使用XMLHttpRequest
物件与Web
伺服器进行非同步资料交换；
- 使用JavaScript
将所有的東西连接在一起。
- 使用SOAP
以XML
的格式来传送方法名和方法参数。
Ajax
利用JavaScript
操作DOM
达到无刷新更改页面数据，让程序web
程序接近桌面应用程序，提升客户体验。其主要利用了浏览器的内置对象—XMLHttpRequest
。
下面是一个简单的Ajax
例子，用来测试用户名是否被占用,
整个过程中页面无刷新。（以下工程以J2EE
为例，代码仅为关键部分，不包括全部）
- Jsp
页面(
利用XMLHttpRequest
）提交用户名到servlet
- servlet
验证用户名是否被占用,
然后将结果返回到Jsp
页面
- Jsp
页面显示验证结果
1
login.jsp
页面
<
script
type
=
"text/javascript"
src
=
"ajax.js"
></
script
>
<
style
type
=
"text/css"
>
.warning
{
border
:
#efd78b 1px solid
;
width
:
300px
;
height
:
20px
;
background-color
:
#fffce3
;
font-size
:
12px
;
padding-left
:
15px
;
line-height
:
19px
;
color
:
#f00
;
display
:
none
;
}
</
style
>
<
div
id
=
"used"
class
=
"warning"
>
用户名已被占用!
</
div
>
<
div
id
=
"unused"
class
=
"warning"
>
用户名可以使用!
</
div
>
<
div
>
请输入用户名:
<
input
type
=
"text"
name
=
"loginName"
id
=
"loginName"
>
<
input
type
=
"button"
value
=
"
是否被占用"
onclick
=
"check('loginName')"
>
</
div
>
2
ajax.js
文件
//
声明XMLHttpRequest
全局变量
var
oXmlHttpRequest=
null
;
/**
*
创建XMLHttpRequest
对象
*
@return
{}
XMLHttpRequest
对象
*/
function
createXMLHttpRequest(){
if
(
typeof
XMLHttpRequest !=
"undefined"
){
//
非IE
浏览器
return
new
XMLHttpRequest();
}
else
{
//
IE
浏览器有其自己的ActiveXObject
对象
if
(window.ActiveXObject) {
var
aVersion = [
"MSXML2.XMLHttp.6.0"
,
"MSXML2.XMLHttp.5.0"
,
"MSXML2.XMLHttp.4.0"
,
"MSXML2.XMLHttp.3.0"
,
"MSXML2.XMLHttp"
,
"Microsoft.XMLHttp"
];
for
(
var
i = 0; i < aVersion.length; i++) {
try
{
var
oXmlHttp =
new
ActiveXObject(aVersion[i]);
return
oXmlHttp;
}
catch
(ex) {
}
}
}
}
throw
new
Error(
"XMLHttp can't be created!"
);
}
/**
*
验证用户名是否被占用
*
@param
{}
textBoxId
需要验证的数据
*/
function
check(textBoxId){
//
得到页面文本框中的数据
var
value = document.getElementById(textBoxId).value;
//
要提交给服务器的请求数据串
var
queryString =
"operate=checkLoginName&loginName="
+value;
/**********************
无刷新提交请求的主要步骤
BEGIN
**********/
//1.
创建XMLHttpRequest
oXmlHttpRequest = createXMLHttpRequest();
//2.
设置回调函数
/**
*
XmlHttpRequest
*
*
@argument
readyState
XMLHttpRequest
对象把一个HTTP
请求
*
发送到服务器时将经历若干种状态
，状态值从0~4
*
*
@argument
status
这个status
属性描述了HTTP
状态代码。
*
仅当readyState
值为3(
正在接收中)
或4(
已加载)
时，这个属性才可用。
*
*
@event
onreadystatechange
无论readyState
值何时发生改变，
*
XMLHttpRequest
对象都会激发这个事件
*/
oXmlHttpRequest.onreadystatechange=
function
(){
//readyState==4
时,
说明服务器做出的响应已经加载
if
(oXmlHttpRequest.readyState == 4){
//HTTP
状态值200,
请求成功
if
(oXmlHttpRequest.status == 200){
callBack();
//
调用业务
}
}
};
//3.
初始化XMLHttpRequest
组件
oXmlHttpRequest.open(
"GET"
,
"LoginServ.do?"
+queryString);
//4.
发送请求
oXmlHttpRequest.send();
/**********************
无刷新提交请求的主要步骤
END
************/
}
/**
*
回调函数,
当服务器返回响应的时候,
调用该函数处理结果
*/
function
callBack(){
//
客户端接收到的HTTP
响应的文本内容
var
result = oXmlHttpRequest.responseText;
//
jsp
页面的信息提示层(
用户名已占用)
var
oDivUsed
= document.getElementById(
"used"
);
oDivUsed
.style.display =
"none"
;
//
jsp
页面的信息提示层(
用户名可以使用)
var
oDivUnused = document.getElementById(
"unused"
);
oDivUnused.style.display =
"none"
;
//
根据返回结果,
显示用户名是否占用的提示信息
if
(result.indexOf(
"true"
) != -1){
oDivUsed.style.display =
"block"
;
}
else
{
oDivUnused.style.display =
"block"
;