1.register_get.html(get方法提交)

function getSend() {

//xmlhttprequest对象

var xmlhttp;

if (window.XMLHttpRequest) {// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码

xmlhttp = new XMLHttpRequest();

} else { // IE6, IE5 浏览器执行代码

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }

//验证用户名是否存在

if (xmlhttp) {

var user = document.getElementById("username").value;

alert(user);

var url = "registerProcess.jsp?username=" + user;

//var url="registerProcess.jsp?myTime="+new Date()+"&username="+user;

xmlhttp.open("GET", url, true);

//myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

//回调函数

xmlhttp.onreadystatechange = function() {

alert(xmlhttp.readyState + ":" + xmlhttp.status);

if (xmlhttp.readyState == 4)

document.getElementById("yanzheng").innerHTML = xmlhttp.responseText; }

xmlhttp.send(null); } }

</script></head><body>

username<input type="text" id="username" name="username"> <input

type="button" οnclick="getSend()" value="验证"><span

style="color: red" id="yanzheng"></span><br>

</form></body></html>

2.register_post.html（post方法提交）

<!DOCTYPE html>

<title>Insert title here</title>

//创建对象

function getXmlhttpRequest(){

var xmlHttpRequest;

if (window.XMLHttpRequest)

{// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码

xmlHttpRequest=new XMLHttpRequest(); }

else { // IE6, IE5 浏览器执行代码

xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP"); }

return xmlHttpRequest;}

//验证用户名

var myXmlHttpRequest="";

function checkName() {

myXmlHttpRequest=getXmlhttpRequest();

if(myXmlHttpRequest){

var url="registerProcess.jsp";

var data="username="+document.getElementById("username").value;

alert("data:"+data);

myXmlHttpRequest.open("post",url,true);

myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

myXmlHttpRequest.onreadystatechange=function(){

alert(myXmlHttpRequest.readyState);

if (myXmlHttpRequest.readyState==4)

document.getElementById("yanzheng").innerHTML=myXmlHttpRequest.responseText;}

myXmlHttpRequest.send(data); }}

</script></head><body>

username<input type="text" id="username" name="username"><span style="color:red" id="yanzheng"></span><br>

</form></body></html>

3.RegisterProcess.jsp(发出ajax请求的JSP页面)

<%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%>

<body>

<%request.setCharacterEncoding("utf-8");

String username=request.getParameter("username");

System.out.println(username+" ");

out.print(username);

if(username.equals("lx")) out.print("用户名不可用 ");

else out.print("用户名可用");%>

</body>

结果分析：

ajax的get、post验证用户名

在实验过程中，主要遇到了三个问题，第一个是用get方法提交获取的参数总是为null，查了资料，与同学讨论后还没解决，后来请教老师，经过一次次检查，是在传两个值的时候两者之间没加&符号，这种细节问题一定要注意，不能再犯；第二个问题是在用get方法提交时，用户名不变的情况下浏览器不会真的发送请求而是只缓存数据，但在观察控制台发现尽管没有采取任何方法，在提交相同用户名时会有提交，这个问题需要课后查资料，真正理解缓存的意义；第三个就是equals与==的区别，在验证时用==来判断一直没有出现所需结果，换成equals就对了，通过这个问题，回顾并加深了对两者区别的理解。

ajax的get、post验证用户名

相关推荐