验证码调用和web中字节字符流的解释

首先，要学习验证码的制作，要理解字节流和字符流的作用。要向客户端转发消息，就要通过字节流或者字符流，在jsp中，发送消息的对象时out字符流。他可以发送文本消息。但是不能发送音频和视频图片等信息。这就促使了字节流的出现。
当然同字节流相比，字符流更加的快速。
今天我给大家要讲的是使用字节流向客户端发送验证码，并且将存在的几个问题给大家解释清楚。

<%@page import="java.awt.Color"%>
<%@page import="java.awt.Graphics"%>
<%@page import="java.io.OutputStream"%>
<%@page import="com.sun.image.codec.jpeg.JPEGImageEncoder"%>
<%@page import="java.awt.image.BufferedImage"%>
<%@page import="com.sun.image.codec.jpeg.JPEGCodec"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    out.clearBuffer();
    out = pageContext.pushBody();
    //告诉浏览器你要传送什么内容
    response.setHeader("content-type", "image/jpeg");
    //创建一张在内存中的照片
    BufferedImage bi = new BufferedImage(100,20,BufferedImage.TYPE_INT_RGB);

    //涂鸦
    Graphics g = bi.getGraphics();
    String letters = "ABCDEFGHIJKLMNOPQRSJYVWXYZabcdefghijklmnopqrsjyvwxyz0123456789";
    for(int i = 0;i < 4;i++)
    {
        int rand = (int)(Math.random()*62); 
        int rand1 = (int)(Math.random()*255);   
        int rand2 = (int)(Math.random()*255);   
        int rand3 = (int)(Math.random()*255);   

        char c = letters.charAt(rand);
        g.setColor(new Color(rand1,rand2,rand3));
        g.drawString(c+"",i*20+10,15);
        }
    for(int i = 0;i < 4;i++){
    int x1 = (int)(Math.random()*10);
    int x2 = (int)(Math.random()*50);
    int y1 = (int)(Math.random()*50);
    int y2 = (int)(Math.random()*100);
    g.drawArc(x1,x2, y1, y2, 0,360);
    }
    //把图片发送给客户端
    OutputStream os = response.getOutputStream();
    JPEGImageEncoder j = JPEGCodec.createJPEGEncoder(os);
    j.encode(bi);   


%>

问题一
由于支持库的版本问题，可能识别不出来JPEGCodec这个类，
解决办法：


然后选择1.7版本的或者其他版本点击完成。就可以使用了。
问题二
在创建字节流时，必须关闭字符流也就是将out关闭。

    out.clearBuffer();
    out = pageContext.pushBody();

问题三
告诉浏览器你要传送什么内容

response.setHeader("content-type", "image/jpeg");

这里还使用了html界面进行操作，有兴趣的可以看看

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<script type="text/javascript">
//整个html页面加载完成之后进行的操作
 window.onload = function(){
    // 获取id的dom操作对象
    var m1 = document.getElementById("m1");
    var change = document.getElementById("change");
    //添加单击事件
    change.onclick = function(){
    //更换照片，
    /*
        这里面存在一个问题，由于浏览器的原因，当请求同一内容时，浏览器先会检查请求请求的是否和上次一致，如果更改，则会去重新加载，否则，服务器相应304，使用缓存，等于没有更改当前页面，所以必须加上毫秒数，使得每次都会加载新的页面。

*/
        m1.src = "index.jsp?a = "+new Date().getTime();
    }
 }
</script>
<form method="post">
    用户名：<input type="text" name="name"/> <br />
    密码：<input type="password" name="password"/> <br />
    验证码:<input type="text" /><img id="m1" src="index.jsp" /> <br />
    <button type="submit">GO</button>
        <button type="button" id="change">看不清换一张</button>
</form>