js+ajax+jquery(2)(验证码例子，json格式，ajax中json传递数据，第三方转换json)
回顾：
验证码的一个例子：（用到了正则）
01_image.jsp（验证码图片）
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ page contentType="image/jpeg" import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*" %>
<%!
public Color getColor(){
Random random = new Random();
int r = random.nextInt(256);//0-255
int g = random.nextInt(256);
int b = random.nextInt(256);
return new Color(r,g,b);
}
public String getNum(){
String str = "";
Random random = new Random();
for(int i=0;i<4;i++){
str += random.nextInt(10);//0-9
}
return str;
}
%>
<%
response.setHeader("pragma", "mo-cache");
response.setHeader("cache-control", "no-cache");
response.setDateHeader("expires", 0);
BufferedImage image = new BufferedImage(80,30,BufferedImage.TYPE_INT_RGB);
Graphics g = image.getGraphics();
g.setColor(new Color(200,200,200));
g.fillRect(0,0,80,30);
for (int i = 0; i < 30; i++) {
Random random = new Random();
int x = random.nextInt(80);
int y = random.nextInt(30);
int xl = random.nextInt(x+10);
int yl = random.nextInt(y+10);
g.setColor(getColor());
g.drawLine(x, y, x + xl, y + yl);
}
g.setFont(new Font("serif", Font.BOLD,16));
g.setColor(Color.BLACK);
String checkNum = getNum();//"2525"
StringBuffer sb = new StringBuffer();
for(int i=0;i<checkNum.length();i++){
sb.append(checkNum.charAt(i)+" ");//"2 5 2 5"
}
g.drawString(sb.toString(),15,20);
session.setAttribute("CHECKNUM",checkNum);//2525
ImageIO.write(image,"jpeg",response.getOutputStream());
out.clear();
out = pageContext.pushBody();
%>
02_checkcode.jsp
<%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>验证码检查</title> <script type="text/javascript" src="js/ajax.js"></script> </head> <body> <form> <table border="0" align="center"> <tr> <th>验证码：</th> <td><input size="2" type="text" name="checkcode" id="checkcodeID" maxlength="4"/></td> <td><img src="01_image.jsp"/> <td id="res"></td> </tr> </table> </form> <script type="text/javascript"> //去掉二边的空格 function trim(str){" zhaojun " str = str.replace(/^\s*/,"");//"zhaojun " str = str.replace(/\s*$/,"");//"zhaojun" return str; } </script> <script type="text/javascript"> document.getElementById("checkcodeID").onkeyup = function(){ var checkcode = this.value; checkcode = trim(checkcode);//2525 if(checkcode.length == 4){ //NO1) var ajax = createAJAX(); //NO2) var method = "POST"; var url = "${pageContext.request.contextPath}/checkRequest?time="+new Date().getTime(); ajax.open(method,url); //NO3) ajax.setRequestHeader("content-type","application/x-www-form-urlencoded"); //NO4) var content = "checkcode=" + checkcode; ajax.send(content); //--------------------------------------------------------等待 //NO5) ajax.onreadystatechange = function(){ if(ajax.readyState == 4){ if(ajax.status == 200){ //NO6) var tip = ajax.responseText; //NO7) var img = document.createElement("img"); img.src = tip; img.style.width = "14px"; img.style.height = "14px"; var td = document.getElementById("res"); td.innerHTML = ""; td.appendChild(img); } } } }else{ //清空图片 var td = document.getElementById("res"); td.innerHTML = ""; } } </script> </body> </html>
CheckcodeAction.java（stuts部分配置省略）
package cn.itcast.javaee.js.checkcode; import java.io.PrintWriter; import javax.servlet.http.HttpServletResponse; import org.apache.struts2.ServletActionContext; import com.opensymphony.xwork2.ActionContext; import com.opensymphony.xwork2.ActionSupport; /** * 验证码检查 * @author AdminTC */ public class CheckcodeAction extends ActionSupport{ //客户端验证码 private String checkcode;//2525 //注入客户端验证码 public void setCheckcode(String checkcode) { this.checkcode = checkcode; } /** * 验证 */ public String check() throws Exception { //图片路径 String tip = "images/MsgError.gif"; //从服务器获取session中的验证码 String checkcodeServer = (String) ActionContext.getContext().getSession().get("CHECKNUM"); //将客户端的验证码与服务端的验证码进行比较 if(checkcode.equals(checkcodeServer)){ tip = "images/MsgSent.gif"; } //以IO流的方式将tip变量的值输出到AJAX异步对象中 HttpServletResponse response = ServletActionContext.getResponse(); response.setContentType("text/html;charset=UTF-8"); PrintWriter pw = response.getWriter(); pw.write(tip); pw.flush(); pw.close(); //以下方式不是最好的，但可以完成AJAX异步交互 return null; } }
注意采用json和html传递数据中ajax返回的方法是一样的，http协议中的文件类型也是一样的
要求
1）掌握JSON及其应用
2）了解jQuery的背景和特点
3）理解js对象和jQuery对象的区别
4）掌握jQuery九类选择器及应用（上）
一）什么是JSON
（1）JSON（Java Script Object Notation（记号,标记））是一种轻量级的数据交换语言， 以文本字符串为基础，且易于让人阅读 注意：XML就是一个重量级的数据交换语言 （2）JSON采用完全独立于任何程序语言的文本格式，使JSON成为理想的数据交换语言
json的格式：(当然对象里面属性可以对象也可以对象数组）
一个对象用大括号{}:
var o={id:1,name:"哈哈"}
多个对象用[]：
[{...},{...},{...}]
二）JSON的作用
（1）简化创建自定义对象的方式
注意：
JSON就是用JS语法来书写，所以必须放在<script>标签中 在用JS语法书写JSON时，最外面不要用""双引号（意思：json定义的部分不是字符串，这样书写是错误的：var p="id:1,name:"www",age:1";）
不过可以将字符串的json对象转换成可以解析执行json对象，如下方式：
简单json对象例子：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>简化创建自定义对象的方式</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <!-- js方式定义Person对象 <script type="text/javascript"> function Person(id,name,sal){ this.id = id; this.name = name; this.sal = sal; } var p = new Person(1,"波波",7000); document.write("编号:" + p.id + "<br/>"); document.write("姓名:" + p.name + "<br/>"); document.write("薪水:" + p.sal + "<br/>"); </script> --> <hr/> <!-- json方式定义Person对象 --> <script type="text/javascript"> //采用js语言来书写 var p = {id:1,name:"包包",sal:8000}; //属性可以''或""符号 //字符串必加''或""符号，其它类型不用加符号 document.write("编号:" + p.id + "<br/>"); document.write("姓名:" + p.name + "<br/>"); document.write("薪水:" + p.sal + "<br/>"); </script> </body> </html>
对象数组例子：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>创建一个数组，数组中有三个对象</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <script type="text/javascript"> var ps = [ { id:1, name:'哈哈' }, { id:2, name:'呵呵' }, { id:3, name:'嘻嘻' } ]; </script> <script type="text/javascript"> document.write("共有" + ps.length + "个学生<br/>"); for(var i=0;i<ps.length;i++){ document.write("编号：" + ps[i].id + "<br/>"); document.write("姓名：" + ps[i].name + "<br/>"); } </script> </body> </html>
属性是数组（数组又可以简单数组和对象数组）例子：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>创建一个对象，其它一个属性是数组</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <script type="text/javascript"> var p = { id:1, name:'哈哈', home:['湘潭','长沙','广州'] }; for(var i=0;i<p.home.length;i++){ document.write(p.home[i]+" "); } </script> </body> </html>
布尔类型属性以及属性方法的定义（重点）：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>创建一个对象，使用function做为属性值</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <script type="text/javascript"> var p = { id:1, name:'哈哈', isLove:true, home:['广州','深圳'], show : function(str){ alert("你是" + str); } }; //document.write(p.isLove?"已婚":"单身"+"<br/>"); p.show("赵君"); </script> </body> </html>
（2）在AJAX中，json作为数据载体之一
注意：
JS可以直接解析JSON格式的文本，
前提是：该JSON必须采用JS格式书写的才行，
如果该JSON是采用Java格式写的，必须使用eval()函数转换后，方可被JS解析，
该eval("（...）")函数接收一个字符串格式的json内容。
（3）省份-城市-区域三级联动【Struts2(服务端部分省略，需要身体struts2-json-plugin.jar包支持） + JSON版】的例子：
(JSON是不能完完全全替代XML的，只能在定义对象和数据交换语言方面替代 )
服务端返回的json格式：
请求省份返回城市json：
； 返回县城json:
前端代码：
<%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>省份-城市-区域三级联动【Struts2 + JSON版】</title> <script type="text/javascript" src="js/ajax.js"></script> </head> <body> <select id="provinceID" style="width:111px"> <option>选择省份</option> <option>湖北</option> <option>湖南</option> <option>广东</option> </select> <select id="cityID" style="width:111px"> <option>选择城市</option> </select> <select id="areaID" style="width:111px"> <option>选择区域</option> </select> <!-- 省份->城市 --> <script type="text/javascript"> document.getElementById("provinceID").onchange = function(){ //清空城市下拉框（清空的原因是，重新选择的时候，不能使用已有的数据) var cityElement = document.getElementById("cityID"); cityElement.options.length = 1; //清空区域下拉框 var areaElement = document.getElementById("areaID"); areaElement.options.length = 1; var province = this[this.selectedIndex].innerHTML; if("选择省份" != province){ //NO1) var ajax = createAJAX(); //NO2) var method = "POST"; var url = "${pageContext.request.contextPath}/findCityByProvinceRequest?time="+new Date().getTime(); ajax.open(method,url); //NO3) ajax.setRequestHeader("content-type","application/x-www-form-urlencoded") //NO4) var content = "bean.province=" + province; ajax.send(content); //-------------------------------------------等待 //NO5 ajax.onreadystatechange = function(){ if(ajax.readyState == 4){ if(ajax.status == 200){ //NO6)返回JAVA格式的JSON文本 var jsonJAVA = ajax.responseText; //p所代表的是java格式的json文本，是不能直接被js执行的 //解决方案：将java格式的json文本，转成js格式的json文本 //如何做：用js提供的一个函数搞定 var jsonJS = eval("("+jsonJAVA+")"); var array = jsonJS.cityList; var size = array.length; for(var i=0;i<size;i++){ var city = array[i]; var option = document.createElement("option"); option.innerHTML = city; cityElement.appendChild(option); }}}}} </script> <!-- 城市->区域 --> <script type="text/javascript"> document.getElementById("cityID").onchange = function(){ var areaElement = document.getElementById("areaID"); areaElement.options.length = 1; var city = this[this.selectedIndex].innerHTML; if("选择城市" != city){ //NO1) var ajax = createAJAX(); //NO2) var method = "POST"; var url = "${pageContext.request.contextPath}/findAreaByCityRequest?time="+new Date().getTime(); ajax.open(method,url); //NO3) ajax.setRequestHeader("content-type","application/x-www-form-urlencoded") //NO4) var content = "bean.city=" + city; ajax.send(content); //------------------------------------------等待 //NO5) ajax.onreadystatechange = function(){ if(ajax.readyState == 4){ if(ajax.status == 200){ //NO6) var jsonJAVA = ajax.responseText; var jsonJS = eval("("+jsonJAVA+")"); var array = jsonJS.areaList; var size = array.length; for(var i=0;i<size;i++){ var area = array[i]; var option = document.createElement("option"); option.innerHTML = area; areaElement.appendChild(option); }}}}}} </script> </body> </html>
三）使用第三方工具，将JavaBean对象/List或Set或Map对象转成JSON
准备导入第三方jar包：
》commons-beanutils-1.7.0.jar
》commons-collections-3.1.jar
》commons-lang-2.5.jar
》commons-logging-1.1.1.jar
》ezmorph-1.0.3.jar
》json-lib-2.1-jdk15.jar
（1）JavaBean----->JSON 》JSONArray jsonArray = JSONArray.fromObject(city); 》String jsonJAVA = jsonArray.toString(); （2）List<JavaBean>----->JSON 》JSONArray jsonArray = JSONArray.fromObject(cityList); 》String jsonJAVA = jsonArray.toString(); （3）List<String>----->JSON 》JSONArray jsonArray = JSONArray.fromObject(stringList); 》String jsonJAVA = jsonArray.toString(); （4）Set<JavaBean>----->JSON 》JSONArray jsonArray = JSONArray.fromObject(citySet); 》String jsonJAVA = jsonArray.toString(); （5）Map<String,Object>----->JSON 》JSONArray jsonArray = JSONArray.fromObject(map); 》String jsonJAVA = jsonArray.toString();
/** * 使用第三方工具，将JavaBean对象/List或Set或Map对象转成JSON * @author AdminTC */ public class TestBean2Json { private static void javabean2json() { City city = new City(1,"广州"); JSONArray jSONArray = JSONArray.fromObject(city); String jsonJAVA = jSONArray.toString(); System.out.println(jsonJAVA); //[{"id":1,"name":"广州"}] } private static void list2json() { List<City> cityList = new ArrayList<City>(); cityList.add(new City(1,"广州")); cityList.add(new City(2,"珠海")); JSONArray jSONArray = JSONArray.fromObject(cityList); String jsonJAVA = jSONArray.toString(); System.out.println(jsonJAVA); //[{"id":1,"name":"广州"},{"id":2,"name":"珠海"}] } private static void set2json() { Set<City> citySet = new LinkedHashSet<City>(); citySet.add(new City(1,"广州")); citySet.add(new City(2,"珠海")); JSONArray jSONArray = JSONArray.fromObject(citySet); String jsonJAVA = jSONArray.toString(); System.out.println(jsonJAVA); //[{"id":1,"name":"广州"},{"id":2,"name":"珠海"}] } private static void javabeanlist2json() { List<City> cityList = new ArrayList<City>(); cityList.add(new City(1,"中山")); cityList.add(new City(2,"佛山")); Province province = new Province(1,"广东",cityList); JSONArray jSONArray = JSONArray.fromObject(province); String jsonJAVA = jSONArray.toString(); System.out.println(jsonJAVA); /* [ { "id":1, "name":"广东" "cityList":[{"id":1,"name":"中山"},{"id":2,"name":"佛山"}], } ] */ } private static void map2json() { List<City> cityList = new ArrayList<City>(); cityList.add(new City(1,"中山")); cityList.add(new City(2,"佛山")); Map<String,Object> map = new LinkedHashMap<String,Object>(); map.put("total",cityList.size());//表示集合的长度 map.put("rows",cityList);//rows表示集合 JSONArray jSONArray = JSONArray.fromObject(map); String jsonJAVA = jSONArray.toString(); System.out.println(jsonJAVA); //[{"total":2,"rows":[{"id":1,"name":"中山"},{"id":2,"name":"佛山"}]}] jsonJAVA = jsonJAVA.substring(1,jsonJAVA.length()-1); System.out.println(jsonJAVA); }
四）总结JSON的特点
（1）在客户端（特指PC浏览器），直接使用JavaScript语言解析JSON，无需第三方jar包 （2）本质上，就是一个文本，只是该文本有特定的书写格式 （3）可以使用第三方工具，将JavaBean对象或者List/Set/Map<JavaBean>对象转成JSON （4）优点：JSON与XML很相似，但是它更加轻巧，服务器只需发送一个html普通字符串，不用发送复杂的xml格式文档了 （5）缺点：语法过于严谨，初学者可能觉得代码不易读，写错一点都不行 （6）JSON本质上，就是用JS语法写的特殊文本记号，用JS可以直接解析
五）模拟jQuery库，体验使用第三方实用库的特点【图片隐藏与显示】
学会：JS的封装思想
学会：创建自定义对象和优化方法
学会：引用第三方实用的库，该库中预定义大量实用的对象和函数
学会：查阅第三方实用的库提供的API手册
一个显示隐藏图片的例子：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>模拟jQuery库，体验使用第三方实用库的特点【图片隐藏与显示】</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <img src="images/zgl.jpg"/> <input id="hide" type="button" value="隐藏" style="position:absolute;top:250;left:50"/> <input id="show" type="button" value="显示" style="position:absolute;top:250;left:120"/> <script type="text/javascript"> function Photo(){ //相像 var img = document.images[0]; //隐藏方法 this.hide = function(){ img.style.visibility = "hidden"; } //显示方法 this.show = function(){ img.style.visibility = "visible"; } } </script> <script type="text/javascript"> var p = new Photo(); document.getElementById("hide").onclick = function(){ p.hide(); } document.getElementById("show").onclick = function(){ p.show(); } </script> </body> </html>
优化标签对象的获取：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>模拟jQuery库，体验使用第三方实用库的特点【图片隐藏与显示】</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <img src="images/zgl.jpg"/> <input id="hide" type="button" value="隐藏" style="position:absolute;top:250;left:50"/> <input id="show" type="button" value="显示" style="position:absolute;top:250;left:120"/> <script type="text/javascript"> function Photo(){ //相像 var img = document.images[0]; //隐藏方法 this.hide = function(){ img.style.visibility = "hidden"; } //显示方法 this.show = function(){ img.style.visibility = "visible"; } } </script> <script type="text/javascript"> //$()表示定位指定的标签 function $(str){ //获取str变量的类型 var type = typeof(str); //如果是string类型的话 if(type == "string"){ //截取字符串的第一个字符 var first = str.substring(0,1); //如果是#号的话 if("#" == first){ //获取#号之后的所有字符串 var end = str.substring(1,str.length); //根据id定位标签 var element = document.getElementById(end); //如果找到了 if(element != null){ //返回标签 return element; }else{ alert("查无此标签"); } }else{ } }else{ alert("参数必须是字符串类型"); } } </script> <script type="text/javascript"> var p = new Photo(); $("#hide").onclick = function(){ p.hide(); } $("#show").onclick = function(){ p.show(); } </script> </body> </html>
继续优化将公共方法采用引用的方式：
js/photo.js
function Photo(){ //相像 var img = document.images[0]; //隐藏方法 this.hide = function(){ img.style.visibility = "hidden"; } //显示方法 this.show = function(){ img.style.visibility = "visible"; } } //$()表示定位指定的标签 function $(str){ //获取str变量的类型 var type = typeof(str); //如果是string类型的话 if(type == "string"){ //截取字符串的第一个字符 var first = str.substring(0,1); //如果是#号的话 if("#" == first){ //获取#号之后的所有字符串 var end = str.substring(1,str.length); //根据id定位标签 var element = document.getElementById(end); //如果找到了 if(element != null){ //返回标签 return element; }else{ alert("查无此标签"); } }else{ } }else{ alert("参数必须是字符串类型"); } }
html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>模拟jQuery库，体验使用第三方实用库的特点【图片隐藏与显示】</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/photo.js"></script> </head> <body> <img src="images/zgl.jpg"/> <input id="hide" type="button" value="隐藏" style="position:absolute;top:250;left:50"/> <input id="show" type="button" value="显示" style="position:absolute;top:250;left:120"/> <script type="text/javascript"> var p = new Photo(); $("#hide").onclick = function(){ p.hide(); } $("#show").onclick = function(){ p.show(); } </script> </body> </html>
浙公网安备 33010602011771号