ajax注册页面异步验证
发布时间：2020-12-16 01:39:14 所属栏目：百科 来源：网络整理
导读：650) this.width=650;" alt="" src="http://img.jb51.cc/vcimg/static/loading.png" src="http://img.blog.csdn.net/20160306101406125"> ajax的原理大家可以看上图 如何获得Ajax对象？ XMLHttpRequest没有标准化，要区分浏览器。 function getXhr(){ var xh
|
如何获得Ajax对象？ XMLHttpRequest没有标准化，要区分浏览器。 下面我把代码贴出来： 1.注册页面regist.jsp <%@pagepageEncoding="utf-8"contentType="text/html;charset=utf-8"%>
<html>
<head>
<style>
.tips{
color:red;
}
</style>
<scripttype="text/javascript"src="js/my.js"></script>
<scripttype="text/javascript">
functioncheck_username(){
//获得ajax对象
varxhr=getXhr();
//使用ajax对象发请求
xhr.open('get','check_username.do?username='
+$F('username'),true);
xhr.onreadystatechange=function(){
//只有readyState等于4，才能获得
//服务器返回的所有数据。
if(xhr.readyState==4){
//判断服务器返回的数据是否正确
if(xhr.status==200){
vartxt=xhr.responseText;
$('username_msg').innerHTML=txt;
}else{
$('username_msg').innerHTML='验证出错';
}
}
};
$('username_msg').innerHTML='正在验证...';
xhr.send(null);
}
functioncheck_number(){
varxhr=getXhr();
xhr.open('get','check_number.do?number='
+$F('number'),true);
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
vartxt=xhr.responseText;
$('number_msg').innerHTML=txt;
}
};
xhr.send(null);
}
</script>
</head>
<bodystyle="font-size:30px;font-style:italic;">
<formaction="regist.do"method="post">
<fieldset>
<legend>注册</legend>
用户名:<inputid="username"name="username"
onblur="check_username();"/>
<spanclass="tips"id="username_msg"></span>
<br/>
真实姓名:<inputname="name"/><br/>
验证码:<inputname="number"id="number"
onblur="check_number();"/>
<spanclass="tips"id="number_msg"></span>
<br/>
<imgsrc="checkcode"
onclick=""http://blog.51cto.com/viewpic.php?refimg=" + this.src='checkcode?'+Math.random();"/><br/>
<inputtype="submit"value="提交"/>
</fieldset>
</form>
</body>
</html>
2.获得ajax对象my.js function$(id){
returndocument.getElementById(id);
}
function$F(id){
return$(id).value;
}
functiongetXhr(){
varxhr=null;
if(window.XMLHttpRequest){
//非ie浏览器
xhr=newXMLHttpRequest();
}else{
//ie浏览器
xhr=newActiveXObject("MicroSoft.XMLHttp");
}
returnxhr;
}
3.servlet验证页面ActionServlet.Java packageweb;
importjava.io.IOException;
importjava.io.PrintWriter;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
importjavax.servlet.http.HttpSession;
publicclassActionServletextendsHttpServlet{
publicvoidservice(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
response.setContentType("text/html;charset=utf-8");
PrintWriterout=response.getWriter();
Stringuri=request.getRequestURI();
Stringaction=uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));
if(action.equals("/check_username")){
if(1==2){
thrownewServletException("");
}
Stringusername=
request.getParameter("username");
if(username.equals("tom")){
out.println("用户名存在");
}else{
out.println("用户名未被注册");
}
}elseif(action.equals("/check_number")){
Stringnumber1=
request.getParameter("number");
HttpSessionsession=
request.getSession();
Stringnumber2=
(String)session.getAttribute("number");
if(number1.equalsIgnoreCase(number2)){
out.println("验证码正确");
}else{
out.println("验证码错误");
}
}
out.close();
}
}
packageweb;
importjava.awt.Color;
importjava.awt.Font;
importjava.awt.Graphics;
importjava.awt.image.BufferedImage;
importjava.io.IOException;
importjava.io.OutputStream;
importjava.util.Random;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
importjavax.servlet.http.HttpSession;
publicclassCheckcodeServletextendsHttpServlet{
privateintwidth=80;
privateintheight=30;
publicvoidservice(HttpServletRequestrequest,IOException{
/*
*绘图
*/
//step1,创建一个内存映像对象(画布)
BufferedImageimage=
newBufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
//step2,获得画笔
Graphicsg=image.getGraphics();
//step3,给笔上一个颜色
Randomr=newRandom();
g.setColor(newColor(r.nextInt(255),r.nextInt(255),r.nextInt(255)));
//step4,绘图,先填充背景
g.fillRect(0,width,height);
//step5,给画笔再设置一个颜色，用来
//绘图
g.setColor(newColor(0,0));
g.setFont(newFont(null,Font.BOLD,20));
Stringnumber=r.nextInt(99999)+"";
HttpSessionsession=
request.getSession();
session.setAttribute("number",number);
g.drawString(number,10,22);
/*
*输出
*/
//step1,设置content-type消息头，告诉浏览器
//返回的是一个图片
response.setContentType("image/jpeg");
//step2,获得一个字节输出流
OutputStreamops=
response.getOutputStream();
//step3,将原始图片压缩，然后输出
javax.imageio.ImageIO
.write(image,"jpeg",ops);
ops.close();
}
}
<?xmlversion="1.0"encoding="UTF-8"?> <web-appversion="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> <servlet> <servlet-name>ActionServlet</servlet-name> <servlet-class>web.ActionServlet</servlet-class> </servlet> <servlet> <servlet-name>checkcodeServlet</servlet-name> <servlet-class>web.CheckcodeServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>ActionServlet</servlet-name> <url-pattern>*.do</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>checkcodeServlet</servlet-name> <url-pattern>/checkcode</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app> 代码我都贴出来了，只是一个简单的验证，来测试一下：
ajax是一种用来改善用户体验的技术，其实质是利用浏览器提供的一个特殊的对象(XMLHttpRequest对象，一般称之为ajax对象)异步地(当ajax对象向 来自本人CSDN:http://www.52php.cn/article/p-mzexsmjg-ms.html （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
