例 & ajax

一.案例

1. 生成订单操作分析

先看下订单页面:

分析下订单表需要那些字段

id 收货人(receiverName) 收货地址(receiverAddress) 收货人电话(receiverPhone) 总计(totalPrice)

分析下表之间的关系

这里面涉及到三张表,分别是用户表,订单表,商品表.他们之间的关系为

用户表和订单表之间是一对多的关系

订单表和商品表之间是多对多的关系

表的设计:

在订单表中添加一个用户id,表示用户和订单的关系

添加一张中间表,表示订单和商品的关系

中间表的字段 订单oid 商品pid 购买商品数量buynum 商品小计littleprice

创建表

用户表

create table user(

id int primary key AUTO_INCREMENT,

username varchar(20),

password varchar(20)

);

订单表(添加一个外键)

create table orders(

id varchar(50) primary key,

receivername varchar(20),

receiveraddress varchar(100),

receiverphone varchar(20),

totalprice double,

user_id int

);

中间表(订单项表 orderitem)

create table orderitem(

oid varchar(50),

pid varchar(50),

buynum int,

littleprice double,

primary key(oid,pid)

);

生成订单的过程,

先把收货人信息及用户id存入订单表(receiver... 订单id 用户id 商品总价)

把购物车里的商品及数量放到订单项表中(订单id 商品id 购买数量 小计)

最后修改商品表中的数量

以上三个操作必须在一个事务控制范围内

2. 生成订单操作实现

保证用户登录

编写javabean(订单bean,订单项bean)

订单bean

private String id;

private String receiverName;

private String receiverAddress;

private String receiverPhone;

private Double totalPrice;

private User user;

private List<OrderItem> items;

订单项实体bean

private Order order;

private Product product;

private Integer buyNum;

private Double littlePrice;

用户实体:user

private Integer id;

private String username;

private String password;

订单生成

保证用户登录

从cart.jsp点击”结账”按钮开始

跳转到order.jsp(取出购物车里面商品信息及用户信息,还需自己录入收货信息)

点击提交订单,发送请求到createOrderSevlet(主要逻辑如下)

Order order=new Order();

try {

//封装收货人信息及订单总价

BeanUtils.populate(order, request.getParameterMap());

} catch (IllegalAccessException e) {

e.printStackTrace();

} catch (InvocationTargetException e) {

e.printStackTrace();

}

//手动设置订单id

order.setId(UUIDUtils.getId());

order.setUser((User)request.getSession().getAttribute("user"));

//设置商品集合

List<OrderItem> list=new ArrayList<OrderItem>();

Map<Product,Integer> cart=(Map<Product, Integer>) request.getSession().getAttribute("cart");

for (Product p : cart.keySet()) {

list.add(new OrderItem(order, p, cart.get(p), p.getPrice()*cart.get(p)));

}

order.setItems(list);

注意:事务然后调用orderservice添加订单

public void addOrder(Order order) {

try {

DataSourceUtils.startTransaction();

//添加订单

orderDao orderDao=new orderDao();

orderDao.addOrder(order);

//添加订单项

OrderItemDao oiDao=new OrderItemDao();

oiDao.addOrderItem(order);

//修改商品表

ProductDao pDao=new ProductDao();

pDao.updateProductPnum(order);

} catch (SQLException e) {

e.printStackTrace();

try {

DataSourceUtils.rollback();

} catch (SQLException e1) {

e1.printStackTrace();

}

} finally{

try {

DataSourceUtils.commitAndRelease();

} catch (SQLException e) {

e.printStackTrace();

}

}

}

添加订单(orderDao)

public void addOrder(Order order) throws SQLException {

QueryRunner runner=new QueryRunner();

String sql="insert into orders values (?,?,?,?,?,?);";

runner.update(DataSourceUtils.getConnection(), sql, order.getId(),

order.getReceiverName(),order.getReceiverAddress(),

order.getReceiverPhone(),order.getTotalPrice(),

order.getUser().getId());

}

添加订单项(orderItemDao)

public void addOrderItem(Order order) throws SQLException {

QueryRunner runner=new QueryRunner();

String sql="insert into orderitem values(?,?,?,?);";

Object[][] params=new Object[order.getItems().size()][4];

for (int i=0; i < order.getItems().size(); i++) {

OrderItem item=order.getItems().get(i);

params[i][0]=item.getOrder().getId();

params[i][1]=item.getProduct().getId();

params[i][2]=item.getBuyNum();

params[i][3]=item.getLittlePrice();

}

runner.batch(DataSourceUtils.getConnection(), sql, params);

}

修改商品数量(productDao)

public void updateProductPnum(Order order) throws SQLException {

//修改当前订单里的所含商品的数量

QueryRunner runner=new QueryRunner();

String sql="update products set pnum=pnum - ? where id=?";

Object[][] params=new Object[order.getItems().size()][2];

for (int i=0; i < order.getItems().size(); i++) {

OrderItem item=order.getItems().get(i);

params[i][0]=item.getBuyNum();

params[i][1]=item.getProduct().getId();

}

runner.batch(DataSourceUtils.getConnection(), sql, params);

}

二.ajax

1. ajax介绍

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

ajax作用:

AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

使用Javascript向服务器提出请求并处理响应而不阻塞用户！核心对象XMLHTTPRequest。通过这个对象，您的 JavaScript 可在不重载页面的情况与Web服务器交换数据。

AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。

AJAX 可使因特网应用程序更小、更快，更友好。

2. ajax入门案例

获取XMLHttpRequest对象

对于不同的浏览器，获取方式有区别(从文档上粘过来)

function getXMLHttpRequest() {

var xmlhttp;

if (window.XMLHttpRequest) {// code for all new browsers

xmlhttp=new XMLHttpRequest();

} else if (window.ActiveXObject) {// code for IE5 and IE6

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

return xmlhttp;

}

设置回调函数(onreadystatechange)

xmlHttp.onreadystatechange=function(){};

目的是服务器端响应完成后，浏览器端可以知道，并完成后续工作。

open操作

xmlHttp.open(“GET”,”/day/ajax”);

设置访问的资源路径以及请求方式

send操作

xmlhttp.send(null);

发送请求

回调函数编写

在第二步的回调函数内完成操作。

3. XMLHttpRequest之API详解

Ajax 的核心是 JavaScript 对象 XmlHttpRequest。该对象在 Internet Explorer 5 中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest 使您可以使用 JavaScript 向服务器提出请求并处理响应，而不阻塞用户。XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应，并且能够以文本或者一个 DOM 文档的形式返回内容。

onreadystatechange属性

当XMLHttpRequest对象的状态改变时会调用的一个函数.

readyState属性

对于XMLHttpRequest对象，它有一个属性readyState,它有五个状态

0创建XMLHttpRequest对象.

1当open时

2当send时

3响应头已经返回，但响应正文没有完成，也就是响应没有完全完成.

4响应完成了

一般情况下,在回调的函数中，我们都是判断

if(xmlhttp.readyState==4&&xmlhttp.status==200)

来接收服务器端响应的信息.

status属性

由服务器返回的 HTTP 状态代码，如 200 表示成功，而 404 表示 "Not Found" 错误。当 readyState 小于 3 的时候读取这一属性会导致一个异常。

responseText属性

目前为止为服务器接收到的响应体（不包括头部），或者如果还没有接收到数据的话，就是空字符串。

如果 readyState 小于 3，这个属性就是一个空字符串。当 readyState 为 3，这个属性返回目前已经接收的响应部分。如果 readyState 为 4，这个属性保存了完整的响应体。

如果响应包含了为响应体指定字符编码的头部，就使用该编码。否则，假定使用 Unicode UTF-8。

responseXML属性

对请求的响应，解析为 XML 并作为 Document 对象返回。

open方法

初始化 HTTP 请求参数，例如 URL 和 HTTP 方法，但是并不发送请求。

xmlhttp.open(请求方式,url);

请求方式: POST GET

路径:客户端路径 格式 /工程名/资源路径

如果是GET方式，想要向服务器发送请求，并且携带请求参数，可以直接在url后面连接。

如果是POST方式,想要向服务器发送请求，并且携带请求参数,我们需要在send时传递参数

send方法

发送 HTTP 请求，使用传递给 open() 方法的参数，以及传递给该方法的可选请求体。

如果请求方式是post,并且要携带参数，可以通过send的参数来传递

setRequestHeader方法

向一个打开但未发送的请求设置或添加一个 HTTP 请求。

如果请求方式是POST,并且要携带参数，需要设置一个请求头.

setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");

中文乱码问题

get请求需要在发送请求的时候对中文进行编码,如下:

服务器端处理方式和之前request的处理乱码方式一样.

4. 案例-验证用户名是否重复

5. 案例-商品信息模糊查询

a. 修改页面(menu_search.jsp),在这个页面的搜索栏添加ajax请求

给搜索框添加键盘弹起事件,发送ajax请求,将输入的值出给后台

b. 编写后台功能

接受ajax发送过来的值

查找数据库(dao使用ColumnListHandler)

生成响应信息

c. 效果如下

前台代码

//模糊匹配

function searchName(d){

var xmlhttp;

if (window.XMLHttpRequest) {// code for all new browsers

xmlhttp=new XMLHttpRequest();

} else if (window.ActiveXObject) {// code for IE5 and IE6

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

//回调函数

xmlhttp.onreadystatechange=function(){

if(xmlhttp.readyState==4 && xmlhttp.status==200){

var data=xmlhttp.responseText;

if(data!=null && data!=""){

var arr=data.split(/\s*,\s*/);

var cDiv=document.getElementById("content");

cDiv.innerHTML="";

for(var i=0;i<arr.length;i++){

cDiv.innerHTML+=("<div onmouseover='changeColor1(this)' onmouseout='changeColor2(this)' onclick='setName(this)'>"+arr[i]+"</div>");

}

cDiv.style.display="block";

}

}

}

//open

xmlhttp.open("GET", "${pageContext.request.contextPath}/findProductByName?name="+window.encodeURI(d.value));

//send

xmlhttp.send();

}

//放上去变色 为了展示效果好看 添加颜色

function changeColor1(d){

d.style.backgroundColor="#fff";

}

//离开之后恢复原色

function changeColor2(d){

d.style.backgroundColor="#999";

}

//将选中的值赋给文本框

function setName(d){

document.getElementById("name").value=d.innerHTML;

//设置完值之后将div隐藏

document.getElementById("content").style.display="none";

}

后台代码

public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

response.setContentType("text/html;charset=utf-8");

//获取参数

String name=request.getParameter("name");

name=new String(name.getBytes("iso8859-1"),"utf-8");

if(name==null || name.trim().length()==0){

return;

}

//调用service

ProductService service=new ProductService();

List<Object> names=null;

try {

names=service.findProductByName(name);

} catch (SQLException e) {

e.printStackTrace();

}

if(names!=null && names.size()>0){

String names_=names.toString();

response.getWriter().write(names_.substring(1,names_.length()-1));

}

}

6. json介绍与入门

json介绍

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于JavaScript（Standard ECMA-262 3rd Edition - December 1999）的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。这些特性使JSON成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成(网络传输速度)。

json格式

JSON结构有两种结构

json简单说就是javascript中的对象和数组，所以这两种结构就是对象和数组两种结构，通过这两种结构可以表示各种复杂的结构

u 对象：对象在js中表示为“{}”括起来的内容，数据结构为 {key：value,key：value,...}的键值对的结构，在面向对象的语言中，key为对象的属性，value为对应的属性值，所以很容易理解，取值方法为 对象.key 获取属性值，这个属性值的类型可以是 数字、字符串、数组、对象几种。

u 数组：数组在js中是中括号“[]”括起来的内容，数据结构为 ["java","javascript","vb",...]，取值方式和所有语言中一样，使用索引获取，字段值的类型可以是 数字、字符串、数组、对象几种。

经过对象、数组2种结构就可以组合成复杂的数据结构了。

7. jsonlib插件介绍

jsonlib介绍

Json-lib 是一个 Java 类库（官网：http://json-lib.sourceforge.net/）可以实现如下功能：

?转换 javabeans, maps, collections, java arrays 和 XML 成为 json 格式数据

?转换 json 格式数据成为 javabeans 对象

Json-lib 需要的 jar 包

?commons-beanutils-1.8.3.jar

?commons-collections-3.2.1.jar

?commons-lang-2.6.jar

?commons-logging-1.1.1.jar

?ezmorph-1.0.6.jar

?json-lib-2.4-jdk15.jar

jsonlib常用api

数组,Collection集合转换成json数据使用 JsonArray.fromObject(对象);

Map，javaBean转换成json数据使用 JsonObject.fromObject(对象);

如果不想让javaBean中的数据出现在json中.

JsonConfig jsonConfig=new JsonConfig();

jsonConfig.setExcludes(new String[]{"price"});

JSONObject jsonObject=JSONObject.fromObject(p1, jsonConfig);

System.out.println(jsonObject);

注意：

如果服务器端返回的数据格式是json格式，那么我们在浏览器端得到数据时

需要使用eval函数将字符串转换成json对象.

var msg=xmlhttp.responseText;

var obj=eval(msg);

有的时候通过eval转换时，得不到一个json对象,这时做以下操作

var obj=eval("("+msg+")");

8. 案例-使用json来完成商品信息模糊查询操作实现

精彩资源与分享，欢迎关注【Java帮帮】微信公众号与【Java帮帮】QQ空间

一节我们来说一下如何用ajax提交请求？

我们先不讲ajax的原理，还是先以实战为主，看一下这个东西到底怎么用的？

form表单：

<!-- 采用post表单提交 -->
 <form style="margin-left:200px;" id="myform" name="myform" method="post" onsubmit="return sumbitTest();" 
 action="login.do"> 
 <table> 
 <tr> 
 <td>用户名:</td> 
 <td> <input type="text" name="username" id="username"/> </td> 
 </tr> 
 <tr> 
 <td>密码:</td> 
 <td> <input type="password" name="password" id="password"/> </td> 
 </tr> 
 <tr> 
 <td colspan="2"> 
 <input style="display:none" id="login_btn" type="submit" value="提交"> 
 </td> 
 </tr> 
 
 <div id="errMsg" style="color:red">${errMsg}</div>
 
 <input id="loginType" type="text" name="loginType" hidden='true'/> </td>
 
 </table> 
 </form> 

修改提交方法：

 function doLogin(type){
 if(type=='QQ'){
 alert('您选择的是QQ登录');
 }
 
 if(type=='weixin'){
 alert('您选择的是微信登录');
 }
 
 $("#loginType").val(type);
 
 //$("#login_btn").click();
 
 //如果验证通过，就开始进行提交 
 if(sumbitTest()){
 $.ajax({
 type: "GET",
 url: "login.do",
 data: {username:$("#username").val(), password:$("#password").val()},
 dataType: "json", //预期服务器返回的数据
 success: function(data){
 if(data.errCode < 0){
 $("#errMsg").show().html(data.errMsg).stop(true,true).fadeOut(3000);
 }else{
 //登录成功，做其他处理
 alert("恭喜你，登录成功！") 
 }
 
 }
 });
 }
 
 
 }
 
 //验证登录信息 
 function sumbitTest(){
 
 return true;
 
 //在这个方法中可以对登录信息进行校验 （作业，用户名和密码都不能为空） 
 if(!$("#username").val()){
 alert("用户名不能为空！");
 return false;
 }
 
 if(!$("#password").val()){
 alert("密码不能为空！");
 return false; 
 }
 
 }

ajax是异步操作，和同步操作的form表单提交不同。

例子一：同步就是打电话，对方不接就一直等。异步就是发微信，对方回不回我都可以去做别的事情。

例子二：同步就像玩RPG回合制游戏，比如口袋妖怪，你打我一下，我打你一下。异步就像玩红色警戒，我可以先派20辆天启坦克去轰炸对面的兵工厂，下完指令后还可以立刻回到主基地造一座雷达。

OK，刚才我们看到ajax提交有一个属性是text，这就表示返回的数据格式是文本。实际上，我们一般用的数据格式并非text，而是JSON。我们需要在Servlet中手动给我们的JSP页面返回一个json数据。

WebUtil.writeObject(resp, JSONObject.fromObject(resultData) );

其中，resultData是一个包含错误码和错误信息的专用类：

public class ResultData {
 
 private int errCode=0;
 private String errMsg;
 
 public int getErrCode() {
 return errCode;
 }
 public void setErrCode(int errCode) {
 this.errCode=errCode;
 }
 public String getErrMsg() {
 return errMsg;
 }
 public void setErrMsg(String errMsg) {
 this.errMsg=errMsg;
 }
}

因为最终转换的时候肯定默认调用resultData对象的toString方法，所以我们不妨直接重写ResultData类的toString方法，返回JSON格式。