ajax的简单实现Demo

最新推荐文章于 2022-10-10 22:47:47 发布

我自是年少韶华倾负

最新推荐文章于 2022-10-10 22:47:47 发布

阅读量973

点赞数

分类专栏： java

本文链接：https://blog.csdn.net/qq_38345598/article/details/107009063

版权

java 专栏收录该内容

87 篇文章 1 订阅

订阅专栏

首先先声说抱歉，因为在寝室，所以效率低一些，就不写一些关于ajax的知识了，如果想学可以去w3school搜索ajax

这里主要实现了通过ajax来判断用户名是否已经被注册，为了实现简单后台的匹配直接使用了admin

一、前端实现

<%@ 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=utf-8">
<title>Insert title here</title>
<base href="${pageContext.request.scheme }://${pageContext.request.serverName}:${pageContext.request.serverPort }/${pageContext.request.contextPath}"/>
</head>
<body>
<script type="text/javascript">
 function checkUsername(username) {
	 var xhr;
	 if(window.XMLHttpRequest)
		 {
		 xhr=new XMLHttpRequest();
		 }
	 else 
		 {
		 xhr=new ActiveXObject("Microsoft.XMLHTTP");
		 }
	 xhr.onreadystatechange=function()
	 {
		 if(xhr.readyState==4)
			 {  
			 if(xhr.status==200)
				 {
				   var myname=document.getElementById("myname");
				   myname.innerHTML=xhr.responseText;
				 }
			 else 
				 {
				 alert("错误");
				 }
			 }
		 
		 
		 
	 }
	 xhr.open("GET","/myweb/checkUsername.do?username="+username,true);
	 //发送相关 的请求
	 xhr.send();
}

</script>
 姓名:<input type="text" name="username" onblur="checkUsername(this.value)"><span id="myname" style="font-size: 12px"></span><br>
 密码 :<input type="password" name="userpassword">

</body>
</html>

二、Servlet

package com.ui.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class chechUsername
 */
@WebServlet("/checkUsername.do")
public class chechUsername extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public chechUsername() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=utf-8");
	     PrintWriter out=response.getWriter();
	     String username=request.getParameter("username");
	     System.out.println(username);
	     if("admin".equals(username))
	     {
	    	 out.print("<font color='red'>用户名已经注册</font>");
	     }
	     else 
	     {
	    	 out.print("<font color='green'>用户名可以</font>");
	     }
		
		
		
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

三、实现结果

我自是年少韶华倾负

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax的简单实现Demo

首先先声说抱歉，因为在寝室，所以效率低一些，就不写一些关于ajax的知识了，如果想学可以去w3school搜索ajax这里主要实现了通过ajax来判断用户名是否已经被注册，为了实现简单后台的匹配直接使用了admin一、前端实现<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><!DOCTYPE html PUBLIC "-//W3C//DT.
复制链接

扫一扫