培訓年7月課件javascriptajax復習大綱

Ajax復習大Ajax二、Ajax只不過是要在javascript中調(diào)用一個叫XMLHttpRequest類，這個類可以WebHTTP協(xié)議進行交互，程序不通過瀏覽器發(fā)出請求，而是用這個特殊的JavaScript對象發(fā)送請求和接收響應(yīng)。AjaxXMLHttpRequestXMLHttpRequest最早是在IE5ActiveXW3C標準.InternetExplorer把XMLHttpRequestActiveX（FirefoxSafariXMLHttpRequest在不同瀏覽器上實例化方式不同，但是使用實例的屬性和方法都是一直////非IE或IE6Ajax對象方varajax=new//IE7以下瀏覽器創(chuàng)建Ajax方varajax=new XMLHttpRequest參考，xmlhttp.docAjax對象Http請求三、readyState//Ajax對象實體//Ajax對象實體functioncreateAjax(){varajax=null;try{//標準創(chuàng)建代ajax=new}catch(e)//IE標準創(chuàng)建代varMSXML for(varn=0;n<MSXML.length;n++){ajax=newActiveXObject(MSXML[n]);}}return}//AjaxGet請function//1.創(chuàng)建Ajax實例對varajax=//2.創(chuàng)建HTTP請*參數(shù)一:http方法,例如：POST、GET、PUT及PROPFIND。大小寫不敏感。參數(shù)二:請求的URL地址，可以為絕對地址也可以為相對地址。參數(shù)三:指定此請求是否為異步方式，默認為IE緩存問題特別的嚴重,url做緩存,那么我們只需要讓我們url//3.指定當readyState屬性改變時 ajax.onreadystatechange=*0未初始化)對象已建立，但是尚未初始化（尚未調(diào)用open方法(初始化)對象已建立，尚未調(diào)用send方法,已經(jīng)調(diào)用open方(發(fā)送數(shù)據(jù)send方法已調(diào)用，但是當前的狀態(tài)及http(數(shù)據(jù)傳送中)http頭不全，這時通過responseText獲取部(完成)數(shù)據(jù)接收完畢,此時可以通過通過responseText獲取完整的回應(yīng)數(shù)if(ajaxreadyState==4){varresult= }參數(shù):通過此請求發(fā)送的數(shù)據(jù),該參數(shù)只對POST有效//console.debug(ajax.responseText);//無法獲取數(shù)據(jù),Ajax采用的是異步傳輸，send方法調(diào)用后，不會等到數(shù)據(jù)返回完畢，而是直接執(zhí)行下面的代碼，現(xiàn)在可能請求還沒有處理完畢，采用onreadystatechange}//AjaxPost請通過Ajax請求服務(wù)器，服務(wù)器端接收數(shù)據(jù)request.getParameter(“key”),無法獲取參數(shù)，因為服務(wù)器端使用的urldecoded進行 ，需要設(shè)置請求頭setRequestHeader("Content-Type","application/x-www-form-function//創(chuàng)建ajax對varajax//創(chuàng)建Http請求,Post請求瀏覽器不會使用緩存.如果用POST請求向服務(wù)器發(fā)送數(shù)據(jù)，需要將“Content-Type”的首部設(shè)置為“application/x-知服務(wù)器正在發(fā)送數(shù)據(jù)，并且數(shù)據(jù)已經(jīng)符合URL編碼了。因 它使用URL進 ajax.onreadystatechange=*判斷Ajax請求狀態(tài)和Httpif(ajaxreadyState==4&&varresult=ajax ementById("msg").innerHTML=result;}//*參數(shù)一:發(fā)送給服務(wù)器的參數(shù),參數(shù)格式為 }"-<title>Ajax基礎(chǔ)使用<inputtype="button"value="Ajax(GET)"<inputtype=”button”value=”Ajax(POST)”<div3種格式：HTMLHTMLXMLHttpRequestHTML將在responseText屬性中。插入HTML代碼最簡單的方法是更新這個元素的innerHTML屬性。特點：服務(wù)器端把頁面所需要的HTML生成完畢，Ajax"-省<selectid="provinceSelect"城<select<optionvalue="-1">--請選擇city.js文件//頁面加載完畢執(zhí)行份信window.onload=//創(chuàng)建Ajaxvarajax=//創(chuàng)建Http請 readyState屬性改ajax.onreadystatechange=if(ajaxreadyState==4&&ajax.status==200){varresult=ajax.responseText;varprovinceSelect= provinceSelect.innerHTML+=result;}}varcityMap=newfunctionvarprovinceSelect=varcitySelect ='<varpid=provinceSelect.value;}citySelect.innerHTML+=cityMap[pid];}//創(chuàng)建Ajaxvarajax=//創(chuàng)建Http readyStateajax.onreadystatechange=if(ajaxreadyState==4&&ajax.status==200){varresult=ajax.responseText; citySelect.innerHTML+=result;}}Struts2<action<actionname="province"<actionname="city"/WEB-Jsp視圖<%@taglibprefix="s"uri="/struts-tags" tor<optionvalue="<s:propertyvalue="id"/>"><s:property ActionpublicpublicclassProvinceActionextendsActionSupport{publicStringexecute()throwsExceptionList<Province>provinces=HttpServletResponseresponse=ServletActionContext.getResponse();PrintWriterout=response.getWriter();for(Provinceprovince:provinces){out.println("<option}return}}publicpublicclassCityActionextendsActionSupport{privateLongpid;publicvoidsetPid(Longpid){this.pid=pid;}publicStringexecute()throwsExceptionList<City>citys=getCityByProvince(pid);return}//privateList<City>getCityByProvince(longpid)*1L,*1L,"2L,3L山西List<City>citys=newArrayList<City>();if(pid==1L){citys.add(newCity(1L, citys.add(newCity(2L南充citys.add(newCity(3L達州citys.add(newCity(4L遂林citys.add(newCity(5L攀枝花citys.add(newCity(6L宜賓}elseif(pid==2L)citys.add(newCity(7L廣州citys.add(newCity(8L, citys.add(newCity(9L, citys.add(newCity(10L江門}elseif(pid==3L),"citys.add(newCity(12Lcitys.add(newCity(13L晉中citys.add(newCity(14L呂梁}elsecitys.add(newCity(null未知城市}return}}XMLXMLDOM特點：XML是通用的數(shù)據(jù)格式，只負責把對象轉(zhuǎn)換為指定的XML格式，不關(guān)心數(shù)據(jù)顯示，Ajax通過responML屬性接收一個XML文檔對象通過文檔對象獲取數(shù)據(jù)信息。缺點:XML結(jié)構(gòu)過于復雜，那么導致解析過于復雜和繁瑣。window.onloadfunction(){//創(chuàng)建Ajaxvarajax=//創(chuàng)建Http請 readyState屬性改ajax.onreadystatechange=if(ajaxreadyState==4&&//獲取xml文檔對varxmlDoc=ajax //獲取xml中所有的vardatas= varprovinceSelect= for(vari=0;i<datas.length;i++){vardata=varid=varname=datafirstChildvaroption= option.value=id;option.innerHTML=name;}}functionvarprovinceSelect=varcitySelect= citySelect.innerHTMLoptionvalue="-1">--請選擇--</option>';varpid=provinceSelect.value;}//創(chuàng)建Ajaxvarajax=//創(chuàng)建Http請 readyState屬性改ajax.onreadystatechange=if(ajaxreadyState==4&&ajax.status==200){varxmlDoc=ajaxrespon vardatas=xmlDoc.ge }}//處理cityfunctionvarcitySelect= for(vari=0;i<datas.length;i++){vardata=varid=varname=datavaroption= option.value=id;option.innerHTML=name;}}Struts2<action<actionname="provinceXML"<actionname="cityXML"ActionpublicpublicclassProvinceXMLActionextendsActionSupportpublicStringexecute()throwsExceptionList<Province>provinces=Province.getAllProvince();HttpServletResponseresponse=ServletActionContext.getResponse();//設(shè)置響應(yīng)頭信息，必須設(shè)置否則ajax對象無法 ML屬性PrintWriterout=response.getWriter();out.println("<?xmlversion=\"1.0\"encoding=\"UTF-8\"?>");for(Provinceprovince:provinces)}returnnull;}}publicclassCityXMLActionextendsActionSupportprivateLongpublicvoidsetPid(Longpid){this.pid=pid;}publicStringexecute()throwsExceptionList<City>citys=HttpServletResponseresponse=////設(shè)置響應(yīng)頭信息，必須設(shè)置否則ajax對象無法respon ML屬性.PrintWriterout=out.println("<?xmlversion=\"1.0\"encoding=\"UTF-8\"?>");for(Citycity:citys)out.println("<data}returnnull;}//privateList<City>getCityByProvince(longpid)*1L 2L "3L山西List<City>citys=newArrayList<City>();if(pid==1L){citys.add(newCity(1L, citys.add(newCity(2L南充citys.add(newCity(3L達州citys.add(newCity(4L遂林citys.add(newCity(5L攀枝花citys.add(newCity(6L宜賓}elseif(pid==2L)citys.add(newCity(7L廣州citys.add(newCity(8L, citys.add(newCity(9L, citys.add(newCity(10L江門}elseif(pid==3L)citys.add(newCity(11L太原citys.add(newCity(12Lcitys.add(newcitys.add(newCity(13L晉中citys.add(newCity(14L呂梁}elsecitys.add(newCity(null未知城市}return}}JSONJSON（JavaScriptObjectNotation）xml更輕巧。JSON是JavaScriptJavaScriptJSONAPI或工JSON/值’對”集合。一個對象以”{”開始，以“”結(jié)束。屬性值可具有的類型：string,numberobjectarraytruefalseJSON格式其實就是JavaScript中描述對象的一種簡單方式。varJSON格式其實就是JavaScript中描述對象的一種簡單方式。vararr=newvararrvarobj=newvarobj//JSON對象使用 varjson={};=“ json.say=function(){alert(thisname);alert(json//JSON對象使用 //varuser="name":" "age":30,"address":"cd","hiredate""address":"cd","hiredate"newDate(), ":true,"dept":}//JSON編寫小技巧，很多初學者，寫JSONvarobj=newObject();objname=“ obj.age=12; alert(obj.toSoruce());//打印出obj對象的JSON格式，該方法Firefox//多個JSONvarusers=[]; varusers //迭代usersfor(vari=0;i<users.length;i++){varuser=users[i];vars=varobjeval(“(”+s+”)”);//evalJSONLIB使用,jsonjarstruts2\libJSON Struts2publicclassJSONTestpublicpublicstaticvoidmain(String[]args)//JSONObject,List<Province>provinces=Province.getAllProvince();Provinceprovince=provinces.get(0);}}JSON應(yīng)用與//Ajax對象實體functioncreateAjax(){varajax=null;try{//標準創(chuàng)建代ajax=new}catch(e)//IE標準創(chuàng)建代varMSXML for(varn=0;n<MSXML.length;n++){ajax=newActiveXObject(MSXML[n]);}}return}window.onloadfunction(){//創(chuàng)建Ajaxvarajax=//創(chuàng)建Http請readyStateajax.onreadystatechange=if(ajaxreadyState==4&&//獲取返回JSONvarjson=//JSON字符串轉(zhuǎn)換為JSON對象(JavaScripg對象)vardatas=eval("("+json+")");varprovinceSelect= for(vari=0;i<datas.length;i++){vardata=datas[i];varid=data.id;varname=datavaroption= option.value=id;option.innerHTML=name;}}Struts2<package<packagename=”default”namespace=””extends=”json-<actionname="provinceJSON"<actionname="cityJSON"<resultOGNL表達式,需要變成JSON<paramActionProvinceJSONAction（publicpublicclassProvinceJSONActionextendsActionSupportpublicStringexecute()throwsExceptionList<Province>provinces=HttpServletResponseresponse= PrintWriterout=response.getWriter();StringBufferjsonString=newStringBuffer();for(Provinceprovince:provinces){}returnnull;}}publicpublicclassCityJSONActionextendsActionSupport{privateLongpid;publicvoidsetPid(Longpid){this.pid=pid;}publicStringexecute()throwsExceptionList<City>citys=//通過JSONLib把對象轉(zhuǎn)換為JSON字符串/*HttpServletResponseresponse=ServletActionContext.getResponse();PrintWriterout= return}//privateList<City>getCityByProvince(longpid)*1L,"2L,"3L山西List<City>List<City>citys=newArrayList<City>();if(pid==1L){citys.add(newCity(1L, citys.add(newCity(2L南充citys.add(newCity(3L達州citys.add(newCity(4L遂林citys.add(newCity(5L攀枝花citys.add(newCity(6L宜賓}elseif(pid==2L)citys.add(newCity(7L廣州citys.add(newCity(8L, citys.add(newCity(9L, citys.add(newCity(10L江門}elseif(pid==3L),"citys.add(newCity(12Lcitys.add(newCity(13L晉中citys.add(newCity(14L呂梁}elsecitys.add(newCity(null未知城市}return}}JQuery對Ajax操作進行了封裝,在jQuery中最底層的方法時$.ajax(),load$.get()$.post(),$.getScript()$.getJSON()位jQueryjQueryjsjquery-1.5.2.jsjquery-1.5.2-min.js壓縮后（去掉空格，換行Load載入HTML文件代碼并插入至DOM中待裝入任何有效資源地址?？梢允且粋€html,jsp,key/value數(shù)據(jù)。JSON格式或者URLJSO