AJAX即"AsynchronounsJavaScriptandXML"（异步JavaScript和XML），AJAX并非缩写词，而是由JesseJamesGaiie创造的名词，是指一种创建交互式网页应用的网页开发技术。
AJAX最根本的原理就是在不刷新页面的情况下访问服务器处理数据，并根据数据的处理结果按你想要的方式对页面做出及时的更改。
具体流程（三大步）：
AJAX向服务器发出请求-->服务器接受请求，处理请求并将处理结果返回-->AJAX收到结果，按照你设定的方式解析结果并更改页面内容。
AJAX的核心是JavaScript对象XMLHttpRequest。该对象在InternetExplorer5中首次引入，它是一种支持异步请求的技术。简而言之，XMLHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。
废话不说拉，举一个简单的Ajax使用示例如下：
首先，我创建regist.jsp源代码如下：
<%@pagecontentType="text/html;charset=gb2312"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<title>注册页面</title>
<scripttype="text/javascript"src="js/ajax.js">
</script>
<scripttype='text/javascript'>
<!--
functionmyAlert(strTitle){
varmessage=document.getElementById("myDiv").innerHTML;
varwin1=newZapatec.AlertWindow(message,{
title:strTitle,
modal:true,
width:580,
height:330
});
}
functiondoCheck(){
varf=document.forms[0];
if(f.username.value!=""){
document.getElementById("feedback_info").innerHTML="系统正在处理您的请求，请稍后。";
send_request("POST","checkUsername.jsp?username="
+f.username.value,null,"text",showFeedbackInfo);//第1步：AJAX通过浏览器的内置对象XMLHttpRequest向服务器发出请求。
}else{
document.getElementById("feedback_info").innerHTML="请输入用户名称。";
}
}
functionshowFeedbackInfo(){
if(http_request.readyState==4){//判断对象状态
if(http_request.status==200){//信息已经成功返回，开始处理信息
document.getElementById("feedback_info").innerHTML=http_request.responseText;
}else{//页面不正常
alert("您所请求的页面有异常。");
}
}
}
//-->
</script>
</head>
<body>
<formname="form1"method="post"action="">
<tablestyle="font-size:12px;">
<tr>
<tdwidth="80">用户名：</td>
<td><inputtype="text"name="username"onblur="doCheck()">
</td>
</tr>
<tr>
<tdcolspan="2"><spanid="feedback_info"style="color:#FF0000"></span>
</td>
<tr>
<tr>
<td>一级密码：</td>
<td><inputtype="password"name="pwd"></td>
</tr>
</table>
</form>
</body>
</html>
然后，我创建checkUsername.jsp源代码如下：
<%@pagecontentType="text/html;charset=gb2312"%>
<%
Stringname=request.getParameter("username");//第2步，服务器接受请求
Stringusername=newString(name.getBytes("ISO8859-1"),"gb2312");//2.1，服务器处理请求
if(username.equals(""))
out.println("用户名称["+username+"]低俗不堪！请换一个用户名称注册！");//2.2，服务器将处理结果返回
else
out.println("用户名称["+username+"]符合规范！您可以继续。");
%>
最后，我创建ajax.js源代码如下：
//定义XMLHttpRequest对象实例
varhttp_request=null;
//定义可复用的http请求发送函数
functionsend_request(method,url,content,responseType,callback){//初始化、指定处理函数、发送请求的函数
http_request=null;
//开始初始化XMLHttpRequest对象
if(window.XMLHttpRequest){//Mozilla、在IE7+、firefox浏览器
http_request=newXMLHttpRequest();
if(http_request.overrideMimeType){//设置MiME类别
http_request.overrideMimeType("text/xml");
}
}elseif(window.ActiveXObject){//IE5、6浏览器
try{
http_request=newActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
http_request=newActiveXObject("Microsoft.XMLHTTP");
}catch(e){
}
}
}
if(!http_request){//异常，创建对象实例失败
window.alert("不能创建XMLHttpRequest对象实例.");
returnfalse;
}
//以下为第3步：AJAX收到结果，按照你设定的方式解析结果并更改页面内容。
//alert(responseType.toLowerCase());
if(responseType.toLowerCase()=="text"){
//http_request.onreadystatechange=processTextResponse;
http_request.onreadystatechange=callback;
}elseif(responseType.toLowerCase()=="xml"){
//http_request.onreadystatechange=processXMLResponse;
http_request.onreadystatechange=callback;
}else{
window.alert("响应类别参数错误。");
returnfalse;
}
//确定发送请求的方式和URL以及是否异步执行下段代码
if(method.toLowerCase()=="get"){
http_request.open(method,url,true);
}elseif(method.toLowerCase()=="post"){
http_request.open(method,url,true);
http_request.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
}else{
window.alert("http请求类别参数错误。");
returnfalse;
}
http_request.send(content);
}
//处理返回文本格式信息的函数
functionprocessTextResponse(){
if(http_request.readyState==4){//判断对象状态
if(http_request.status==200){//信息已经成功返回，开始处理信息
//alert(http_request.responseText);
alert("Text文档响应。");
}else{//页面不正常
alert("您所请求的页面有异常。");
}
}
}
//处理返回的XML格式文档的函数
functionprocessXMLResponse(){
if(http_request.readyState==4){//判断对象状态
if(http_request.status==200){//信息已经成功返回，开始处理信息
//alert(http_request.responseXML);
alert("XML文档响应。");
}else{//页面不正常
alert("您所请求的页面有异常。");
}
}
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
