java相關(guān)課程系列筆記之十一ajax學(xué)習(xí)建議用wps打開

目一、Ajax概 什么是 Ajax對象：如何獲得Ajax對 Ajax對象的屬 編程步 編碼問 Ajax的優(yōu) 緩存問題（IE瀏覽器 案例：修改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對象的屬性oneadystaecanereadystatechange。Ajax對象的readyState屬性發(fā)生改變，比如從0到1，則會產(chǎn)生onreadystatechange事件。3）responML：獲得服務(wù)器返回的Xml文檔。5）readyStateAjaxnumber類型的值。5個值，分別是：①0（②1（③2（④3（⑤4（編程步驟getstep1Ajax對象，比如：varxhr=getXhr();//調(diào)用之前定義的函數(shù)step2Ajaxget請求xhr.open('get',check_username.do?username=chang&age=23,true);方法：建true：表示異步請求（Ajax對象發(fā)送請求時，用戶可以對當(dāng)前頁面作其他false：表示同步請求（Ajax對象發(fā)送請求時，瀏覽器會鎖定當(dāng)前頁面，用functionfunctiondom操作……}}poststep1Ajax對象，比如：varxhr=getXhr();//調(diào)用之前定義的函數(shù)step2Ajaxpost請求content-type消息頭getsend因為按照HTTP協(xié)議的要求，發(fā)送post請求時，應(yīng)該發(fā)送一個content-typeAjax對象在默認(rèn)情況下，不會發(fā)送這個消息setRequestHeader方法來添加。編碼問題getIE瀏覽器內(nèi)置的Ajax對象會使用“GBK”或“GB2312”對中文參數(shù)進(jìn)行編碼，而其他瀏覽器（Chrom、Firefox）內(nèi)置的Ajax對象會使用“utf-8”對中文參數(shù)進(jìn)行編碼。服務(wù)<Connectorport="8080"maxThreads="150"minSpareThreads="25"maxSpareThreads="75"enableLookups="false"redirectPort="8443"acceptCount="100"<Connectorport="8080"maxThreads="150"minSpareThreads="25"maxSpareThreads="75"enableLookups="false"redirectPort="8443"acceptCount="100"step2encodeURI()函數(shù)（JS中內(nèi)置函數(shù)）對請求地址進(jìn)行編碼。encodeURI()varuir='check_username.do?username='+$F('username');post所有瀏覽器（一般指三大瀏覽器：Chrom、Firefox、IE）Ajax對象都會使用注意事項：FirefoxAjax的優(yōu)點緩存問題（IE瀏覽器getIE瀏覽器（其他瀏覽器沒這個問題）內(nèi)置的Ajax對象會檢查請求地址是否過，post方式發(fā)請求。3）案例：在IE瀏覽器中測試緩存問題step1：getNumber.jsp頁面"<divfunctiongetNumber(){varvarfunctiongetNumber(){varvar}}step3：ServletserviceifRandomr=newRandom();}案例：簡易（使用Ajax進(jìn)行相關(guān)驗證，get請求varxhr=getXhr();//step1獲得Ajax//step2Ajax var 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="提交hefaarphref="#"一起使用，表示a元素不再指向一個地址，而是點擊后觸發(fā)一個PrintWriterout=response.getWriter();Stringuri=PrintWriterout=response.getWriter();Stringuri=Stringaction=uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));if(action.equals("/check_username")){Stringusername=request.getParameter("username");try{//模擬耗時操作Thread.sleep(6000);}catch(InterruptedExceptione){}thrownewServletException("someerror"); StringStringnumber1=request.getParameter("number");HttpSessionsession=request.getSession();String }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"<divfunctionvarfunctionvarif(xhr.readyState==4){var }}二、JavaScriptObjectNatation，是一種輕量級的數(shù)據(jù)交換技術(shù)規(guī)范（數(shù)據(jù)交換將數(shù)據(jù)轉(zhuǎn)換成一種中間的，與平臺無關(guān)的數(shù)據(jù)格式（XmlJSON字符串）發(fā)送輕量級JSONXmlXml現(xiàn)在用的少了（AjaxxXml交換數(shù)據(jù)。JSON語法 {varobj={'name':'chang','age':22};functionf2(){//表示一個對象}varvarobj={'name':'chang','age':22};functionf2(){//表示一個對象}var }}注意事項：JavaScript中創(chuàng)建對象的三種方式（JavaScript8章：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(); doubleJSONArray}String publicstaticvoidtest3()publicstaticvoidtest3()Stock[]stocks=newRandomr=newDecimalFormatdf=newfor(inti=0;i<3;i++){ Stocks=newStock(); JSONArray}String step2：JSONJavaScriptjs文件，里面提供了很多常用的函數(shù)，比如： ：分別依據(jù)function var//alert(typeof//prototype框架提供的evalJSONJavaScript function varvar 案例：的實時行/**JSON/**JSONRandomr=newRandom(); DecimalFormatdf=newDecimalFormat("#.##");for(inti=0;i<8;i++){ Stocks=newStock(); s.setCode("6000"+r.nextInt(30));doubleprice=r.nextInt(100)+r.nextDouble(); stocks.add(s);}JSONArrayarray=JSONArray.fromObject(stocks);//將Java數(shù)組轉(zhuǎn)成JSON字符串StringjsonStr=array.toString(); <body<body<divid="d1"><div 名稱 代碼 <tbodyfunctionf1(){ functionf1(){ functionquoto(){ varxhr=getXhr(); xhr.onreadystatechange=function(){if(xhr.readyState==4){vartxt=vararr=txt.evalJSON();//將json字符串轉(zhuǎn)換成javascript對象組成的數(shù)組varhtml='';//將數(shù)組中的數(shù)據(jù)取出來，添加到tbody html+='<tr><td>'+arr[i].name+'</td><td>'+arr[i].code+'</td><td>'+arr[i].price+ $('tb1').innerHTML= 注意事項：innerHTML屬性對于IEtdtable里的其他節(jié)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;} }同步請求xhr.responseText方法來獲得服務(wù)器返回的數(shù)據(jù)。例如：if(navigator.userAgent.indexOf('Firefox')!=-1){return return'other';}//}functionif(getType()!