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";
}
}
3 servlet.java文件(doGet方法中的代码)
PrintWriter out = response.getWriter();
//得到需要执行的业务名称
String operate = request.getParameter("operate");
//检查用户名
if(operate.equals("checkLoginName")){
//得到提交的用户名
String loginName = request.getParameter("loginName");
boolean result = false;
if(loginName.equals("admin")){
result = true;
}
out.print(result);
}
这写文件编写完之后,配置到服务器上运行,就可以体验到Ajax带来的提交数据无刷新更改页面的效果了。
原理 :
1、当页面调用check(textBoxId)函数时,调用createXMLHttpRequest()函数来创建XMLHttpRequest对象。
2、为XMLHttpRequest对象的onreadystatechange事件设置回调函数。
3、然后XMLHttpRequest对象调用其open()方法进行初始化。
4、初始化完成后,XMLHttpRequest调用其send()方法将请求发送,同时ReadyState属性值开始从1变化至4,每当ReadyState之变化时就会引发onreadystatechange事件,我们就在被引发的这个事件中设置回调函数callBack()来控制页面元素的显示和隐藏。
5、在onreadystatechange事件中我们判断ReadyState属性的值,当其为4时说明服务器响应已经加载成功。
6、然后判断status属性的值,这个值是HTTP状态值,当它为200时,说明没有错误,响应成功。
7、调用callBank()函数。
8、responseText属性里存放的是返回的文本信息,我们可以根据此信息进行相关的操作,例如显示或隐藏某些页面元素。
注:有关于XMLHttpRequest对象,具体请参阅其他文档,本文不予详细介绍。