學(xué)習(xí)筆記ajaxJava相關(guān)課程系列之十一

目一、Ajax概 什么是 Ajax對象：如何獲得Ajax對 Ajax對象的屬 編程步 編碼問 Ajax的優(yōu) 緩存問題（IE瀏覽器 案例：簡易（使用Ajax進行相關(guān)驗證，get請求 案例：修改1.8案例，使用post請 二、 什么是 數(shù)據(jù)交 輕量 JSON語法 如何使用JSON來編寫Ajax應(yīng)用程 案例：的實時行 同步請 案例：修改1.8案例step1中的JS代碼（使用同步請求 一、Ajax概述Xml驗的技術(shù)，其實質(zhì)是利用瀏覽器內(nèi)置的一個特殊對象（XMLHttpRequestAjax的頁面，而是文本或者Xml文檔AjaxAjax對象：如何獲得Ajax對象functiongetXhr(){//注意：后面的案例都將用到此函數(shù)varxhr=null;functiongetXhr(){//注意：后面的案例都將用到此函數(shù)varxhr=null; }return} }return}Ajax對象的屬性1）onreadystatechange：綁定一個處理函數(shù)（器），該函數(shù)用來處理readystatechange。Ajax對象的readyState屬性發(fā)生改變，比如從0到1，則會產(chǎn)生onreadystatechange。 ML：獲得服務(wù)器返回的Xml文檔。5）readyStateAjaxnumber類型的值。5個值，分別是：①0（②1（③2（④3（⑤4（編程步驟getstep1Ajax對象，比如：varxhr=getXhr();//調(diào)用之前定義的函數(shù)step2Ajaxget請求①調(diào)用xhr.open('get',check_username.do?username=chang&age=23,true);true：表示異步請求（Ajax對象發(fā)送請求時，用戶可以對當(dāng)前頁面作其他functionfunctiondom操作……}}poststep1Ajax對象，比如：varxhr=getXhr();//調(diào)用之前定義的函數(shù)step2Ajaxpost請求content-type消息頭getsend因為按照HTTPpostcontent-typeAjax對象在默認(rèn)情況下，不會發(fā)送這個消息頭，所setRequestHeader方法來添加。編碼問題get<Connectorport="8080"maxThreads="150"minSpareThreads="25"maxSpareThreads="75"enableLookups="false"redirectPort="8443"acceptCount="100"配置（conf<Connectorport="8080"maxThreads="150"minSpareThreads="25"maxSpareThreads="75"enableLookups="false"redirectPort="8443"acceptCount="100"varuir='check_username.do?username='+$F('username');post注意事項：FirefoxAjax的優(yōu)點緩存問題（IE瀏覽器getIE瀏覽（其他瀏覽器沒這個問題內(nèi)置的Ajax對象會檢查請求地址是否過，如果過，則不再向服務(wù)器發(fā)送請求。post方式發(fā)請求。3）案例：在IE瀏覽器中測試緩存問題step1：getNumber.jsp頁面<a<ahref="javascript:;onclick="getNumber();">顯示一個隨機數(shù)<divfunctiongetNumber(){varvarfunctiongetNumber(){varvar}}step3：ServletserviceifRandomr=newRandom();}案例：簡易（使用Ajax進行相關(guān)驗證，get請求varxhr=getXhr();//step1獲得Ajax//step2Ajax 處理函數(shù)，里面的代碼在狀態(tài)改變時執(zhí)行，且狀態(tài)為4時執(zhí)行if句//readyState4時，Ajaxvarvar$('username_msg').innerHTML=txt;//面 證functioncheck_number(){//檢查varxhr=getXhr();var} <formaction="regist.do" 用戶名：<formaction="regist.do" 用戶名：<inputtype="textname="usernameid="username"<spanclass="tips"真 ：<inputtype="text" ：<inputtype="text"name="number"id="number"onblur="check_number();"/><ahref="javascript:;"<spanclass="tips"<inputtype="submitvalue="提交注意事項：href="javascript:;"相當(dāng)于href="#"，寫成href="javascript:;"一般要和onclick一起使用表示a元素不再指向一個地址而是點擊后觸發(fā)一個PrintWriterout=response.getWriter();Stringuri=PrintWriterout=response.getWriter();Stringuri=Stringaction=uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));if(action.equals("/check_username")){String try Thread.sleep(6000);}catch(InterruptedExceptione){e.printStackTrace(); thrownewServletException("someerror"); Stringnumber1=request.getParameter("number");HttpSessionsession=request.getSession();Stringnumber2=(String)session.getAttribute("number"); }else 案例：修改1.8案例，使用post請求functioncheck_username_post(){varxhr=getXhr();varfunctioncheck_username_post(){varxhr=getXhr();var}}案例：使用Ajax實現(xiàn)下拉列表Stringname=request.getParameter("name"); }else Stringname=request.getParameter("name"); }else step2：select.jsp<select<selectid="s1"<divfunctionstep3：JavaScriptfunctionvarvarif(xhr.readyState==4){var }}二、JavaScriptObjectNatation，是一種輕量級的數(shù)據(jù)交換技術(shù)規(guī)范（數(shù)據(jù)交換將數(shù)據(jù)轉(zhuǎn)換成一種中間的，與平臺無關(guān)的數(shù)據(jù)格式（XmlJSON字符串）發(fā)輕量級JSON相對于XmlXml現(xiàn)在用的少了（AjaxxXml交換數(shù)據(jù)。JSON語法 {varobj={'name':'chang','age':22};functionf2(){//表示一個對象}varvarobj={'name':'chang','age':22};functionf2(){//表示一個對象}var }}JavaScript：Json語法來創(chuàng)建varvarp=varobj=newvarobj=new = obj.age==1=this.age=}vararr=[{'name':'chang','age':22},{'name':'bo','age':23}];}如何使用JSON來編寫Ajax應(yīng)用程序一般使用JSON提供的API（json-lib）來實現(xiàn)轉(zhuǎn)換（6個包：1主5副。也可用谷歌提供的API。例如例如 /**效果：{'name':'chang','code':'10086','price':12.8}*/publicstaticvoidtest1(){Stocks=newStock(); /**效果：{'name':'chang','code':'10086','price':12.8}*/publicstaticvoidtest1(){Stocks=newStock(); JSONObjectobj=JSONObject.fromObject(s);//json對象StringjsonStr= /**/**publicstaticvoidtest2()Randomr=newRandom(); DecimalFormatdf=newDecimalFormat("#.##");for(inti=0;i<3;i++){ Stocks=newStock(); JSONArray}String publicstaticvoidtest3()publicstaticvoidtest3()Stock[]stocks=newRandomr=newDecimalFormatdf=newfor(inti=0;i<3;i++){ Stocks=newStock(); JSONArray}String step2：JSONJavaScript一個js文件，里面提供了很多常用的函數(shù)，比如： $(id1,id2,id3...)id1,id2...查找對應(yīng)的節(jié)點，然后放到一個數(shù)據(jù)里面返5）evalJSON()JSONJavaScriptJavaScript對象function var//alert(typeof//prototypeevalJSONJavaScript象}function varvar 案例：的實時行/**/**Randomr=new for(ints.setCode("6000"+r.nextInt(30));double stocks.add(s);串StringjsonStr=array.toString(); out.println(jsonStr);//將JSON字符串發(fā)送到客戶端 <body<body<divid="d1"><div名稱</td><td>股票代碼<tbodystep4：JavaScriptfunctionfunctionf1(){ functionquoto(){ varxhr=getXhr(); xhr.onreadystatechange=function(){if(xhr.readyState==4){vartxt=vararr=txt.evalJSON();//jsonjavascript組 html+='<tr><td>'+arr[i].name++arr[i].code+'</td><td>'+arr[i].price+ $('tb1').innerHTML=}}注意事項：innerHTMLIEtdtable里的其他tr、tbody、thead、caption都不能賦值，只能用它去讀（兼容性問題。案例：顯示熱賣的前3個商品publicList<Sale>publicList<Sale>limit(inttop)throwsList<Sale>list=newArrayList<Sale>(); Connectionconn=DBUtil.getConnection();PreparedStatementprep=conn.prepareStatement("select*fromchang_saleorderbyqtydesclimitprep.setInt(1,ResultSetSalesale=new return step3：ActionServletserviceifintSaleDAOdao=newSaleDAO(); List<Sale>sales=newArrayList<Sale>();try{sales=dao.limit(top); JSONArrayarray=JSONArray.fromObject(sales);StringjsonStr=array.toString(); out.println(jsonStr);}catch(Exceptione){ functionfunctionquoto(){ varxhr=getXhr();}varif(xhr.readyState==4){ varfunctionfunctionquoto(){ varxhr=getXhr();}varif(xhr.readyState==4){ vartxt=xhr.responseText;vararr=txt.evalJSON(); varhtml=''; html+='<tr><td>'++'</td><td>'+arr[i].qty+$('tb1').innerHTML=html;} }同步請求Ajax對象在向服務(wù)器發(fā)送請求時，瀏覽器會鎖定當(dāng)前頁面，用戶不能夠?qū)Ξ?dāng)前頁注意事項：Firefox的某些版本（3、4）對于同步的支持比較特殊：不能使用xhr.onreadystatechange來綁定一個處理函數(shù)，而應(yīng)該在send方法執(zhí)if(navigator.userAgent.indexOf('Firefox')!=-1){if(navigator.userAgent.indexOf('Firefox')!=-1){return return'other';}//}functionif(getT