AJAX(Asynchronous Javascript and xml)
1.定义:是一种创建交互式网页应用的网页开发技术;
通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,
对网页的某部分进行更新;传统的网页如果需要更新,必须重载整个页面;(摘自百科)
2.实例解析:
--------------》效果图:
解释:局部刷新技术给用户带来了极大地方便,用户不需要再输入所有信息然后点击提交,最后得知那条信息输入的不对,
必须重新输入;
--------------》实现步骤:
1.在jsp中调用使用了AJAX技术的方法 reg()
<html>
<body>
<!--省略代码-->
<tr>
<td style="width:110px">***</td>
<td style="width:300px"><input name="register" type="text" class="logintext" style="border-color:#de9852;color:#000;"/>
</td>
<td style="width:150px"><input name="" type="button" class="scbtn1" value="验证***" style="width:150px" onclick="reg()"/></td>
<td style="width:300px"><span id="tip0"></span></td>
</tr>
<!--省略代码-->
</body>
</html>
2.在Javascript中写 reg()
//===================================================================
//方法:AJAX,验证***
//===================================================================
function reg()
{
//0.获取表单域的值ֵ
var reg=document.getElementsByName("register");
var register=reg[0].value;
//1.创建XMLHttpRequest对象
if(window.XMLHttpRequest)//ie7以上版本、火狐、遨游、搜狗等
{
xmlhttp=new XMLHttpRequest();
}else if(window.ActiveXObject)//IE7.0以下版本
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if(xmlhttp)
{
//2.设置回调函数
xmlhttp.onreadystatechange=call;
//3.设置与服务器端连接信息
//method:提交给服务器端方式,GET或者POST
//url:服务器端页面
//async:同步交互还是异步交互 true:表示异步
xmlhttp.open("POST", "servlet/ValidatorRegisterServlet", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//4.向服务器发送请求
xmlhttp.send("register="+register);
}
}
3.在Javascript中写 回调函数
//5.编写回调函数
function call()
{
if(xmlhttp.readyState==4 )
{
if(xmlhttp.status==200)
{
var text=xmlhttp.responseText;
var s=document.getElementById("tip0");
s.innerHTML="<font color=red>"+text+"</font>";
}
}
}
4.servlet进行数据处理(这里使用的是假数据,没有与数据库的***对比)
response.setContentType("text/html");
PrintWriter out = response.getWriter();
//从注册页面获取***
String register=request.getParameter("register");
//判断***是否正确
if("123456".equals(register))
{
out.println("该***可用!");
}else
{
out.println("该***不可用!");
}
out.flush();
out.close();