7.10--------Ajax:Asynchronous JavaScript And XML异步的 JavaScript 和 XML1：编写ajax遵守基本标准习惯标签名全小写，标签必须有结束标签，属性名必须小写，属性值必须位于“”或''内2：创建ajax服务端代码：AjaxServer.java和普通的servlet类似，区别在于，普通servlet返回的是页面，而ajax返回的是我们想要的数据ajax框架：dwr,dojo,ext,prototype,jquery3、编写页面：ajax.htmlA:编写js：verify.jsB:在页面中引入该js4、精简js：verify.js--->verify1.js5、不使用jquery框架，直接使用ajax的异步对象XMLHttpRequest对象去实现ajax应用步骤：A：创建XMLHttpRequest对象B：注册回调函数C：设置连接信息D：发送数据到服务端进行交互E：接受数据创建js：verifyown.js相关代码：------------var xmlHttp;function verify(){//使用dom方式获取username的值var username = document.getElementById("username").value;//A：创建XMLHttpRequest对象xmlHttp = getXMLHttpRequest();//判断该异步对象是否创建成功if(xmlHttp){// B：注册回调函数xmlHttp.onreadystatechange = callback;// C：设置连接信息xmlHttp.open("get","ajaxServer?username="+username,true);//D：发送数据到服务端进行交互xmlHttp.send(null);//xmlHttp.open("post","ajaxServer",true);//设置请求头//xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//xmlHttp.send("username="+username);}}//D：发送数据到服务端进行交互function callback(){//判断数据是否交互完成if(xmlHttp.readyState == 4){//判断http交互是否成功if(xmlHttp.status == 200){//返回响应数据//alert(xmlHttp.responseText);var text = xmlHttp.responseText;//alert(text);document.getElementById("result").innerHTML = text;}}}//A：创建XMLHttpRequest对象function getXMLHttpRequest(){var xmlHttp = null;try{//FF Safari Opera IExmlHttp = new XMLHttpRequest();}catch(e){try{//IE 5,6xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");}catch(e){xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}}return xmlHttp;}6:接收返回值类型为xml格式的数据A：AjaxServer.java--->AjaxXMLServer.javaB:配置web.xmlc：verifyown.js--->verifyXML.jsfunction callback(){//判断数据是否交互完成if(xmlHttp.readyState == 4){//判断http交互是否成功if(xmlHttp.status == 200){//返回响应数据 xml返回的是个对象//alert(xmlHttp.responseText);var xml = xmlHttp.responseXML;//var xml = xmlHttp.responseText;//alert(xml);var msgs = xml.getElementsByTagName("message");if(msgs.length > 0){textNode = msgs[0].firstChild;//alert(textNode.nodeValue);var msg = textNode.nodeValue;//alert(msgs.length);document.getElementById("result").innerHTML = msg;}else{alert("xml数据解析错误，原始内容为："+xmlHttp.responseText);}}}}7.11------------7、使用jquery的ajax方法实现文本数据的返回verify.js---->verifyJquery.js$.ajax({//type:"get",//url:"ajaxServer?username="+username,type:"post",url:"ajaxServer",data:"username="+username,success:function(data){//alert(data);$("#result").html(data);}});8、使用jquery的ajax方法实现xml数据的返回verifyJquery.js---->verifyJqueryXML.js$.ajax({//type:"get",//url:"ajaxServer?username="+username,type:"post",url:"ajaxXMLServer",data:"username="+username,dataType:"xml",success:callback});function callback(data){//dom--->jquery $(dom)//jquery-->dom jquery.get(0)var jqueryObj = $(data);var msgs = jqueryObj.children();var text = msgs.text();$("#result").html(text);}9、缓存问题：FF每次都发送请求。IE到哪个请求路径一样时，会调用缓存解决方案：时间戳function convertURL(url){var timestamp = new Date().getTime();//将该时间戳加到url上if(url.indexOf("?") >= 0){url += "&t="+timestamp;}else{url += "?t="+timestamp;}return url}简单的Math.Random()var url = "ajaxServer?username="+username+"&t="+Math.random();10、解决中文乱码问题get/post//服务器端解码一次username = URLDecoder.decode(username, "utf-8");//在js端编码2次username = encodeURI(username);username = encodeURI(username);字节码编码的原理：在文本框中输入“中”11：jQuery部分方法练习test1.html-------//1、简单：伪类//：firstvar firstul = $("ul:first");//alert(firstul.get(0).id);//:lastvar lastul = $("ul:last");//alert(lastul.get(0).id);var ul = $("ul").get(1);//alert(ul.id);//:not//var notul = $("ul:not");var notul = $("#newsList li:not(.highlight)");//alert(notul.length);//alert(notul.text());//手动遍历该集合notul.each(function(){//alert(this.innerHTML);//alert($(this).html());});//将记录的间隔显示不同颜色//：odd(单数) even(双数)var uls = $("li:even");//alert(uls.length); //5/*uls.each(function(){this.className="highlight"; //添加class属性值});*///使用隐式递归//uls.addClass("highlight");//为每个元素添加class属性值 //alert($("span").html());//$("span").text("<font color='red'>haha</a>");//$("span").html("<font color='red'>haha</a>");//$("li:first").addClass("highlight");//$($("li").get(2)).addClass("highlight");//$("li:eq(2)").addClass("highlight");//$("li:gt(2)").addClass("highlight");//$("li:lt(2)").addClass("highlight");//获取所有的h标签//var hs = $("h1,h2,h3,h4,h5,h6");//hs.addClass("head");//$(":header").addClass("head");//内容//contains//var nodes = $("li:contains(4)");//nodes.addClass("highlight");//var ele = $(":hidden");//var ele = $(":visible");//表单//var ele = $(":text");//var ele = $(":input");//表单对象属性//var fms = $("form").get(0);//alert(fms.elements.length);//alert($("input:checked").length);//alert($("form :checked").length);//var eles = $("li:contains(4)");//eles.css("color","red");----------------//链式调用源码分析function Demo(){}Demo.prototype={setName:function(name){this.name = name;//返回对象本身return this;},getName:function(){return this.name;},setAge:function(age){this.age = age;return this;},getAge:function(){return this.age;}}//工厂函数function D(){return new Demo();}var o = D().setName("xwq").setAge("14");alert(o.getName()+" "+o.getAge());});-------------1：应用案例1：弹出窗口A：编写页面：jqueryWin.htmlB:编写css：win.cssC:编写js：jqueryWin.jsfunction showWin(){var winNode = $("#win");//方法一 修改css//winNode.css("display","block");//方法二 show()//winNode.show("slow"); //slow normal fast 可选//方法三：fadeIn();//winNode.fadeIn("slow");//方法四 slideDownwinNode.slideDown(3000);}function hide(){var winNode = $("#win");//方法一 修改css//winNode.css("display","none");//方法二//winNode.hide();//方法三：fadeOut();//winNode.fadeOut();winNode.slideUp();} 7.12------2、应用案例2 弹出菜单A：编写页面：jqueryMenu.htmlB:编写css：menu.cssC:编写js:menu.js完善点1：单击ul节点任何位置都会触发click事件完善点2：为二级菜单添加连接，单击后将相关页面在类似与iframe中显示jQuery(function()//$(document).ready(function(){//var uls = $("ul");var as = $("ul>a");as.click(function(){//取得当前的点击的ulvar ulNode = $(this);//找到当前ul下所有li子元素集合 toggle() 切换的显示和隐藏//ulNode.children("li").toggle("slow");//完善点一 方法一、nextAll() prevAll()所有li兄弟元素ulNode.nextAll("li").toggle("slow");//方法二、parent() 父元素//ulNode.parent().children("li").toggle("slow");});//完善点二//给子菜单绑定click事件$("li>a").click(function(){//load事件不能用于 $(document).ready//$("#content").load(this.id);$("#content").load($(this).attr("id"));});});3、应用案例3：编辑文本框A：编写html页面-jqueryEdit.htmlB:编写css：edit.css逻辑：1、让这两个td绑定一个click事件2、获取当前点击的td对象3、取出当前td的值，存入临时变量4、清空td的内容5、创建一个input输入域6、将临时变量的值赋给input输入域的value值7、将该input元素插入到当前td中8、取消绑定到该td上的click事件完善点1：修改后单击回车键，修改过的值写入td，input消失,重新单击时，又可以进入编辑状态完善点2：文本框内容高亮显示jQuery(function(){ //绑定事件方法//$("td").click(tdclick);//可以绑定多个$("td").bind({click:tdclick});//});function tdclick(){//获取当前对象中的值var td = $(this);var text = td.text();//var len = text.length;//清空当前对象中的内容td.empty();//创建一个input输入域var input = $("<input>");//设置input.attr("value",text);//给input绑定keyup事件input.keyup(function(event){//解决多浏览器获取事件的差异var myEvent = event||window.event;//判断是否按下回车键if(myEvent.keyCode == 13){//保存input元素的内容var value = input.val();td.html(value);//重新获取click事件td.click(tdclick);}});//将input插入到当前td中input.appendTo(td);//td.append(input);//文本框内容高亮显示input.get(0).select();//取消绑定的事件td.unbind("click");//另一种方法//td.html("<input value='"+text+"' size='"+len+"' />");}---------------jQuery(function(){$("td").click(tdclick);});function tdclick(){var td = $(this);var text = td.text();td.html("<input value='"+text+"'/>");var input = td.children();input.keyup(function(event){var e = event||window.event;if(e.keyCode == 13){var value = input.val();td.html(value);td.click(tdclick);}});td.unbind("click");}4：jquery综合案例1：模拟股票涨跌功能A：建立一个封装股票信息对象：Stock.javaB: 编写服务端的servlet:用于返回实时更新的股票信息 GetStockInfo.javaC:配置web.xmlD：编写页面：jqueryStock.html完善点1：每隔一秒自动刷新指数完善点2：当前价格低于昨天收盘价，显示绿盘，否则显示红盘第二部分：实现当鼠标移到某个链接后，填出窗口，显示该股票的具体信息A:修改jqueryStock.html,加入弹出窗口pB:jqueryStock.js----》jqueryStock1.jsC:编写css,修饰该弹出框：stock.cssD:通过js可控制弹出框的位置E:返回的JSON格式的值是数组或对象的不同处理方式var obj;var sid;jQuery(function(){//alert(1);var stockNode=$("#stock");//隐藏该弹出框stockNode.hide();var as=$("a");as.mouseover(function(event){var aNode=$(this);//alert(aNode);var pNode=aNode.parent();//对象格式//sid=pNode.attr("id");//数组格式sid=pNode.attr("name");//更新弹出框updateDIV();//通过js可控制弹出框的位置//A:直线移动//创建该链接的偏移量//var offset=aNode.offset();//设置弹出框的left,top//stockNode.css("left",offset.left+"px")//.css("top",offset.top+aNode.height()+"px");//B：平面移动//FF/IE兼容var myEvent = event||window.event;//alert("x:"+myEvent.clientX+"y:"+myEvent.clientY);stockNode.css("left",myEvent.clientX+5+"px").css("top",myEvent.clientY+5+"px");//显示该弹出框stockNode.show();});as.mouseout(function(){//隐藏该弹出框stockNode.hide();});getInfo();setInterval(getInfo,1000);});function getInfo(){$.get("getStockInfo",null,function(data){//data=[{name:"上证指数",yes:2067.2,tod:2056.3,now:2046.71},// {name:"美利纸业",yes:5.12,tod:5.23,now:5.44}]//将返回的字符串解析成js对象var obj = eval(data);//获取该集合中的具体的股票对象(数组格式)var szzs = obj[0];var mlzy = obj[1];//对象格式//data=//{// "000001":{name:"上证指数",yes:2067.2,tod:2056.3,now:2051.3},// "000815":{name:"美利纸业",yes:5.12,tod:5.32,now:5.34}}//var szzs = obj["000001"];//var mlzy = obj["000815"];var span1 = $("#000001").children("span");span1.html(szzs.now);var span2 = $("#000815").children("span");span2.html(mlzy.now);//当前价格低于昨天收盘价，显示绿盘，否则显示红盘if(szzs.now > szzs.yes){span1.css("color","red");}else{span1.css("color","green");}if(mlzy.now > mlzy.yes){span2.css("color","red");}else{span2.css("color","green");}//更新弹出框updateDIV();});}//更新弹出框function updateDIV(){var stockObj = obj[sid];//alert(stockObj.name);for(var proname in stockObj){//alert(proname);if(proname !="name"){//找到p节点var spanDiv=$("#"+proname).children("span");spanDiv.html(stockObj[proname]);//重新设置红绿盘if(stockObj.now > stockObj.yes){$("#now").children("span").css("color","red");}else{$("#now").children("span").css("color","green");}}}}5、jquery综合案例2:模拟下拉框自动补全功能A：编写服务端代码：AutoComplete.javaB:配置web.xmlC:配写数据文件：word.xmlD：编写页面：jqueryAutoComplete.htmlE:编写js:jqueryAuto.jsF:编写补全框的样式：使用js的css方法G:增加键盘事件：jqueryAuto.js---》jqueryAuto1.js//定义一个当前高亮显示的节点的索引号var highlightindex = -1;jQuery(function(){var timeout; //定时器var wordInput = $("#word");//获取该输入框的偏移量var wordInputOffset = wordInput.offset();//获取autop节点对象var autoNode = $("#auto");//将自动提示框先隐藏autoNode.hide().css("border","1px black solid").css("backgroundColor","gray").css("position","absolute").css("left",wordInputOffset.left+"px").css("top",wordInputOffset.top+wordInput.height()+7+"px").css("width",wordInput.width()+2+"px");//.width(wordInput.width()+"px");wordInput.keyup(function(event){var myEvent = event||window.event;var code = myEvent.keyCode;//判断是否是a-z，退格键，delete键if(code >=65 && code<=90 || code==8 || code ==46){var word = wordInput.val();//将该值交给ajax引擎请求后台服务器if(word != ""){clearTimeout(timeout);//服务器请求加上延时，最后一个keyup再发送请求timeout = setTimeout(function(){$.post("autoComplete",null,function(data){var jqueryObj = $(data);//找到所有的word节点var wordNodes = jqueryObj.find("word");//清空该提示框autoNode.empty();wordNodes.each(function(){var text = $(this).text();if(text.indexOf(word) == 0){//$("<p>").html(text).appendTo(autoNode);$("<p>").text(text).appendTo(autoNode);}});autoNode.show();});},500);}else{autoNode.hide();}}//单独处理向上和向下键//向上键else if(code == 38){var autoNodes = autoNode.children("p");if(highlightindex == -1){//将索引值置为长度-1highlightindex = autoNodes.length -1;}else{//将原来的记录背景还原为白色autoNodes.eq(highlightindex).css("background-color","white");highlightindex--;autoNodes.eq(highlightindex).css("background-color","blue");}}else if(code == 40){var autoNodes = autoNode.children("p");autoNodes.eq(highlightindex).css("background-color","white");if(highlightindex == autoNodes.length-1){highlightindex = -1;}highlightindex++;autoNodes.eq(highlightindex).css("background-color","blue");}else if(code == 13){if(highlightindex >=0 ){var autoNodes = autoNode.children("p");var wordText = autoNodes.eq(highlightindex).text();wordInput.val(wordText);autoNode.hide();highlightindex = -1;}else{alert(wordInput.val());wordInput.blur();}}});//给按钮绑定click事件$("input[type='button']").click(function(){alert(wordInput.val());});});补充---------//js中定义一个对象的方法var obj={name:"mike",age:12};jquery中的两大特性：链式调用和隐式递归html() html(val) //匹配第一个元素text() text(val) //匹配所有的元素val() val(val) //匹配第一个元素jquery中的相当于js中的onload方法//jQuery(function()$(document).ready(function()/*让相邻框合并*/border-collapse: collapse;$():返回一个空的jQuery对象。$(html):根据提供的HTML字符串,创建DOM 元素,如:$(“<h1>Hello</h1>")$(elements):将一个或多个DOM元素转化为jQuery对象,如:$(document.body)//web.xml中的启动时就加载 1是优先级<servlet><servlet-name>getStockInfo</servlet-name><servlet-class>com.itany.servlet.GetStockInfo</servlet-class><load-on-startup>1</load-on-startup></servlet>---------1、使用第三方jar包提供的方法实现将java对象转成JSON格式字符串A:test.jspB:test.jsC:javabean:Person.java,Address.javaD:编写servlet:DemoServlet.javaE:web.xmlservlet------resp.setContentType("text/html;charset=utf-8");//设置该页面无缓存resp.setHeader("cache-control", "no-cache");//初始化Person对象Person p = new Person("xwq","男",24,new Address("江苏省","南京市","浦口区"));Person p1 = new Person("sj","女",22,new Address("江苏省","南京市","浦口区"));//将该值存入list集合List<Person> ps = new ArrayList<Person>();ps.add(p);ps.add(p1);//将该集合转成json数组对象JSONArray jsonArray = JSONArray.fromObject(ps);//将sjon数据传给客户端JSONObject jsonObject = new JSONObject();jsonObject.put("person", jsonArray);resp.getWriter().print(jsonObject.toString());//resp.getWriter().print(JsonUtil.list2json(ps));js----function addPerson(){$.ajax({type:"post",url:"demoServlet",dataType:"json",success:function(data){//获取person对象集合var ps = data.person;$("#planTable").empty();$.each(ps,function(i,p){//拷贝行var row = $("#tr").clone();//对该行的每个子元素设置row.find("#name").text(p.name);row.find("#age").text(p.age);row.find("#gendar").text(p.gendar);row.find("#address").text(p.address.province+p.address.city+p.address.country);//将该tr追加到tablerow.appendTo("#planTable");});}});}