【皇甫】☀ 易买网_登录模块 上

 

　　指导老师：北大青鸟五道口 原玉明

　　先附张效果图：

需要掌握知识点：aJAX和layer 验证码

知识掌握：Ajax

AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

使用Javascript向服务器提出请求并处理响应而不阻塞用户！核心对象XMLHTTPRequest。通过这个对象，您的 JavaScript 可在不重载页面的情况与Web服务器交换数据。

AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。

AJAX 可使因特网应用程序更小、更快，更友好。

AJAX 工作原理

AJAX 是一种独立于 Web 服务器软件的浏览器技术。　AJAX 基于下列 Web 标准：

JavaScriptXMLHTMLCSS在 AJAX 中使用的 Web 标准已被良好定义，并被所有的主流浏览器支持。AJAX 应用程序独立于浏览器和平台。

Web 应用程序较桌面应用程序有诸多优势；它们能够涉及广大的用户，它们更易安装及维护，也更易开发。

不过，因特网应用程序并不像传统的桌面应用程序那样完善且友好。

通过 AJAX，因特网应用程序可以变得更完善，更友好。

layer：

layer，一个可以让你想到即可做到的web弹窗（层）解决方案（js组件），作者贤心（前端开发工程师）。layer侧重于用户灵活的自定义，为不同人的使用习惯提供动力。其意义在于，可以让您的页面拥有更丰富与便捷的操作体验，而您只需在调用时简单地配置相关参数，即可轻松实现。

与同类弹出层组件相比，layer的优势明显，她尽可能地在以更少的代码展现出更强健的功能。layer格外注重性能的提升，在多层模式的回调处理中，具备其它多数层组件所没有的“独立不冲突”（截至到2013年10月23，已有115859人次关注新版layer）。您完全可以大可放心地在页面弹出任意数量的层，她们彼此不妨碍。当你问及她的兼容时，layer必须告诉你，她兼容了一切浏览器，包括古老的ie6。

layer公开了如此多的接口（api），这使得您可以DIY太多您需要的风格，尤其是页面层模式，意味着必要时您可以完全抛弃layer的现有皮肤，并用你的思维去勾勒她的衣着。而问题在于，我必须中止“王婆卖瓜”的陈述。因为一切的不足或友好，都需要您在使用过程中去发现。

据不完全统计，截至到2013年8月30号，layer已服务于6000多家web平台。layer作为layUI库的成员，将一直致力于为web开发提供动力。

验证码：

package cn.weilengdeyu.easybuy.web;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.PrintWriter;

import java.util.Random;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class Num extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
      doPost(request,response);
    }

    
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        //设置页面不缓存  
        response.setHeader("Pragma", "No-cache");
        response.setHeader("Cache-Control", "no-cache");
        response.setDateHeader("Expires", 0);
        // 在内存中创建图象  
        int width = 60, height = 20;
        BufferedImage image = new BufferedImage(width, height,
                BufferedImage.TYPE_INT_RGB);
        // 获取图形上下文  
        Graphics g = image.getGraphics();
        //生成随机类  
        Random random = new Random();
        // 设定背景色  
        g.setColor(getRandColor(200, 250));
        g.fillRect(0, 0, width, height);
        //设定字体  
        g.setFont(new Font("Times New Roman", Font.PLAIN, 18));
        //画边框  
        //g.setColor(new Color());  
        //g.drawRect(0,0,width-1,height-1);  
        
        g.setColor(getRandColor(160, 200));
        // 随机产生155条干扰线，使图象中的认证码不易被其它程序探测到  
        for (int i = 0; i < 155; i++) {
            int x = random.nextInt(width);
            int y = random.nextInt(height);
            int xl = random.nextInt(12);
            int yl = random.nextInt(12);
            g.drawLine(x, y, x + xl, y + yl);
        }
        // 取随机产生的认证码(4位数字)  
        String sRand = "";
        for (int i = 0; i < 4; i++) {
            String rand = String.valueOf(random.nextInt(10));
            sRand += rand;
            // 将认证码显示到图象中  
            g.setColor(new Color(20 + random.nextInt(110), 20 + random
                    .nextInt(110), 20 + random.nextInt(110)));//调用函数出来的颜色相同，可能是因为种子太接近，所以只能直接生成  
            g.drawString(rand, 13 * i + 6, 16);
        }
        // 将认证码存入SESSION  
        request.getSession().setAttribute("numrand", sRand);
        // 图象生效  
        g.dispose();  
        // 输出图象到页面  
        ImageIO.write(image, "JPEG", response.getOutputStream());
        
        
    }
    public Color getRandColor(int fc, int bc) {//给定范围获得随机颜色  
        Random random = new Random();
        if (fc > 255)
            fc = 255;
        if (bc > 255)
            bc = 255;
        int r = fc + random.nextInt(bc - fc);
        int g = fc + random.nextInt(bc - fc);
        int b = fc + random.nextInt(bc - fc);
        return new Color(r, g, b);
    }
}