Ajax用户名验证实战-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42350288/article/details/80698955

今天的作业使用Ajax验证用户名，实现无刷新用户名验证

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>ajax</title>
</head>
<script type="text/javascript">
  function cheakUser(){
	  //获取文本框对象
	var num=document.getElementById("yon").value;
	if(num==""){
		alert("username is not empty");
		return false;
	}else{
		doAjax("ajax.do?users="+num);
	}
	return true;
  }
	//ajax 引擎的核心对象  xmlhttprequest
	   var xmlhttp;
	   function doAjax(url){
		   //根据不同的浏览器创建xmlhttprequest
		   try {
				xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				try {
					xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
				} catch (e) {
					try {
						xmhttp = new XMLHttpRequest();
						if (xmlhttp.overrideMimeType) {
							xmlhttp.overrideMimeType("text/xml");
						}
					} catch (e) {}
				}
			}
	xmlhttp.onreadystatechange=gg;
	xmlhttp.open("post",url,true);
	//如果以post方式来请求必须要添加
	xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	xmlhttp.send(null);
 }
	   //定义一个回调函数
        //回调函数
		function gg() {
        	//获取div层的内容
		var	divs=document.getElementById("mydiv")
        	//就绪状态是4而且状态码是200，才可以处理服务器数据
			if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {
				//输出服务器给客户端相应的内容
				
				
				if(xmlhttp.responseText=="ok"){
					divs.innerHTML="Username can not be registered"
				}else if(xmlhttp.responseText=="err"){
					divs.innerHTML="Username can be registered"
				}
			}
		}	
		
		
</script>
<body>
<form action="" method="post" >
      用户名<input type="text" name="username" onblur="cheakUser()" id="yon">
      密 码<input type="text" name="password">
      <input type="submit" value="登录">  
    </form>
    <div id="mydiv"></div>
</body>
</html>

<?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" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  <display-name>6.14</display-name>
<servlet>
<servlet-name>ajaxServlet</servlet-name>
<servlet-class>com.action.UserServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ajaxServlet</servlet-name>
<url-pattern>/ajax.do</url-pattern>
</servlet-mapping>
</web-app>

package com.action;

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 UserServlet extends HttpServlet{
       @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    	// TODO Auto-generated method stub
    	
    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    	// TODO Auto-generated method stub
    	   //定义一个打印流
    	PrintWriter oo=resp.getWriter();
    	//获取文本框内容
    	String username=req.getParameter("users");
    	if (username.equals("lihaijie")) {
			oo.print("ok");
		}else {
			oo.print("err");
		}

    }
}

今天学习了Ajax