1、案例& ajax一.案例i.生成訂單操作分析先看下訂單頁面：幣“F 訂，兩吊名樓價(jià)臨ns001THINKING JAVA99計(jì)K機(jī)兩吊名樓價(jià)臨ns001THINKING JAVA99計(jì)K機(jī)| , 精整用戶發(fā)編中心隊(duì)訂wweth觸人i RE6式；xx京燈1 ，&t! K迎色車跖UWTM中心W)道口良分析下訂單表需要那些字段id收貨人(receiverName)收貨地址(receiverAddress)收貨人 (receiverPhone)總計(jì)(totalPrice)分析下表之間的關(guān)系這里面涉及到三張表，分別是用戶表，訂單表,商品表他們之間的關(guān)系為用戶表和訂單表之間是一對多的關(guān)系 訂單表和商品表之

2、間是多對多的關(guān)系 if (window. XML Request) / code for all new browsersxml = new XML Request(); else if (window. ActiveXObject) / code for IE5 and IE6 xml = new ActiveXObject(Microsoft. XML );)return xml ;)設(shè)置回調(diào)函數(shù)(onreadystatechange)xml . onreadystatechange=function();目的是服務(wù)器端響應(yīng)完成后，瀏覽器端可以知道，并完成后續(xù)工作。open操作xml .

3、open( “GET，” /day/ajaxv ;設(shè)置訪問的資源路徑以及請求方式send操作xml .send(null);發(fā)送請求回調(diào)函數(shù)編寫在第二步的回調(diào)函數(shù)內(nèi)完成操作。3. XML Request 之 API 詳解Ajax 的核心是 JavaScript 對象 Xml Requesto 該對象在 Internet Explorer 5中首次引入,它是一種支持異步請求的技術(shù)。簡而言之, Xml Request使您可以使用JavaScript向服務(wù)器提出請求并處理響應(yīng)， 而不阻塞用戶。XML Request對象提供了對 協(xié)議的完全的訪問， 包括做出POST和HEAD請求以及普通的GET請求的

4、能力。XML Request可以同步或異步地返回Web服務(wù)器的響應(yīng)，并且能夠以 文本或者一個(gè)DOM文檔的形式返回內(nèi)容。onreadystatechange 屬性當(dāng)XML Request對象的狀態(tài)改變時(shí)會調(diào)用的一個(gè)函數(shù).readyState 屬性對于XML Request對象，它有一性readyState,它有五個(gè)狀態(tài)0 創(chuàng)立 XML Request 又寸象.1當(dāng)open時(shí)2當(dāng)send時(shí)3響應(yīng)頭已經(jīng)返回，但響應(yīng)正文沒有完成，也就是響應(yīng)沒有完全完成.4響應(yīng)完成了一般情況下，在回調(diào)的函數(shù)中，我們都是判斷if(xml .readyState=4&xml .status=200)來接收服務(wù)器端響應(yīng)的信息

5、.status屬性由服務(wù)器返回的 狀態(tài)代碼，如200表示成功，而404表示Not Found錯(cuò)誤。當(dāng)readyState小于3的時(shí)候讀取這一屬性會導(dǎo)致一個(gè)異 常。responseText 屬性目前為止為服務(wù)器接收到的響應(yīng)體(不包括頭部)，或者如果還沒有接收到數(shù) 據(jù)的話，就是空字符串。如果readyState小于3 ,這個(gè)屬性就是一個(gè)空字符串。當(dāng)readyState為,這個(gè)屬性返回目前已經(jīng)接收的響應(yīng)局部。如果readyState為4 ,這個(gè)屬 性保存了完整的響應(yīng)體。如果響應(yīng)包含了為響應(yīng)體指定字符編碼的頭部，就使用該編碼。否那么，假定使 用 Unicode UTF-80responseXML 屬性

6、 對請求的響應(yīng)，解析為XML并作為Document對象返回。open方法初始化 請求參數(shù)，例如URL和 方法，但是并不發(fā)送請求。xml .open（請求方式,url）;請求方式:POST GET路徑:客戶端路徑格式/工程名/資源路徑如果是GET方式，想要向服務(wù)器發(fā)送請求，并且攜帶請求參數(shù)，可以直接在 url后面連接。如果是POST方式，想要向服務(wù)器發(fā)送請求，并且攜帶請求參數(shù)，我們需要在 send時(shí)傳遞參數(shù)send方法發(fā)送 請求，使用傳遞給open。方法的參數(shù)，以及傳遞給該方法的可 選請求體。如果請求方式是post,并且要攜帶參數(shù)，可以通過send的參數(shù)來傳遞setRequestHeader 方

7、法向一個(gè)翻開但未發(fā)送的請求設(shè)置或添加一個(gè) 請求。如果請求方式是POST,并且要攜帶參數(shù)，需要設(shè)置一個(gè)請求頭.setRequestHeaderCCONTENT-TYPEYapplication/x-www-form- urlencoded);中文亂碼問題get請求需要在發(fā)送請求的時(shí)候?qū)χ形倪M(jìn)行編碼,如下：xml .open(M getH,11 $pageContext.request,contextPath/ajax2?username=H+encodellRI(document.getElementById( MusernameM ) . value);服務(wù)器端處理方式和之前request的處

8、理亂碼方式一樣.案例-驗(yàn)證用戶名是否重復(fù).案例-商品信息模糊查詢a.修改頁面(menu_search.jsp),在這個(gè)頁面的搜索欄添加ajax請求Search 給搜索框添加鍵盤彈起事件，發(fā)送ajax請求,將輸入的值出給后臺b.編寫后臺功能接受ajax發(fā)送過來的值查找數(shù)據(jù)庫(dao 使用 ColumnListHandler)生成響應(yīng)信息c.效果如下LonelySearchE3E3現(xiàn)球:的喜馬口 度平原的暖 牛雪人、 擁百世界上:前臺代碼模糊匹配function searchName(d)var xml ;if (window. XML Request) / code for all new br

9、owsersxml = new XML Request(); else if (window. ActiveXObject) / code for IE5 and IE6 xml = new ActiveXObject(Microsoft. XML );)回調(diào)函數(shù)xml . onreadystatechange=function()if(xml . readyState=4 & xml . status = 200)var data=xml . responseText;if(data!=null & data!=)var arr=data. split(/s*, s*/);var cDiv=

10、document. getElementByld (，zcontent，/);eDiv. innerHTML=；for(var i=0;iarr. length;i+) eDiv. innerHTML+= (/z+arri+/div”);eDiv. style, display=block”;/openxml , open (GET”, z/$ pageContext. request. contextPath /f indProductByName?name= +window. encodeURI(d. value);/sendxml , send ();)/放上去變色 為了展示效果好看 添

11、加顏色function changeColorl(d)d.style. backgroundColor=;)離開之后恢復(fù)原色function changeColor2(d)style. backgroundColor=/#999，/;將選中的值賦給文本框function setName(d)document. getElementByld (z，name，z). value=d. innerHTML;設(shè)置完值之后將div隱藏document. getElementById(content), style, display=none;)后臺代碼public void doGet ( Servle

12、tRequest request, ServletResponse response) thr ows ServletException, lOException response. setContentType (z，text/html; charset=utf-8，/);獲取參數(shù)String name = request. getParameter (，zname，z);name=new String (name. getBytes(iso8859-l)，utf-8);if (name=null | | name. trim(). length () =0) return;調(diào)用 servi

13、ceProductService service=new ProductService();List names=null;try names = service, findProductByName(name); catch (SQLException e) printStackTrace ();)if(names!=null & names, size()0)String names = names. toString();response. getWriter(). write(names . substring(1, names . length ()-1);).json介紹與入門js

14、on介紹JSON(JavaScript Object Notation)是一種輕量級的數(shù)據(jù)交換格式。它基于JavaScript ( Standard ECMA-262 3rd Edition - December 1999 )的一個(gè) 子集。JSON采用完全獨(dú)立于語言的文本格式，但是也使用了類似于C語言家 族的習(xí)慣(包括 C, C+, C#z Java, JavaScript, Perl, Python 等)。這些特性 使JSON成為理想的數(shù)據(jù)交換語言。易于人閱讀和編寫，同時(shí)也易于機(jī)器解析 和生成(網(wǎng)絡(luò)傳輸速度)。json格式JSON結(jié)構(gòu)有兩種結(jié)構(gòu)json簡單說就是javascript中的對象和

15、數(shù)組，所以這兩種結(jié)構(gòu)就是對象和數(shù)組 兩種結(jié)構(gòu)，通過這兩種結(jié)構(gòu)可以表示各種復(fù)雜的結(jié)構(gòu)u對象：對象在js中表示為括起來的內(nèi)容，數(shù)據(jù)結(jié)構(gòu)為key :value,key : value,.的鍵值對的結(jié)構(gòu)，在面向?qū)ο蟮恼Z言中，key為對象的屬 性，value為對應(yīng)的屬性值，所以很容易理解,取值方法為對象.key獲取屬 性值，這個(gè)屬性值的類型可以是數(shù)字、字符串、數(shù)組、對象幾種。u數(shù)組：數(shù)組在js中是中括號1括起來的內(nèi)容，數(shù)據(jù)結(jié)構(gòu)為java,javascript,vb,.,取值方式和所有語言中一樣，使用索引獲取,字 段值的類型可以是數(shù)字、字符串、數(shù)組、對象幾種。經(jīng)過對象、數(shù)組2種結(jié)構(gòu)就可以組合成復(fù)雜的數(shù)據(jù)結(jié)

16、構(gòu)了。.jsonlib插件介紹jsonlib 介紹Json-lib 是一個(gè) Java 類庫(官網(wǎng):)可以 實(shí)現(xiàn)如下功能：轉(zhuǎn)換 javabeans, maps, collections, java arrays 和 XML 成為 json 格式數(shù)據(jù)轉(zhuǎn)換json格式數(shù)據(jù)成為javabeans對象Json-lib需要的jar包c(diǎn)ommons-beanuti1s-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 js

17、on-lib-2. 4-jdkl5. jarjsonlib 常用 api數(shù)組,Collection集合轉(zhuǎn)換成json數(shù)據(jù)使用JsonArray.fromObject(對象);Map z javaBean 轉(zhuǎn)換成 json 數(shù)據(jù)使用 JsonObject.fromObject(對象);如果不想讓javaBean中的數(shù)據(jù)出現(xiàn)在json中.JsonConfig jsonConfig = new JsonConfig();jsonConfig. setExcludes(new Stringprice);JSONObject jsonObject = JSONObject. fromObject(pl,

18、 jsonConfig);System. out., pri nt,l n (jsonOh ject.);注意表的設(shè)計(jì):在訂單表中添加一個(gè)用戶id,表示用戶和訂單的關(guān)系添加一張中間表，表示訂單和商品的關(guān)系中間表的字段訂單oid商品pid購買商品數(shù)量buynum商品小計(jì)littleprice創(chuàng)立表用戶表create table user(id int primary key AUTO_INCREMENT,username varchar (20),password varchar(20)；訂單表(添加一個(gè)外鍵)create table orders (id varchar(50) primary

19、 key, receivername varchar (20), receiveraddress varchar (100), receiverphone varchar (20), totalprice double, user_id int)；中間表(訂單項(xiàng)表orderitem) 如果服務(wù)器端返回的數(shù)據(jù)格式是json格式，那么我們在瀏覽器端得到數(shù)據(jù)時(shí) 需要使用eval函數(shù)將字符串轉(zhuǎn)換成json對象.var msg=xml .responseText;var obj=eval(msg);有的時(shí)候通過eval轉(zhuǎn)換時(shí)，得不到一個(gè)json對象，這時(shí)做以下操作 var obj=eval( +msg+

20、 );8.案例-使用json來完成商品信息模糊查詢操作實(shí)現(xiàn)create table orderitem(oid varchar(50),pid varchar(50),buynum int,littleprice double,primary key(oid,pid);生成訂單的過程，先把收貨人信息及用戶id存入訂單表(receiver訂單id用戶id商品總價(jià))把購物車?yán)锏纳唐芳皵?shù)量放到訂單項(xiàng)表中(訂單id商品id購買數(shù)量小計(jì))最后修改商品表中的數(shù)量以上三個(gè)操作必須在一個(gè)事務(wù)控制范圍內(nèi)2.生成訂單操作實(shí)現(xiàn)保證用戶登錄編寫javabean(訂單bean,訂單項(xiàng)bean)訂單beanprivate

21、 String id;private String receiverName;private String receiverAddress;private String receiverPhone;private Double totalPrice;private User user;private List items;訂單項(xiàng)實(shí)體beanprivate Order order;private Product product;private Integer buyNum;private Double littlePrice;用戶實(shí)體:userprivate Integer id;private

22、 String username;private String password;訂單生成保證用戶登錄從cartjsp點(diǎn)擊結(jié)賬按鈕開始跳轉(zhuǎn)到orderjsp（取出購物車?yán)锩嫔唐沸畔⒓坝脩粜畔?還需自己錄入收貨信息）點(diǎn)擊提交訂單，發(fā)送請求到createOrderSevlet住要邏輯如下）Order order=new Order()： try (封裝收貨人信息及訂單總價(jià)BeanUtils. populate(order, request. getParameterMap(); catch (IllegalAccessException e) e. printStackTrace (); catc

23、h (InvocationTargetException e) e. printStackTrace ();手動(dòng)設(shè)置訂單idorder. setId(UUIDUtils. getldO);order.setUser (User)request. getSession(). getAttribute(user);設(shè)置商品集合lnst list=new ArrayList();(Map) request. getSession (). getAtt(Map) request. getSession (). getAttMap cart ribute;for (Product p : cart. k

24、eySet () list. add (new Orderitem (order, p, cart, get (p), p. getPrice ()*cart. get (p);order, setitems (list);注意:事務(wù)然后調(diào)用0rdeservice添加訂單public void addOrder(Order order) try DataSourceUtils. startTransaction();添加訂單orderDao orderDao = new orderDao();orderDao. addOrder(order);添加訂單項(xiàng)OrderltemDao oiDao=n

25、ew OrderltemDao();oiDao. addOrderltem(order);修改商品表ProductDao pDao=new ProductDaoO;pDao. updateProductPnum(order); catch (SQLException e) e. printStackTrace ();try (DataSourceUtils. rollback(); catch (SQLException el) el.printStackTrace();) finally(try (DataSourceUtils. commitAndRelease(); catch (SQL

26、Exception 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. getld(),order. getReceiverName (), order. getRe

27、ceiverAddress(),order.getReceiverPhone (), order. getTotalPrice(),order. getUser(). getldO);)添加訂單項(xiàng)(orderltemDao)public void addOrderltem(Order order) throws SQLException QueryRunner runner=new QueryRunner();String sql=insert into orderitem values(?,?,?,?);；Object params=new Objectorder, getltems().

28、size()4;for (int i = 0; i order, getltems(). size() ; i+) Orderitem item = order.getltems(). get(i);paramsi 0=item. getOrder(). getldO ;paramsi l=item. getProduct (). getTdO ;paramsi 2=item. getBuyNumO ;paramsi3=item. getLittlePrice();)runner, batch(DataSourceUtils. getConnection(), sql, params);)修改商品數(shù)量(productDao)public void updateProductPnum(Order order) throws SQLException 修改當(dāng)前訂單里的所含商品的數(shù)量QueryRunner runner =