AJAX : Asynchronous JavaScript and XML
XMLHttpRequest是AJAX技术的核心部分。AJAX是对于页面的局部刷新。
首先，通过一个简单的小程序来理解。
这里是一个简单的对用户名进行认证。
如下图所示，当用户输入用户名后，光标移到密码框时，自动对用户名进行认证。
使用AJAX方式，可以使网页不发生跳转。也就是局部刷新一下。使用户体验更加良好。
第一步：
首先先写出JSP页面中的基本代码。
JSP页面框架代码如下：
<%@ page language="java" import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN">
<html>
<head>
<title>AJAX 使用范例</title>
</head>
<body>
<center>
<h1>注册新账户</h1>
<form action='#' method='post' name ='registerForm' >
<td>
用户名：<input type='text' name = 'username' onblur= '#'>
<div id = 'usernameMsg'></div>
密   码：<input type = 'password'name ='password' > <br>
确认密码：<input type = 'password'name ='passwordConfirm'> <br>
性   别：<input type = 'radio' name = 'sex' value='男'>男
<input type = 'radio' name = 'sex' value = '女'>女 <br>
邮   箱：<input type ='text' name = 'email' > <br>
<input type = 'button'value = '重置' >
<input type = 'button'value = '提交'>
</td>
</form>
</center>
</body>
</html>
第二步：
在页面中间写入我们的javascript函数。
1、首先我们要创建一个XMLHttpRequest对象。
var xmlHttpRequest;
function createXMLHttpRequest()
{
if(window.XMLHttpRequest)
{
xmlHttpRequest = new XMLHttpRequest(); //ie7之后的版本
}
else if(window.ActiveObject)
{
xmlHttpRequest = new ActiveObject("Msxml2.XMLHTTP"); //ie7之前的版本
}
}
创建XMLHttpRequest对象会因为所使用的浏览器不同，而创建不同。而且方法随着时间的改变也发生了一些变化。
2、写一个函数判断用户名是否存在。在这个函数中调用发送请求的函数。
function usernameIsExist()
{
var username= document.registerForm.username.value;
sendRequest("register?username="+username);
}
3、在此函数中建立对服务器的调用。使用open方法。
function sendRequest(url)
{
createXMLHttpRequest();
xmlHttpRequest.open("GET",url,true);
xmlHttpRequest.onreadystatechange =processResponse;
xmlHttpRequest.send(null);
}
4、processResponse方法根据请求的状态做出响应。
function processResponse()
{
if(xmlHttpRequest.readyState== 4)
{
if(xmlHttpRequest.status == 200)
{
var responseInfo = xmlHttpRequest.responseXML.
getElementsByTagName("msg")[0].firstChild.data;
var div1 = document.getElementById("usernameMsg");
if(responseInfo =="Exist")
{
div1.innerHTML= "<font color='red'>该用户名已存在</font>";
}
else
{
div1.innerHTML= "<font color ='green'>用户名可用</font>";
}
}
}
5、编写servlet方法。（这里只简单的判断了一下用户名是否等于shj,其实可以连接到数据库进行查询再返回）
public void doPost(HttpServletRequest request,HttpServletResponse response)
throws ServletException, IOException {
String username = request.getParameter("username");
response.setContentType("text/xml");
PrintWriter out = response.getWriter();
if(username =="shj"||username.equals("shj"))
{
out.println("<msg>Exist</msg>");
}
else{
out.println("<msg>NotExist</msg>");
}
out.flush();
out.close();
}
测试效果：
扫一扫
1452
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
