zoukankan      html  css  js  c++  java
  • 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>
    就这样吧,转载请注明出处
  • 相关阅读:
    Educational Codeforces Round 49 (Rated for Div. 2)
    Codeforces Round #506 (Div. 3)
    multiset
    C++中substr函数的用法
    7.30 背包问题
    7.29 dp动态规划
    7.27 图论 存图 前向星 最短路 dijstra算法 SPFA算法
    7.26 搜索进阶(状压搜索,迭代加深搜索)
    7.23 深搜广搜
    7.24 二分搜索
  • 原文地址:https://www.cnblogs.com/coolgame/p/3315495.html
Copyright © 2011-2022 走看看