AJAX与JSON
先普及一下知识
json (javascript object notation) (1)json是什么? 是一种轻量级的数据交换标准。 a,什么是数据交换? 简单地讲，就是将要交换的数据先转换成一个 与平台无关的数据格式(比如xml或者json字符串)发 送给接受方，接受方再进行相应的转换。 b,轻量级 相对于xml，json解析的速度更快，数据量更小。 (2)json语法格式 1)如何表示一个对象 {属性名:属性值,属性名:属性值...} 要注意: a,属性值的类型可以是 string,number,null,boolean, object。 b,属性名必须使用引号括起来 c,属性值如果是string，也必须使用引号括起来 2)如何表示一个对象组成的数组 [{},{},{}...] (3)如何使用json做数据交换 1)java对象(java对象组成的数组或者集合)转换成 对应的json字符串 可以从www.json.org去下载对应语言的工具。 使用的json-lib中提供的两个类: JSONObject, JSONArray 2)json字符串转换成javascript对象 可以使用prototype提供的evalJSON函数。 prototype.js提供了很多有用的函数: a, $(id): document.getElementById(id); b, $F(id): document.getElementById(id).value; c, $(id1,id2,...): 分别查找id为id1,id2...的节点， 然后返回一个数组。 d, strip(): 除掉字符串两端的空格。 e, evalJSON():将json字符串转换成对应的 javascript对象或者数组。 练习：热卖商品动态显示 step1,建表 create table t_sale( id int primary key auto_increment, name varchar(50), price double, qty int ); insert into t_sale(name,price,qty) values('bmwx6',20,30); insert into t_sale(name,price,qty) values('bmwx5',20,20); insert into t_sale(name,price,qty) values('bmwx3',20,60); insert into t_sale(name,price,qty) values('bmwx1',20,40); 查询销量前三的sql: select * from t_sale order by qty desc limit 3; step2, 实体类 Sale step3, SaleDAO List<Sale> find... step4, ActionServlet 输出一个json字符串 step5, 测试ActionServlet step6, sale.jsp
来一个生成股票的实例
下面的类描述的是股票
package bean; public class Stock { private String code; private String name; private double price; public String getCode() { return code; } public void setCode(String code) { this.code = code; } public String getName() { return name; } public void setName(String name) { this.name = name; } public double getPrice() { return price; } public void setPrice(double price) { this.price = price; } }
看看servlet里怎么写
package web; import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import java.util.List; import java.util.Random; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import net.sf.json.JSONArray; import bean.Stock; public class ActionServlet extends HttpServlet { public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=utf-8"); PrintWriter out = response.getWriter(); String uri = request.getRequestURI(); String action = uri.substring(uri.lastIndexOf("/"), uri.lastIndexOf(".")); if(action.equals("/quoto")){ List<Stock> stocks = new ArrayList<Stock>(); //模拟生成几支股票的价格信息 Random r = new Random(); for(int i=0;i<8;i++){ Stock s = new Stock(); s.setCode("60001" + r.nextInt(10)); s.setName("山东高速" + r.nextInt(10)); s.setPrice(r.nextInt(100)); stocks.add(s); } JSONArray arry = JSONArray.fromObject(stocks); String jsonStr = arry.toString(); System.out.println(jsonStr); out.println(jsonStr); } out.close(); } }
看看JSP里怎么写
<%@page pageEncoding="utf-8" contentType="text/html;charset=utf-8" %> <html> <head> <style> #d1{ width:500px; height:250px; background-color:#fff8dc; border:1px solid red; margin-left:200px; margin-top:50px; } table{ font-size:20px; font-style:italic; color:blue; } </style> <script type="text/javascript" src="js/my.js"></script> <script type="text/javascript" src="js/prototype-1.6.0.3.js"></script> <script type="text/javascript"> function f1(){ setInterval(quoto,5000); } function quoto(){ var xhr = getXhr(); xhr.open('post','quoto.do',true); xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); xhr.onreadystatechange=function(){ if(xhr.readyState == 4){ var txt = xhr.responseText; //将json字符串(txt)转换成一个js数组 var arr = txt.evalJSON(); var html = ''; for(i=0;i<arr.length;i++){ html +='<tr><td>' + arr[i].code + '</td><td>' + arr[i].name + '</td><td>' + arr[i].price + '</td></tr>'; } $('tb1').innerHTML = html; } }; xhr.send(null); } </script> </head> <body style="font-size:30px;font-style:italic;" onload="f1();"> <div id="d1"> <div id="d2">实时股票价格信息</div> <div> <table width="100%" cellpadding="0" cellspacing="0" > <thead> <tr><td>股票代码</td><td>股票名称</td><td>最新价格</td></tr> </thead> <tbody id="tb1"> </tbody> </table> </div> </div> </body> </html>
看看web.xml里怎么写
<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> <servlet> <servlet-name>ActionServlet</servlet-name> <servlet-class>web.ActionServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>ActionServlet</servlet-name> <url-pattern>*.do</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app>
就这样吧，转载请注明出处
