26@ajax_day02

 

1、json是什么?
　　javascript object notation
　　是一种轻量级的数据交换标准，经常使用在服务器与ajax客户端的数据交换上。

---

2、json语法

　　1)表示一个对象
　　　　{属性名:属性值,属性名:属性值...}
　　　　　　其中，属性名要用''引起来。
　　　　　　属性值可以是 string,number,boolean,null,object
　　　　　　如果属性值是string，也要用''引起来。
　　　　比如：
　　　　　　{'name':'zs','age':22}
　　　　　　{'name':'ww','address':{
　　　　　　　　'city':'bj',
　　　　　　　　'street':'ca'
　　　　　　}}
　　2)表示一个数组
　　　　[{属性名:属性值,属性名:属性值...},{属性名:属性值,属性名:属性值...}]
　　　　比如：
　　　　　　[{'name':'zs','age':22},{'name':'wd','age':32}]

---

3、使用json来做数据交换

　　1) java对象转换成json字符串。
　　　　step1 先创建json对象
　　　　　　JSONObject obj = JSONObject.fromObject(java对象);
　　　　step2 获得json字符串
　　　　　　String str = obj.toString();
　　　　如果是java对象数组或者List集合
　　　　step1 先创建json对象
　　　　　　JSONArray arry = JSONArray.fromObject(arr/list);
　　　　step2 获得json字符串
　　　　　　String str = obj.toString();
　　2)json字符串转换成javascript对象。
　　　　prototype框架的简单使用
　　　　$(id): 相当于document.getElementById(id);
　　　　$F(id): 相当于document.getElementById(id).value;
　　　　$(id1,id2,id3...):分别查找id为id1,id2,id3..的节点，然后以数组的形式返回。
　　　　strip():将字符串两端的空格除掉。
　　　　evalJSON(): 将json字符串转换成javascript对象或者javascript对象数组。
　　3)数据交换
　　　　step1 在服务器端，将java对象或者java对象集合、数组先转换成一个json字符串。
　　　　step2 在客户端(浏览器端)，使用evalJSON函数将json字符串转换成js对象或者数组，然后更新页面。

 

---

练习：“产品热卖”

　　每隔5分钟，显示当前销量前三名的产品名称、销量、价格。

select * from t_sale order by qty desc limit 3;

create table t_sale(
    id int primary key auto_increment,
    name varchar(50),
    qty int,
    price double
);

insert into t_sale(name,qty,price) values('xss',100,2.5);
insert into t_sale(name,qty,price) values('xhy',120,12.5);
insert into t_sale(name,qty,price) values('xhm',30,0.5);
insert into t_sale(name,qty,price) values('yy',60,29.5);

---

4,jQuery基础

　　1)jQuery是什么?
　　　　是一个js框架，特点是，jQuery使用选择器查找符合要求的节点，并且这些节点封装成一个jQuery对象，通过调用jQuery对象的属性或者方法来实现对节点的操作。封装的目的有两个，一个是为了更好地兼容不同的浏览器之间的差异，另外，代码更简洁。
　　2)编程步骤
　　　　step1 利用选择器查找节点
　　　　step2 调用jQuery对象的属性或者方法来操作节点
　　3)jQuery对象与dom对象之间的转换
　　　　a, dom对象转换成jQuery对象
　　　　　　$(dom对象)
　　　　b, jQuery对象转换成dom对象
　　　　　　方式一
　　　　　　　　$obj.get(0)
　　　　　　方式二
　　　　　　　　$obj.get()[0]    
　　4)jQuery与prototype一起使用时，要注意的问题。
　　　　step1 先引入prototype.js
　　　　step2 使用 jQuery.noConflict()为$函数改名。