标签:stat pwd gif 注册 this min lan span status
我们先看一下js的原生ajax
直接进入代码,我们先准备好servlet,之后不会改动,所以先看一下。
package cn.curry.servlet; import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.serializer.SerializerFeature; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.util.ArrayList; import java.util.List; /** * Created by a on 2017/3/16. */ public class RegisterServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String name=request.getParameter("name"); if("admin".equals(name)){ //打回浏览器 “已经注册” response.getWriter().write("Your Account Is Already Registered"); } else{ //可以注册 response.getWriter().write("You Can Register This Account"); } } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request,response); } }
很简单的servlet页面,然后我们看前台jsp展示页面,我写的是发送post,请求。
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>注册</title> <script type="text/javascript"> function checkUser(){ var value=document.getElementById("username").value; var url="RegisterServlet"; var xhr; if(window.XMLHttpRequest){ //非IE浏览器 Chrome 等 xhr=new XMLHttpRequest(); }else{ //IE xhr=new ActiveXObject("Microsoft.XMLHTTP"); } xhr.open(‘post‘,url,true); xhr.onreadystatechange=function(){ if(xhr.readyState==4&&xhr.status==200){ var content=xhr.responseText; document.getElementById("msg").innerText=content; } } xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded") xhr.send("name="+value); } </script> </head> <body> <input id="username" name="username" onblur="checkUser()"/><span id="msg"></span><br/> <input name="userpwd"/> </body> </html>
简单改一下就可以实现发送get请求。
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>注册</title> <script type="text/javascript"> function checkUser(){ var value=document.getElementById("username").value; var url="RegisterServlet?name="+value; var xhr; if(window.XMLHttpRequest){ //非IE浏览器 Chrome 等 xhr=new XMLHttpRequest(); }else{ //IE xhr=new ActiveXObject("Microsoft.XMLHTTP"); } xhr.open(‘get‘,url,true); xhr.onreadystatechange=function(){ if(xhr.readyState==4&&xhr.status==200){ var content=xhr.responseText; document.getElementById("msg").innerText=content; } } xhr.send(null); } </script> </head> <body> <input id="username" name="username" onblur="checkUser()"/><span id="msg"></span><br/> <input name="userpwd"/> </body> </html>
接下来看jQuery的,简单了很多。
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>注册</title> <script type="text/javascript" src="jq/jQuery1.11.1.js"></script> <script type="text/javascript"> function checkUser() { var value=document.getElementById("username").value; $.ajax({ url : "RegisterServlet", type : "GET", data : "name="+value, dataType : "text", success : function(result){ document.getElementById("msg").innerText=result; }, error:function () { document.getElementById("msg").innerText=result; } }); } </script> </head> <body> <input id="username" name="username" onblur="checkUser()"/><span id="msg"></span><br/> <input name="userpwd"/> </body> </html>
标签:stat pwd gif 注册 this min lan span status
原文地址:http://www.cnblogs.com/an-z/p/6580264.html