ajax入门教程（一）

来源：互联网发布：淘宝家装设计编辑：程序博客网时间：2024/04/27 15:35

ps:目前只实现用户名的简单验证

在myeclipse的WebRoot下新建两个jsp界面register.jsp、registerProcess.jsp。如下图：

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>用户注册</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">

<script type="text/javascript">
var xmlhttp;
function getXmlHttpRequest(){
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}

function checkName(){
getXmlHttpRequest();
if(xmlhttp)
{
var url="http://localhost:8080/ajax/jsp/registerProcess.jsp?username="+encodeURI(encodeURI($("username").value));//对用户名进行编码
alert(url);
xmlhttp.open("get",url,true);
xmlhttp.onreadystatechange=deal;
xmlhttp.send(null);
}
}
function $(id){
return document.getElementById(id);
}
function deal(){
if(xmlhttp.readyState==4){
if(xmlhttp.status==200){
//document.getElementById("myres").value=xmlhttp.responseText;
document.getElementById("myres").value=decodeURI(xmlhttp.responseText);//对从registerProcess.jsp传回的用户名验证的结果进行解码
}
}
}
</script>
</head>
<body>
<form action="" method="post">
用户名：<input type="text" name="username" id="username"><button type="button" onclick="checkName()">用户验证</button>
<input style="border-width:0;color:red" type="text" id="myres"><br>
密码： <input type="password" name="password"><br>
邮箱： <input type="text" name="email"><br>
<input type="submit" value="用户注册" >
</form >
</body>
</html>

registerProcess.jsp代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%@page import="java.net.URLEncoder"%>

<%@page import="java.net.URLDecoder"%>
<%
String username=java.net.URLDecoder.decode(request.getParameter("username"), "utf-8");//将register.jsp传过来的数据进行解码
String test="abc";
if(username.equals(test))
out.println(URLEncoder.encode("用户名可用","utf-8"));//进行简单的测试，将结果传回的时候同样需要编码。目的是防止中文乱码。
%>

运行结果图：

1 0