简介ajax:
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。
以下本实例只写jsp模块,具体即业务逻辑层和交互层和持久层不在展示
具体流程:
用户请求jsp的前端页面,前端页面请求的动作在javascript中处理,在javascript中使用ajax,不在重新加载整个页面,然后和服务器进行交换数据并且更新部分网页内容。
:<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'register.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
//处理密码不一致的javascript方法
<script type="text/javascript">
function myfunction() {
var password = document.getElementById("password").value;
var repassword = document.getElementById("repassword").value;
if (password == repassword) {
document.getElementById("refont").innerHTML = "";
return true;
} else {
document.getElementById("refont").innerHTML = "两次密码输入不一致";
return false;
}
}
//使用ajax进行操作
function getXMLHttpRequest() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
function onusernamechange() {
//ajax的逻辑
var xmlhttp=getXMLHttpRequest();
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4&&xmlhttp.status==200){
//从服务器获得的数据
var result=xmlhttp.responseText;
var usernamefont=document.getElementById("usernamefont");
if("1"==result){
//更新局部网页
usernamefont.color="red";
usernamefont.innerHTML="用户名已经存在";
}else{
usernamefont.color="green";
usernamefont.innerHTML="恭喜可用";
}
}
};
var url="${pageContext.request.contextPath}/servlet/CheckUserName?username="+document.getElementById("username").value;
xmlhttp.open("get",url);
xmlhttp.send();
}
</script>
</head>
<body>
<form method="post">
用户名:<input type="text" id="username" name="username" οnchange="onusernamechange();" /><font
id="usernamefont" color="red"></font><br> 密码:<input
id="password" type="password" name="password" /><br> 重复密码:<input
id="repassword" type="password" name="repassword" /><font
id="refont" color="red"></font><br> 头像:<input type="file"
name="icon" /><br> <input type="submit" value="注册"
οnclick="return myfunction();" />
</form>
</body>
</html>