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

发布时间：2020-12-16 01:02:21 所属栏目：百科来源：网络整理

导读：1、ajax是什么? asynchronous javascript and xml:异步的javascript和xml。是一种用来改善用户体验的技术，其本质是利用浏览器内置的一种特殊的对象(XMLHttpRequest)异步 (即发送请求时，浏览器不会销毁当前页面，用户可以继续在当前页面做其它的操作)的向服

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{
//ie
xhr = 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,60,20);
	   //设置前景颜色
	   g.setColor(new Color(0,0));
	   //划线，起到干扰识别的作用
	   g.drawLine(r.nextInt(60),r.nextInt(20),r.nextInt(60),r.nextInt(20));
	   g.drawLine(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为null
			if (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',"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 /> 密码:<input
				type="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" /> <a
				href="javascript:;"
				onclick="$('img1').src='checkcode?' + Math.random();">看不清，换一个</a><br />
			<input type="submit" value="确定" />
		</fieldset>
	</form>
</body>
</html>

step4，web.xml配置

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!