首页 > 代码库 > 网页中使用传统方法实现异步校验具体解释
网页中使用传统方法实现异步校验具体解释
学习JavaScript异步校验时往往是从最传统的XMLHttpRequest学起，今天星期六。我来谈一下对传统校验的认识：
代码1——index.jsp文件：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>怎样使用传统方法异步验证username的唯一性</title>
<script type="text/javascript">
function goDemo(pageName){
window.location.href=http://www.mamicode.com/''+pageName;> 代码2——demo1.jsp文件：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>使用的servlet中的doGet方法</title>
<script type="text/javascript">
function checkUserName(){
var value=http://www.mamicode.com/document.getElementById("userName").value;>");
var responseValue=http://www.mamicode.com/xmlHttpRequest.responseText;>
！
</font>";
}
}else{//与Servlet交互出现故障
document.getElementById("showUserName").innerHTML="<font size=\"2\" color=\"red\">请求发送失败。</font>";
}
}
};
if(xmlHttpRequest.readyState==0){
xmlHttpRequest.open("get","<%=basePath%>AjaxCheckUserNameServlet?userName="+value,true);//第二步：完毕请求初始化。提出请求。
open方法中的三个參数各自是：请求方式、路径、是否异步（true表示异步。false表示同步）
}
}
}
</script>
</head>
<body>
<center style="margin-top: 10%"><font style="color: red;font-size: 18pt;font-weight: bold;">使用的servlet中的doGet方法</font><br><br>
username：<input type="text" id="userName" name="userName" size="27" onblur="checkUserName();">
<font size="2" id="showUserName"> *username必填，具有唯一性。
</font>
</center>
</body>
</html>
代码3——demo2.jsp文件：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>使用的servlet中的doPost方法</title>
<script type="text/javascript">
function checkUserName(){
var value=http://www.mamicode.com/document.getElementById("userName").value;>");
}
if(xmlHttpRequest.readyState==4){//client接收server端信息完毕。第四步：处理server端发回来的响应信息
if(xmlHttpRequest.status==200){//与Servlet成功交互
console.log("client已全然接收server端的处理响应。
");
var responseValue=http://www.mamicode.com/xmlHttpRequest.responseText;>
！
。</font>";
}
}else{//与Servlet交互出现故障
document.getElementById("showUserName").innerHTML="<font size=\"2\" color=\"red\">请求发送失败！
</font>";
}
}
};
if(xmlHttpRequest.readyState==0){
xmlHttpRequest.open("post","<%=basePath%>AjaxCheckUserNameServlet?userName="+value,true);//第二步：完毕请求初始化，提出请求。
open方法中的三个參数各自是：请求方式、路径、是否异步（true表示异步，false表示同步）
}
}
}
</script>
</head>
<body>
<center style="margin-top: 10%"><font color="red" size="5"><strong>使用的servlet中的doPost方法</strong></font><br><br>
username：<input type="text" id="userName" name="userName" size="27" onblur="checkUserName()">
<font size=2 id="showUserName"> *username必填，具有唯一性。
</font>
</center>
</body>
</html>
代码4——AjaxCheckUserNameServlet.java文件：
package com.ghj.packagofserlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AjaxCheckUserNameServlet extends HttpServlet {
private static final long serialVersionUID = 6387744976765210524L;
/**
* 处理demo1.jsp中异步验证
*
* @author GaoHuanjie
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
try{
response.setCharacterEncoding("UTF-8");
request.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
//System.out.println(1/0);//有益出现异常。以检查demo1.jsp中xmlHttpRequest.status!=200的分支语句是否可用
String userName=request.getParameter("userName");//获取“username”
System.out.println("处理demo1.jsp中异步验证，username为："+userName);
if ("admin".equals(userName)) {
out.print("1");//“1”表示username不可用。
} else {
out.print("2");//“2”表示username可用。
}
out.flush();
out.close();
}catch (Exception e) {
e.printStackTrace();
response.setStatus(405);
}
}
/**
* 处理demo2.jsp中异步验证
*
* @author GaoHuanjie
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
try{
response.setCharacterEncoding("UTF-8");
request.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
//System.out.println(1/0);//有益出现异常，以检查demo2.jsp中xmlHttpRequest.status!=200的分支语句是否可用
String userName=request.getParameter("userName");//获取“username”
System.out.println("处理demo2.jsp中异步验证，username为："+userName);
if ("admin".equals(userName)) {
out.print("1");//“1”表示username不可用。
} else {
out.print("2");//“2”表示username可用。
}
out.flush();
out.close();
}catch (Exception e) {
e.printStackTrace();
response.setStatus(405);
}
}
}
代码5——web.xml文件：
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
<servlet>
<servlet-name>AjaxCheckUserNameServlet</servlet-name>
<servlet-class>com.ghj.packagofserlet.AjaxCheckUserNameServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AjaxCheckUserNameServlet</servlet-name>
<url-pattern>/AjaxCheckUserNameServlet</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app> 【0分下载资源】 网页中使用传统方法实现异步校验具体解释