例 & 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格式。