1、图片验证码
之前我们学过使用一个工具ValidateCode来生成验证码，具体用法如下：
package com.huwenlong.file;
import cn.dsna.util.images.ValidateCode;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/file/getImgCode")
public class GetImgCode extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
ValidateCode vc = new ValidateCode(200,30,4,20);
String imgCode = vc.getCode();
req.getSession().setAttribute("imgCode",imgCode);
vc.write(resp.getOutputStream());
}
}
这个ValidateCode类的对象可以为我们生成一个验证码并把对应的字符串放在session中用来比较验证码是否正确。现在又另一种方式也可以实现
img.jsp
<%@ page contentType="image/jpeg"
import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*"%>
<%!
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);//200,250
int g=fc+random.nextInt(bc-fc);
int b=fc+random.nextInt(bc-fc);
return new Color(r,g,b);
}
%>
<%
//设置页面不缓存
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);
// 随机产生155条干扰线，使图象中的认证码不易被其它程序探测到
g.setColor(getRandColor(160,200));
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 rand = request.getParameter("rand");
//rand = rand.substring(0,rand.indexOf("."));
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
session.setAttribute("rand",sRand);
// 图象生效
g.dispose();
// 输出图象到页面
ImageIO.write(image, "JPEG", response.getOutputStream());
out.clear();
out = pageContext.pushBody();
%>
这个jsp文件设置了contentType="image/jpeg"，可以把这个文件当作一个图片来使用，这个文件的作用就是生成一张图片输出到页面并把验证码放在session中。功能和上面的一样。
2、json
json的全称是JavaScript Object Notation，是一种轻量级的数据交换格式，可以很方便在网络上进行传输。
json的语法：
[] 表示数组
{} 表示对象
"" 表示是属性名或字符串类型的值
: 表示属性和值之间的间隔符
, 表示多个属性的间隔符或者是多个元素的间隔符
json的解析有三种方式：原生解析、GSON与fastjson。原生解析方式比较复杂，适合理解json解析的原理，另外两种方式使用起来比较简单，推荐使用。这里主要说一下fastjson的使用：
-
Java对象转json字符串：
//java对象转json字符串 public static void beanTojson() { Data data = new Data(); data.setAction("add"); data.setId("1"); data.setOrdinal(8L); data.setOrganUnitFullName("testJSON"); data.setParent("0"); data.setSuborderNo("58961"); String s = JSON.toJSONString(data); System.out.println("toJsonString()方法：s=" + s); //输出结果{"action":"add","id":"1","ordinal":8,"organUnitFullName":"testJSON","parent":"0","suborderNo":"58961"} }Data是一个JavaBean，使用JSON的静态方法可以将一个JavaBean转换为字符串，也可以将一个集合转换为字符串
-
json字符串转换为简单对象
这个要使用JSON.parseObjetc()的静态方法，这个方法接收两个参数，第一个参数是要解析的字符串，第二个参数是将要解析的对象的类对象，比如Student.class
-
json字符串转换为集合
这个要使用JSON.parseArray()方法，和上面的用法一样。
3、ajax
ajax的全称是Asynchronous Javascript And XML，异步JavaScript和XML，可以用于在不刷新整个网页的情况下对网页的局部进行更新。ajax的使用可以分为两种，一种是JavaScript的原生，另外一种是jQuery的方式，这种方式更为简单，原生的ajax需要四步，这里以一个词条搜索联想介绍四个步骤：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
#search-div{
text-align: left;
margin-top: 200px;
left: 40%;
position: absolute;
}
.tdhover {
background-color: red;
font-size: 20px;
}
</style>
</head>
<body>
<div id="search-div">
<input type="text" onkeyup="ajaxMethod()" id="key"> <button>搜索</button>
<br>
<table>
<tbody id="tbody">
</tbody>
</table>
</div>
<script>
var xhr;
function createXhr() {
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}
else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function ajaxMethod() {
createXhr();
var key = document.getElementById("key").value;
xhr.onreadystatechange = callback;
var url = "/ajaxServlet?key="+key;
xhr.open("GET",url,true);
xhr.send();
}
function callback() {
if(xhr.status==200 && xhr.readyState==4){
document.getElementById("tbody").innerHTML="";
var content = eval(xhr.responseText);
for (var i = 0; i <content.length ; i++) {
var tr = document.createElement("tr");
tr.addEventListener("click",function () {
document.getElementById("key").value = this.innerText;
document.getElementById("tbody").innerHTML="";
});
tr.addEventListener("mouseover",function () {
this.setAttribute("class","tdhover");
});
tr.addEventListener("mouseout",function () {
this.removeAttribute("class");
});
var td = document.createElement("td");
var text = document.createTextNode(content[i]);
td.appendChild(text);
tr.appendChild(td);
document.getElementById("tbody").appendChild(tr);
}
}
}
</script>
</body>
</html>
首先，第一步是创建一个XMLHttpRequest对象，由于IE5及IE6与其他的浏览器创建方式不同，为了让ajax支持更多的浏览器，所以我们进行了一个判断，根据不同的浏览器来创建对象，然后，设置回调函数：xhr.onreadystatechange = callback;这段代码表示当准备状态改变的之后执行callback这个函数，一个XMLHttpRequest对象有五种准备状态，0-4，分别对应请求的五个阶段，我们只关心最后一个状态，请求返回和请求成功。第三步是xhr.open("GET",url,true);使用特定方式打开连接，第一个参数为"GET"或"POST",第二个参数表示将要请求的URL，第三个参数设置为true表示局部刷新，一般都使用true。最后一步是xhr.send();发送请求，如果给GET方式方法中的参数是没有内容的，如果为POST则是请求的字符串。
网友评论