如何获得Ajax对象?
XMLHttpRequest没有标准化,要区分浏览器。
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
//非ie浏览器
xhr = new XMLHttpRequest();
}else{
//ie浏览器
xhr = new ActiveXObject('MicroSoft.XMLHttp');
}
return xhr;
}
下面我把代码贴出来:
<%@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(); } }
4.画验证码CheckcodeServlet.java
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(); } }
5.配置文件web.xml
<?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对象向
服务器发请求时,浏览器不会销毁当前页面,用户仍然可以对当前页面做其它的操作)向服务器发送请求。 服务器返回的数据不再是一个完整的新的页面,而是部分数据,利用这些数据,更新当前页面。整个过程,页面无刷新,不打断用户的操作。