学习aiax(javascript)--页面无刷新用ajax检查用户名是否已注册（POST方式）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了学习aiax(javascript)--页面无刷新用ajax检查用户名是否已注册（POST方式）相关的知识，希望对你有一定的参考价值。
1.jsp代码
<%@ 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>页面无刷新用ajax检查用户名是否已注册（POST方式）</title> <script type="text/javascript"> function createAJAX() { var ajax = null; try { ajax = new ActiveXObject("microsoft.xmlhttp"); //alert("你的浏览器支持ajax,是IE"); } catch (e1) { ajax = new XMLHttpRequest(); //alert("你的浏览器支持ajax,是非IE"); } return ajax; } </script> </head> <body> <form> 用户名(POST):<input id="username" name="username"/> <span id="span"></span> </form> </body> <script type="text/javascript"> window.document.getElementById("username").onblur = function() { var username = this.value; //1.创建一部对象 var ajax = createAJAX(); //2.异步对象准备发送请求 var method = "post"; var url = "${pageContext.request.contextPath}/UserAjaxServlet?time = " + new Date().getTime(); ajax.open(method, url); //设置AJAX请求头为POST，他会将请求体中的汉字自动进行UTF-8的编码 ajax.setRequestHeader("content-type","application/x-www-form-urlencoded"); //3.AJAX异步对象真正发送请求体的数据到服务器，如果请求体无数据的话，用null表示,如果有值，用键值对 var content = "username=" + username; ajax.send(content); //---------------------------------等待------------------------- //4. AJAX异步对象不断监听服务端状态的变化，只有状态码变化了，方可触发函数 //0-1-2-3-4,这些是可以触发函数的 //4-4-4-4-4，这些是不可以触发函数的 //以下这个函数是服务器来触发的，不是程序员触发的，这和onclick是不一样的 ajax.onreadystatechange = function() { //如果状态码为4 if (ajax.readyState == 4) { //如果服务器响应为200 if (ajax.status == 200) { //5. 从AJAX异步对象中获取服务器响应的结果 var tip = ajax.responseText; //创建img var imgElement = document.createElement("img"); //设置标签的属性 imgElement.src = tip; imgElement.style.width ="14px"; imgElement.style.height ="14px"; //定位span标签 var spanElement = document.getElementById("span"); //清空span里的值 spanElement.innerHTML = ""; //将img加入到span里边 spanElement.appendChild(imgElement); } } } } </script> </html>
2.servlet代码
package com.buaa.ajax; 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; @WebServlet("/UserAjaxServlet") public class UserAjaxServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); response.setContentType("text/html;charset=UTF-8"); String username = request.getParameter("username"); System.out.println("username：" + username); String tip = "images/MsgSent.gif"; if ("杰克".equals(username)) { tip = "images/MsgError.gif"; } PrintWriter pw = response.getWriter(); pw.write(tip); pw.flush(); pw.close(); } }
注意：POST提交要设置头文件
以上是关于学习aiax(javascript)--页面无刷新用ajax检查用户名是否已注册（POST方式）的主要内容，如果未能解决你的问题，请参考以下文章
学习aiax(javascript)--省份-城市二级下拉联动（POST方式）