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>
就这样吧,转载请注明出处
原文地址:https://www.cnblogs.com/coolgame/p/3315495.html