JavaWeb17-案例之ajax（Java真正的全栈开发）.docx

《JavaWeb17-案例之ajax（Java真正的全栈开发）.docx》由会员分享，可在线阅读，更多相关《JavaWeb17-案例之ajax（Java真正的全栈开发）.docx（16页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、案例& ajax一.案例i.生成订单操作分析先看下订单页面：币“F 订，两吊名楼价临ns001THINKING JAVA99计K机两吊名楼价临ns001THINKING JAVA99计K机| , 精整用户发编中心队订wweth触人i RE6式；xx京灯1 ，&t! K迎色车跖UWTM中心W)道口良分析下订单表需要那些字段id收货人(receiverName)收货地址(receiverAddress)收货人 (receiverPhone)总计(totalPrice)分析下表之间的关系这里面涉及到三张表，分别是用户表，订单表,商品表他们之间的关系为用户表和订单表之间是一对多的关系 订单表和商品表之

2、间是多对多的关系 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 ;)设置回调函数(onreadystatechange)xml . onreadystatechange=function();目的是服务器端响应完成后，浏览器端可以知道，并完成后续工作。open操作xml .

3、open( “GET，” /day/ajaxv ;设置访问的资源路径以及请求方式send操作xml .send(null);发送请求回调函数编写在第二步的回调函数内完成操作。3. XML Request 之 API 详解Ajax 的核心是 JavaScript 对象 Xml Requesto 该对象在 Internet Explorer 5中首次引入,它是一种支持异步请求的技术。简而言之, Xml Request使您可以使用JavaScript向服务器提出请求并处理响应， 而不阻塞用户。XML Request对象提供了对 协议的完全的访问， 包括做出POST和HEAD请求以及普通的GET请求的

4、能力。XML Request可以同步或异步地返回Web服务器的响应，并且能够以 文本或者一个DOM文档的形式返回内容。onreadystatechange 属性当XML Request对象的状态改变时会调用的一个函数.readyState 属性对于XML Request对象，它有一性readyState,它有五个状态0 创立 XML Request 又寸象.1当open时2当send时3响应头已经返回，但响应正文没有完成，也就是响应没有完全完成.4响应完成了一般情况下，在回调的函数中，我们都是判断if(xml .readyState=4&xml .status=200)来接收服务器端响应的信息

5、.status属性由服务器返回的 状态代码，如200表示成功，而404表示Not Found错误。当readyState小于3的时候读取这一属性会导致一个异 常。responseText 属性目前为止为服务器接收到的响应体(不包括头部)，或者如果还没有接收到数 据的话，就是空字符串。如果readyState小于3 ,这个属性就是一个空字符串。当readyState为,这个属性返回目前已经接收的响应局部。如果readyState为4 ,这个属 性保存了完整的响应体。如果响应包含了为响应体指定字符编码的头部，就使用该编码。否那么，假定使 用 Unicode UTF-80responseXML 属性

6、 对请求的响应，解析为XML并作为Document对象返回。open方法初始化 请求参数，例如URL和 方法，但是并不发送请求。xml .open（请求方式,url）;请求方式:POST GET路径:客户端路径格式/工程名/资源路径如果是GET方式，想要向服务器发送请求，并且携带请求参数，可以直接在 url后面连接。如果是POST方式，想要向服务器发送请求，并且携带请求参数，我们需要在 send时传递参数send方法发送 请求，使用传递给open。方法的参数，以及传递给该方法的可 选请求体。如果请求方式是post,并且要携带参数，可以通过send的参数来传递setRequestHeader 方

7、法向一个翻开但未发送的请求设置或添加一个 请求。如果请求方式是POST,并且要携带参数，需要设置一个请求头.setRequestHeaderCCONTENT-TYPEYapplication/x-www-form- urlencoded);中文乱码问题get请求需要在发送请求的时候对中文进行编码,如下：xml .open(M getH,11 $pageContext.request,contextPath/ajax2?username=H+encodellRI(document.getElementById( MusernameM ) . value);服务器端处理方式和之前request的处

8、理乱码方式一样.3 .案例-验证用户名是否重复.案例-商品信息模糊查询a.修改页面(menu_search.jsp),在这个页面的搜索栏添加ajax请求Search 给搜索框添加键盘弹起事件，发送ajax请求,将输入的值出给后台b.编写后台功能接受ajax发送过来的值查找数据库(dao 使用 ColumnListHandler)生成响应信息c.效果如下LonelySearchE3E3现球:的喜马口 度平原的暖 牛雪人、 拥百世界上:前台代码模糊匹配function searchName(d)var xml ;if (window. XML Request) / code for all new

9、 browsersxml = new XML Request(); else if (window. ActiveXObject) / code for IE5 and IE6 xml = new ActiveXObject(Microsoft. XML );)回调函数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 cD

10、iv=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=;)离开之后恢复原色function changeColor2(d)d. style. backgroundColor=/#999，/;将选中的值赋给文本框function setName(d)document. getElementByld (z，name，z). value=d. innerHTML;设置完值之后将div隐藏document. getElementById(content), style, display=none;)后台代码public void doGet (

12、ServletRequest request, ServletResponse response) thr ows ServletException, lOException response. setContentType (z，text/html; charset=utf-8，/);获取参数String name = request. getParameter (，zname，z);name=new String (name. getBytes(iso8859-l)，utf-8);if (name=null | | name. trim(). length () =0) return;调用

13、 serviceProductService service=new ProductService();List 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);).js

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

15、ript中的对象和数组，所以这两种结构就是对象和数组 两种结构，通过这两种结构可以表示各种复杂的结构u对象：对象在js中表示为括起来的内容，数据结构为key :value,key : value,.的键值对的结构，在面向对象的语言中，key为对象的属 性，value为对应的属性值，所以很容易理解,取值方法为对象.key获取属 性值，这个属性值的类型可以是数字、字符串、数组、对象几种。u数组：数组在js中是中括号1括起来的内容，数据结构为java,javascript,vb,.,取值方式和所有语言中一样，使用索引获取,字 段值的类型可以是数字、字符串、数组、对象几种。经过对象、数组2种结构就可以

16、组合成复杂的数据结构了。6 .jsonlib插件介绍jsonlib 介绍Json-lib 是一个 Java 类库(官网:)可以 实现如下功能：转换 javabeans, maps, collections, java arrays 和 XML 成为 json 格式数据转换json格式数据成为javabeans对象Json-lib需要的jar包commons-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

17、. 6. jar json-lib-2. 4-jdkl5. jarjsonlib 常用 api数组,Collection集合转换成json数据使用JsonArray.fromObject(对象);Map z javaBean 转换成 json 数据使用 JsonObject.fromObject(对象);如果不想让javaBean中的数据出现在json中.JsonConfig jsonConfig = new JsonConfig();jsonConfig. setExcludes(new Stringprice);JSONObject jsonObject = JSONObject. fro

18、mObject(pl, jsonConfig);System. out., pri nt,l n (jsonOh ject.);注意表的设计:在订单表中添加一个用户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(

19、50) primary key, receivername varchar (20), receiveraddress varchar (100), receiverphone varchar (20), totalprice double, user_id int)；中间表(订单项表orderitem) 如果服务器端返回的数据格式是json格式，那么我们在浏览器端得到数据时 需要使用eval函数将字符串转换成json对象.var msg=xml .responseText;var obj=eval(msg);有的时候通过eval转换时，得不到一个json对象，这时做以下操作 var obj=

20、eval( +msg+ );8.案例-使用json来完成商品信息模糊查询操作实现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)订单

21、beanprivate String id;private String receiverName;private String receiverAddress;private String receiverPhone;private Double totalPrice;private User user;private List items;订单项实体beanprivate Order order;private Product product;private Integer buyNum;private Double littlePrice;用户实体:userprivate Integer

22、 id;private String username;private String password;订单生成保证用户登录从cartjsp点击结账按钮开始跳转到orderjsp（取出购物车里面商品信息及用户信息,还需自己录入收货信息）点击提交订单，发送请求到createOrderSevlet住要逻辑如下）Order order=new Order()： try (封装收货人信息及订单总价BeanUtils. populate(order, request. getParameterMap(); catch (IllegalAccessException e) e. printStackTra

23、ce (); catch (InvocationTargetException e) e. printStackTrace ();手动设置订单idorder. setId(UUIDUtils. getldO);order.setUser (User)request. getSession(). getAttribute(user);设置商品集合lnst list=new ArrayList();(Map) request. getSession (). getAtt(Map) request. getSession (). getAttMap cart ribute;for (Product

24、p : cart. keySet () list. add (new Orderitem (order, p, cart, get (p), p. getPrice ()*cart. get (p);order, setitems (list);注意:事务然后调用0rdeservice添加订单public void addOrder(Order order) try DataSourceUtils. startTransaction();添加订单orderDao orderDao = new orderDao();orderDao. addOrder(order);添加订单项Orderltem

25、Dao oiDao=new 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();

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

27、rder. getReceiverAddress(),order.getReceiverPhone (), order. getTotalPrice(),order. getUser(). getldO);)添加订单项(orderltemDao)public void addOrderltem(Order order) throws SQLException QueryRunner runner=new QueryRunner();String sql=insert into orderitem values(?,?,?,?);；Object params=new Objectorder, g

28、etltems(). 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,

29、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 Objectorder, getltems(). size() 2;for (int i = 0; i order, getltems(). size()

30、; i+) Orderltem item = order.getltems(). get(i);paramsi 0=item. getBuyNumO ;paramsigetProduct (). getld ();)runner, batch(DataSourceUtils. getConnection(), sql, params);)二.ajaxajax介绍AJAX 即Asynchronous Javascript And XML(异步 JavaScript 和 XML),是指一种创立交互式网页应用的网页开发技术。AJAX是一种用于创立快速动态网页的技术。通过在后台与服务器进行少量数据交换

31、，AJAX可以使网页实现异步更新。这 意味着可以在不重新加载整个网页的情况下，对网页的某局部进行更新。传统 的网页(不使用AJAX )如果需要更新内容，必须重载整个网页页面。ajax作用:AJAX不是一种新的编程语言，而是一种用于创立更好更快以及交互性更强的Web应用程序的技术。使用Javascript向服务器提出请求并处理响应而不阻塞用户！核心对象 XML Requesto通过这个对象，您的JavaScript可在不重载页面的情况 与Web服务器交换数据。AJAX在浏览器与Web服务器之间使用异步数据传输（ 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。AJAX可使因特网应用程序更小、更快，更友好。用户界面，JavaScript-JavaScript-HTML + CSS Re questsXMLvWEB和XML服务器，:3 寻 服务器端工4ajax入门案例获取 XML Request 对象对于不同的浏览器，获取方式有区别（从文档上粘过来）function getXML Request（） var xml ;