初学ajax-------使用ajax判断验证码

1、ajax是什么?
asynchronous javascript and xml:异步的javascript和xml。是一种用来改善用户体验的技术，其本质是利用浏览器内置的一种特殊的对象(XMLHttpRequest)异步
(即发送请求时，浏览器不会销毁当前页面，用户可以继续在当前页面做其它的操作)的向服务器发送请求,并且利用服务器返回的数据(不再是一个完整的页面，只是部分的数据，一般使用文本或者xml返回)来部分更新当前页面。使用ajax技术之后，页面无刷新，并且不打断用户的操作。
2、ajax对象

(1)如何获得ajax对象?XMLHttpRequest并没有标准化，要区分浏览器:

function getXhr(){var xhr;if(window.XMLHttpRequest){//非ie浏览器xhr = new XMLHttpRequest();}else{//iexhr = new ActiveXObject('Microsoft.XMLHttp');}}

(2)ajax对象的属性

a, onreadystatechange : 绑订一个事件处理函数(注册监听器),当ajax对象的readyState值发生了改变(比如，从0-->1)，就会产生readystatechange事件。
b, responseText: 获得服务器返回的文本
c, responseXML:获得服务器返回的xml数据
d, status:获得状态码
e, readyState:ajax对象在与服务器进行通讯时，
通过readyState属性值可以获取该对象的通讯的状态，其属性有5个(0,1,2,3,4),当属性值为4时，表示ajax对象已经获得了服务器返回的所有的数据。
(3)ajax编程的基本步骤
step1, 先获得ajax对象
var xhr = getXhr();
step2, 发送请求
xhr.open(请求方式,请求地址,异步还是同步);
请求方式: get/post
请求地址:如果是get请求，请求参数要添加到请求地址的后面。true表示异步请求 ：ajax对象发请求的同时，用户可以对当前页面做其它的操作。false表示同步请求:ajax对象发请求的同时,浏览器会锁订当前页面，用户需要等待处理完成之后才能做下一步操作。
方式一：get请求

xhr.open('get','check_username.do?username=zs',true);xhr.onreadystatechange=f1;xhr.send(null);

方式二：post请求
xhr.open('post');
step3,编写服务器端的代码，服务器端一般不需要返回完整的页面，只需要返回部分的数据，比如一个简单的字符串。
step4, 编写监听器

function f1(){if(xhr.readyState == 4){//获得服务器返回的数据var txt = xhr.responseText;//dom操作}}

3，下面着重介绍一下Ajax中send方法的使用

Ajax中send方法参数的使用
一般情况下，使用Ajax提交的参数多是些简单的字符串，可以直接使用GET方法将要提交的参数写到open方法的url参数中，此时send方法的参数为null。例如 ：
  

    var url = "login.jsp?user=XXX&pwd=XXX";      xmlHttpRequest.open("GET",url,true);      xmlHttpRequset.send(null);

此外，也可以使用send方法传递参数。使用send方法传递参数使用的是POST方法，需要设定Content-Type头信息，模拟HTTP POST方法发送一个表单，这样服务器才会知道如何处理上传的内容。参数的提交格式和GET方法中url的写法一样。设置头信息前必须先调用open方法。
例如：  

   xmlHttpRequest.open("POST","login.jsp",true);     xmlHttpRequest.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");     xmlHttpRequest.send("user="+username+"&pwd="+password);

 需要注意的是根据提交方式的不同，两种提交方式分别调用后台的doGet方法和doPost方法。

4，下面是我写的一个验证用户合法性的ajax：

step1，生成验证码图片的servlet

import java.awt.Color;import java.awt.Graphics;import java.awt.image.BufferedImage;import java.io.IOException;import java.io.OutputStream;import java.util.Random;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.http.HttpSession;import com.sun.image.codec.jpeg.JPEGCodec;import com.sun.image.codec.jpeg.JPEGImageEncoder;public class CheckcodeServlet extends HttpServlet {   public void service(HttpServletRequest request,   HttpServletResponse response)throws ServletException,   IOException{   System.out.println("service...");   /*设置服务器返回文件的格式为jpg格式的图片    * 常见的还有text/html和text/xml    * */   response.setContentType("image/jpeg");   /*画图*/   //BufferedImage内存映像对象   BufferedImage image=new BufferedImage(60,20,BufferedImage.TYPE_INT_RGB);   Random r=new Random();   //获得画笔   Graphics g=image.getGraphics();   //设置背景颜色   g.setColor(new Color(r.nextInt(255),r.nextInt(255),r.nextInt(255)));   //填充背景颜色   g.fillRect(0,0,60,20);   //设置前景颜色   g.setColor(new Color(0,0,0));   //划线，起到干扰识别的作用   g.drawLine(r.nextInt(60), r.nextInt(20),    r.nextInt(60), r.nextInt(20));   g.drawLine(r.nextInt(60), r.nextInt(20),    r.nextInt(60), r.nextInt(20));   g.drawLine(r.nextInt(60), r.nextInt(20),    r.nextInt(60), r.nextInt(20));      //生成随机数   String number=String.valueOf(r.nextInt(99999));   //注意，给用户看的是图片+验证数字，放入Session对象的是验证 数字   HttpSession session=request.getSession();   session.setAttribute("number", number);     System.out.println(number);   //滑到图片上   g.drawString(number, 5, 15);   /*压缩图片并输出    * 获得字节输出流，因为要输出的是图像压缩之后的字节数组，所以不能用PrintWriter*/          OutputStream os=response.getOutputStream();       //将图片压缩输出       JPEGImageEncoder encoder=JPEGCodec.createJPEGEncoder(os);       encoder.encode(image);   }}

step2，写ActionServlet

import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.http.HttpSession;public class ActionServlet extends HttpServlet {    @SuppressWarnings("unused")public void service(HttpServletRequest request,HttpServletResponse     response)throws ServletException,IOException{    String uri=request.getRequestURI();    String path=uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));    response.setContentType("text/html;charset=utf-8");    //在服务器端，需要使用request.setCharacterEncoding("utf-8")去解码    request.setCharacterEncoding("utf-8");    PrintWriter out=response.getWriter();    if(path.equals("/check_username")){    if(1==2){    throw new ServletException("some error");    }    //模拟网络延迟    try{    Thread.sleep(5000);    }catch(InterruptedException e){    e.printStackTrace();    }    String username=request.getParameter("username");    System.out.println("username:"+username);    if(username.equals("张")){    out.println("用户名被占用");    }    else{    out.println("可以使用");    }    }    else if(path.equals("/check")){    String number1 = request.getParameter("number");// session中绑定的验证码HttpSession session = request.getSession();String number2 = (String) session.getAttribute("number");// 用于测试System.out.println("number1:" + number1);System.out.println("number2:" + number2);// 当用户禁用cookie，session将失效number2为nullif (number2 != null && number2.equals(number1)) {out.println("验证码正确");}else{out.println("验证码错误，请重新输入");}    }    out.close();    }}

step3，写jsp页面：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><html><head><script type="text/javascript" src="prototype-1.6.0.3.js"></script><script type="text/javascript">function getXmlHttpRequest() {var xhr = null;if ((typeof XMLHttpRequest) != 'undefined') {xhr = new XMLHttpRequest();} else {xhr = new ActiveXObject('Microsoft.XMLHttp');}return xhr;}function check_username() {//step1 获得XmlHttpRequest对象var xhr = getXmlHttpRequest();//step2 发送请求xhr.open('get', 'check_username.do?username=' + $F('username'), true);xhr.onreadystatechange = function() {//step4获取服务器返回的数据，更新页面if (xhr.readyState == 4) {var txt = xhr.responseText;$('username_msg').innerHTML = txt;} else {$('username_msg').innerHTML = '正在验证。。。';}};xhr.send(null);}function check_username2() {//获得XmlHttpRequest对象var xhr = getXmlHttpRequest();//发送请求var uri = 'check_username.do?username=' + $F('username');xhr.open('get', encodeURI(uri), true);//xhr.open('post', 'check_username.do', true);xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");xhr.onreadystatechange = function() {//获取服务器返回的数据，更新页面if (xhr.readyState == 4) {if (xhr.status == 200) {var txt = xhr.responseText;$('username_msg').innerHTML = txt;} else {$('username_msg').innerHTML = '系统错误';}} else {$('username_msg').innerHTML = '正在验证。。。';}};xhr.send('username=' + $F('username'));}function check_number(){   //获得XmlHttpRequest对象var xhr = getXmlHttpRequest();//发送请求var uri = 'check.do?number=' + $F('number');xhr.open('get', encodeURI(uri), true);//xhr.open('post', 'check_username.do', true);xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");xhr.onreadystatechange = function() {//获取服务器返回的数据，更新页面if (xhr.readyState == 4) {if (xhr.status == 200) {var txt = xhr.responseText;$('number_msg').innerHTML = txt;} else {$('number_msg').innerHTML = '系统错误';}} else {$('number_msg').innerHTML = '正在验证。。。';}};xhr.send('number=' + $F('number'));}</script></head><body><form action="check.do" method="post"><fieldset><legend>注册</legend>用户名:<input id="username" name="username" onblur="check_username2();" /><span style="color:red;" id="username_msg"></span> <br /> 密码:<inputtype="password" name="pwd" /><br /> 验证码:<input name="number"id="number" onblur="check_number();" /> <span style="color:red;"id="number_msg"></span> <br /> <img src="checkcode" id="img1" /> <ahref="javascript:;"onclick="$('img1').src='checkcode?' + Math.random();">看不清，换一个</a><br /><input type="submit" value="确定" /></fieldset></form></body></html>

step4，web.xml配置