关于ajax 的案例 简单的运用

ajax//异步请求；
需求：
当我们在注册页面上输入用户名之后，点击下一个地方，去数据库中查询有无该用户名
最后提示信息
技术分析：
ajax
/
ajax 入门程序
步骤：
1.创建一个核心对象 XMLHttpRequest;
2.编写一个回调函数；
3.编写请求方式 和请求路径；
4.发送请求(send)操作；

ajax-api详解
常用属性：
onreadystatechange ：检测readyState状态的改变
readyState:ajax核心对象的状态；
0：核心对象的创建
1：调用了open方法；
2：调用了send方法；
3：部分响应已经生成（）
4：响应已经完成
常用方法：
//
步骤分析：
1.数据库和表
2.新建项目和表；
导入jar包 工具类，配置文件
3.新建一个注册页面和表单 在用户名上输入用户名，数去焦点
发送ajax请求， 将输入的值发送到servlet
4.checkUsername4Ajax；
接收用户名；
调用service 完成查询操作 返回一个用户
判断user 是否为空；
若为空写1：代表可以使用
若不为空 写0
5.在表单接收响数据
判断一下：
若为0： 则提示用户名已经被占用

//
案例二： jquery的ajax 判断用户是否被占用
技术分析：
jquery中的ajax
//
四种：
了解：jquery对象.load(url,params,function(数据),type);
type：返回的数据格式；(type 多用json)
掌握：$.get(url,params,function(数据),type)url：请求的路径params:请求的参数，参数为key/value的形式key=valuefunction:回调函数参数就是服务器发送回来的数据type:返回内容的格式xml,html,script,json,text{,}_{d}efault。以后用:"json"掌握：$.post(url,params,function(数据),type)
发送post请求的ajax；
理解：
$.ajax([选项])；
选项的可选的值
url:请求的路径
type:请求的方式
data:发送到服务器的数据
success:fn 成功以后的回调；
error : fn 异常以后的回调；
dataType：返回内容格 经常使用 json
async: 设置是否是异步请求

//
步骤分析：
将原生的ajax 修改成jquery的ajax
//
案例： 模仿百度搜索
需求：
在一个文本框中 输入一段内容 keyup 的时候发送一个ajax请求，去数据库中查找相应的内容
步骤分析：
1.表
creat table keyword(
id int primary key,
kw varchar(20)
);

2.页面
3.在文本框输入内容，  keyup 的时候，发送ajax请求，将值传送到后台
4.显示内容；

//
案例分析：省市联动
需求：
先有一个省的下拉选择
根据一个省的下来选，从而动态的下啦 选中的所有市

步骤分析：
	1.表
	2.页面  两个下啦选，省分的下来选一般是固定的，
	3.当省分改变的时候，获取省分的信息，发送一个ajax请求，去省的表查询相应的所有市 ，加载到市的下来选中
	4.SelectProServlet   SelectCityServlet 

//
JSON :轻量级的数据交换格式；
json:
格式1： value可以为任意值
｛“key”:value ,“key1”:value｝
格式2： e1也可以为任意值
[e1,e2]
jsonlib工具类：
让我们对象转换为json数据
1.导入jar包
· 2.使用api
JSONArray.fromObject(对象) 数组和List
JSONArray.fromObject(对象) bean和map

///
获取jquery对象；
$(“选择器”) jquery(“选择器”)

jQuery 对象>>dom对象；
方式一：
jQuery 对象.get(index);
方式二：
jQuery 对象[index]

jQuery 对象<<dom对象；
  $(dom对象)
  页面载入：
	$(function(){})  
派发事件
   jquery对象.事件（function(){...}）
 选择器：
	#id值   .class值 标签名  [属性]   [属性='值']		

//
listener （了解） 监听器
filter 过滤器；
//
listener:
监听器：
作用：
监听 web 中的几个对象 域对象；
ServletContext
ServletRequest
HttpSession
监听内容：
监听三个对象的创建和销毁
监听三个对象属性的变化
监听session总的javaBean的状态；

//
案例一：
分页展示
案例二：
首页上的热门商品和最新商品
点击首页的时候，查询分类信息
步骤分析：
1.创建分类表
2.indexservlet 查询分类信息
3.调用CategoryService().findAll() 返回值是list;

案例三：
查询商品的详情
案例四：
分页展示商品

/

技术：
	json	
	包含
	ajax

/
步骤分析：
categoryServlet
2.findAll 方法来查询所有
list通过Json 返回到页面上
3.在head.jsp 加载成功之后发生一个ajax请求
$.{url,params,function(data){},“json”}

/
常见的缓存技术：
ehcache; hibernate底层使用了ehcache
memcache;
redis;
ehcache使用步骤
导入jar包
编写配置文件；
3.使用api
获取数据先从缓存中获取
若获取的值为空
再去查询数据库
将数据放入缓存中；

///
扩展：浏览记录
技术分析：
cookie
步骤分析：
进入一个商品详情页面需要记录当前商品id

	在getById  这个方法中处理cookie
	规定：  cookie 的名称： ids  value 2-1-3
	1.获取指定的cookie
		CookieUtils.getCookieByName();
			通过request.getCookies() 获取cookie 数组然后遍历cookie 通过cookie 的名称判断
					if("ids",equals(cookie.getName)){return cookie};
	2.判断cookie是否为空
		若不为空 ： 获取value值
			继续判断value 值中有无该商品的id(将字符串切割转成list)
				若有：
					先移除，然后将商品的id放入list最前面
				若没有：
					继续判断list的长度是否>=3；
						若>=3 移除最后一个，将当前商品的id 放入id 的最前面
						若<=3  将当前商品的id 放入id 的最前面
					最后将List变成字符串即可
					
				若为空：
					将当前商品的id  放入ids即可
					
				Cookie c=new Cookie("ids",ids);
				c.setMaxAge(int 秒);
				c.setPath(request.getContextPath+"/")'
				
				response.addCookie(c);
			
				在product_list.jsp 需要将cookie 里面的商品展示出来
					1.需要再jsp中获取指定的cookie
					2.判断cookie 是否为空；
						若不为空 ：获取value=1-3-2；
						切割字符串获取每一个商品的id

///
案例1：
将商品添加到购物车：
在商品详情的页面上，输入购买数量，点击加入购物车
涉及实体：
购物车 购物车项 商品
购物车中的内容
购物车项的map集合（map<商品的id ，购物车项>）
总金额

		add2Cart(购物车项)
		removeFromCart(String 商品的id)
		
		清空购物车：clearCart();
		
	购物车中的购物项
		商品对象
		购买数量
		小计

案例2：
对购物车进行操作（删除，清空购物车）
案例3：
生成订单

//
1.商品详情页面 ，输入购买数量，点击加入购物车
/store600/cart?method=add&pid=?&count;
2.在cartServlet中的add方法操作
先获取两个参数 pid 和count
拼装CartItem
Product
count—传递过来
suctotal 计算

3.获取购物车 调用add2Cart(cartitem)		
4.页面跳转
	重定向 /jsp/store600
用到了域对象 只能用请求转发；
用到了站外资源  只能用重定向；

int count=Integer.parseInt(request.getParameter(“count”)); //获取到网页中int值 改变类型

///
获取浏览记录

技术分析： cookie
进入一个商品的详情页面需要记录当前商品的ID;

需要在getById 这个方法 中处理cookie
规定cookie 的名称ids 2-1-3;
1.获取指定的cookie
CookieUtils1.getCookieByName();
内部实现：
通过request.getCookes()先获取cookie数组，然后遍历cookie 通过cookie的名称判断
if(“ids”.equals(cookie.getName())){return cookie;}
2.判断cookie是否为空

、

案例4:
需求：
在购物车页面上，有一个提交订单，点击的时候，将用户购物车中的商品添加到购物车；

实体：
	用户
	订单
	订单项
	商品
创建表：

创建bean：
需要在order 实体中提供 user对象和list
需要在orderItem 实体中提供 product 和order对象；

步骤分析：
	点击生成订单：
		/store/order?method=add
	创建OrderServlet 
	  add 方法中：
	  1.判断用户是否登录
	  2.封装数据；
			oid;   随机
			ordertime;  当前时间
			total  购物车中的总金额
			User;  session 中的当前用户
			name;  
			address
			telephone;
			订单项的集合  List<OrderItem> 
			   创建OrderItem 添加到list中
			     购物车中CartItem;
	  3.调用service方法 orderService 生成订单
				开启事物
	            先往订单表中插入一条数据
				往订单项表中插入n条数据
				提交事务

/
	第一步：
		网页上的加入购物车
		商品id ->