版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領
文檔簡介
JavaWeb開發(fā)從入門到實踐JavaWebDevelopmentFromIntroductiontoPracticeAjax、jQuery和JSON技術Chap10提綱Ajax、jQuery和JSON技術Ajax是一種通過異步方式與服務器交換數據并更新頁面的技術，jQuery是一個簡化JavaScript操作的庫，提供了便捷的DOM操作和事件處理，JSON是一種輕量級的數據交換格式，常用于客戶端與服務器之間傳輸結構化數據。10.1Ajax技術10.2jQuery技術10.3JSON技術10.4本章小結10.1Ajax技術10.1.1Ajax簡介10.1.2XMLHttpRequest對象的應用10.1.3應用案例：模擬用戶名驗證10.1.4應用案例：模擬百度搜索功能10.1.1Ajax簡介什么是AjaxAjax（AsynchronousJavaScriptandXML，異步JavaScript和XML）是一種用JavaScript語言與服務器進行異步交互的網頁開發(fā)技術，與服務器進行交換數據時，無需刷新整個頁面。Ajax的核心概念（1）異步數據處理。Ajax使用異步方式與服務器進行通信，服務器響應過程中，客戶端可以繼續(xù)處理其他任務，大大提高了用戶體驗和網站的響應速度。（2）更新部分數據。Ajax只需要刷新部分需要的數據，不需要刷新整個頁面。（3）使用JavaScript實現。Ajax依賴JavaScript，使用XMLHttpRequest對象實現異步通信，通過DOM操作更新頁面局部內容。（4）使用CSS和HTML呈現。10.1.1Ajax簡介普通交互與Ajax交互方式的區(qū)別10.1.1Ajax簡介普通交互與Ajax交互方式的區(qū)別10.1.1Ajax簡介Ajax的工作流程圖
10-2
Ajax的工作流程10.1.1Ajax簡介Ajax的工作流程（1）瀏覽器客戶端觸發(fā)一個Ajax事件，例如，onblur、onclick等。（2）創(chuàng)建XMLHttpRequest對象，調用open()方法，設置URL和請求方式。（3）向服務器發(fā)出請求。通過調用send()方法發(fā)送數據到服務器。（4）服務器訪問數據庫等。（5）服務器響應數據到瀏覽器。服務器響應了數據，XMLHttpRequest對象會觸發(fā)onreadystatechange事件。（6）調用回調函數，該函數不是立即執(zhí)行，而是等待服務器響應數據后在客戶端完成相關操作。10.1.2XMLHttpRequest對象的應用XMLHttpRequest對象的創(chuàng)建functioncreateXMLHttp(){
varxmlhttp;
if(window.XMLHttpRequest){//適合IE7+、Firefox、Chrome、Opera、Safari瀏覽器
xmlhttp=newXMLHttpRequest();
}elseif(window.ActiveXObject){//適合IE5、IE6瀏覽器
xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
}
returnxmlhttp;
}10.1.2XMLHttpRequest對象的應用XMLHttpRequest對象的屬性表
10-1XMLHttpRequest對象的屬性及其描述屬性描述onreadystatechange狀態(tài)改變時會觸發(fā)這個事件處理器readyState對象狀態(tài)值，例如，常用的4表示數據接收完畢status服務器的HTTP狀態(tài)碼，比如，200表示已就緒statusTextHTTP狀態(tài)碼的相應文本responseText服務器的響應，通常為一個字符串responseXML服務器的響應，通常為一個XML10.1.2XMLHttpRequest對象的應用XMLHttpRequest對象的屬性詳細說明（1）onreadystatechange屬性。該屬性是readyState屬性值改變時的事件觸發(fā)器，通常會調用一個函數。xmlhttp.onreadystatechange=function(){//回調函數}（2）readyState屬性。readyState有五種就緒狀態(tài)。狀態(tài)值描述0請求未初始化1請求已經建立，但是還沒有發(fā)送，尚未調用send()方法2請求已發(fā)送，正在處理中，已調用send()方法3請求在處理中，響應中已有部分數據，但是服務器還沒有完成響應的生成4響應已完成。此時可以通過responseText或者responseXML獲取響應數據，開發(fā)中常用該值進行判斷表10-2
readyState的五種就緒狀態(tài)10.1.2XMLHttpRequest對象的應用XMLHttpRequest對象的屬性詳細說明（3）status屬性。status屬性代表當前HTTP請求的狀態(tài)。表10-3
status的常用狀態(tài)值狀態(tài)值描述常用狀態(tài)值1xx信息提示100：初始的請求已經接受，客戶端可以繼續(xù)發(fā)送請求的其余部分2xx成功200：一切正常3xx重定向300：針對請求，服務器根據請求者選擇一項操作，或提供操作列表供請求者選擇4xx客戶端錯誤404：無法找到指定位置的資源。5xx服務器端錯誤500：服務器內部錯誤，不能完成客戶的請求10.1.2XMLHttpRequest對象的應用XMLHttpRequest對象的屬性詳細說明（4）responseText屬性。通過該值可以獲取服務器響應的文本數據。//如果服務器響應已完成，并且就緒，那么通過responseText屬性獲取服務器響應的文本if(xmlhttp.readyState==4&&xmlhttp.status==200){
varresponseText=xmlhttp.responseText;
alert(responseText);}10.1.2XMLHttpRequest對象的應用Ajax向服務器發(fā)送請求（1）GET請求varurl="服務器資源的URL";xmlhttp.open("GET",url,true);xmlhttp.send();varurl="ajaxServlet?username=charles&password=123456";xmlhttp.open("GET",url,true);
xmlhttp.send();在上述代碼中，第一行url中“？”前面的ajaxServlet表示請求路徑，“？”后面的username和password表示請求的參數。10.1.2XMLHttpRequest對象的應用POST請求POST請求方式，需要添加請求頭，傳遞給服務器的數據作為send()方法的參數varurl="ajaxServlet";
xmlhttp.open("POST",url,true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("username=charles&password=123456");Ajax獲得服務器響應可以使用XMLHttpRequest對象的responseText或responseXML屬性獲得服務器響應數據varresponseText=xmlhttp.responseText;10.1.2XMLHttpRequest對象的應用xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4&&xmlhttp.status==200){
varresponseText=xmlhttp.responseText; }}onreadystatechange屬性指定每次狀態(tài)改變所觸發(fā)事件的事件處理函數。Ajax獲得服務器響應數據一般放在該事件處理函數中。10.1.3應用案例：模擬用戶名驗證頁面文本框輸入用戶名，使用Ajax技術模擬驗證用戶名是否存在，本示例使用POST方式提交，與GET方式不同之處已經加粗標出。<head> <title>驗證用戶名</title><script>
functioncreateXMLHttp(){
varxmlhttp;
if(window.XMLHttpRequest){//適合IE7+、Firefox、Chrome、Opera、Safari瀏覽器
xmlhttp=newXMLHttpRequest();
}elseif(window.ActiveXObject){//適合IE5、IE6瀏覽器
xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
}
returnxmlhttp;
}
應用案例：模擬用戶名驗證創(chuàng)建一個JSP頁面checkUser.jsp10.1.3應用案例：模擬用戶名驗證 functioncheckUser(){
varxmlhttp=createXMLHttp();
varusername=document.getElementById("username").value;
varurl="CheckUserServlet";//發(fā)送請求的地址
xmlhttp.open("POST",url,true);//請求方式為POST //設置請求頭
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");xmlhttp.send("username="+username+"&tmp="+Math.random());//發(fā)送數據
xmlhttp.onreadystatechange=function(){//回調函數
if(xmlhttp.readyState==4&&xmlhttp.status==200){
varresponseText=xmlhttp.responseText;//獲取服務器返回文本
if(responseText.trim()=="exists"){//trim()方法用于去掉左右空格
alert("用戶名已存在");
}else{
alert("可以注冊");
}
} }
}
</script>
10.1.3應用案例：模擬用戶名驗證</head><body>
用戶名：<inputtype="text"id="username"onblur="checkUser()"/>
</body>如果使用GET方式提交，只需將加粗部分代碼進行修改，修改后的代碼，如下所示。varurl="CheckUserServlet?username="+username+"&tmp="+Math.random();xmlhttp.open("GET",url,true);
xmlhttp.send();10.1.3應用案例：模擬用戶名驗證@WebServlet("/CheckUserServlet")publicclassCheckUserServletextendsHttpServlet{ @Override protectedvoiddoGet(HttpServletRequestreq,HttpServletResponseresp)throwsServletException,IOException{ resp.setContentType("text/html;charset=UTF-8"); PrintWriterout=resp.getWriter(); Stringusername=req.getParameter("username");//獲取客戶端瀏覽器發(fā)送的用戶名 if("charles".equals(username)){//用戶名為“charles”表示該用戶名已存在 out.println("exists"); }else{ out.println("notexists"); } out.flush(); out.close(); }
創(chuàng)建Serlvet10.1.3應用案例：模擬用戶名驗證瀏覽器地址欄輸入“http://localhost:8080/ajaxjQueryPro/checkUser.jsp”，在文本框輸入“charles”時，彈出警告框顯示“用戶名已存在”，表示“Ajax技術驗證用戶名是否存在”已成功。10.1.4應用案例：模擬百度搜索功能文本框輸入一座城市的名稱，然后通過Ajax技術顯示城市的描述信息。XML文件XML（ExtensibleMarkupLanguage，可擴展標記語言）是一種允許用戶對自己的標記語言進行定義的源語言。XML是一種與HTML非常相似的標記語言，常用于存儲和傳輸數據。<?xmlversion="1.0"encoding="UTF-8"standalone="no"?>
<根標簽> <子標簽>數據</子標簽> <子標簽>數據</子標簽></根標簽>10.1.4應用案例：模擬百度搜索功能應用案例實現步驟1、編寫Servlet@WebServlet("/BaiduSearchServlet")
publicclassBaiduSearchServletextendsHttpServlet{
@Override
protectedvoiddoGet(HttpServletRequestreq,HttpServletResponseresp)throwsServletException,IOException{//獲取城市名稱
Stringkeywords=req.getParameter("keywords");
//構建城市數據
List<City>cities=newArrayList<City>();
cities.add(newCity(1,"湖南長沙","國務院批復確定的長江中游地區(qū)重要的中心城市、長株潭都市圈成員城市"));cities.add(newCity(2,"湖南岳陽","位于湖南省東北部，北枕長江，南納三湘四水，懷抱洞庭，江湖交匯"));cities.add(newCity(3,"廣東深圳","國務院批復確定的經濟特區(qū)、全國性經濟中心城市和國家創(chuàng)新型城市"));cities.add(newCity(4,"浙江寧波","國家歷史文化名城，距今4200年的夏朝堇子國，被認為是寧波作為“邑城”的最早起源"));//將城市數據拼接成XML格式
StringBuffersb=newStringBuffer();
10.1.4應用案例：模擬百度搜索功能sb.append("<cities>");
for(Citycity:cities){
Stringname=city.getName(); //模糊匹配（關鍵字非空，并且是一座城市名稱的一部分內容）
if(keywords!=""&&name.contains(keywords)){
Stringdescribe=city.getDescribe();
sb.append("<city>");
sb.append("<name>"+name+"</name>");
sb.append("<describe>"+describe+"</describe>");
sb.append("</city>");
}
}
sb.append("</cities>");
resp.setContentType("text/xml;charset=utf-8");//設置響應格式為text/xml
PrintWriterout=resp.getWriter();
out.print(sb.toString());
out.flush();
out.close();
}
}10.1.4應用案例：模擬百度搜索功能<script>//省略createXMLHttp()函數functionsearch(element){ xmlhttp=createXMLHttp(); varkeywords=element.value;//獲取輸入的關鍵字 varurl="BaiduSearchServlet?keywords="+keywords+"&tmp="+Math.random(); xmlhttp.open("GET",url,true); xmlhttp.send(); xmlhttp.onreadystatechange=callback; } //回調函數 functioncallback(){ if(xmlhttp.readyState==4&& xmlhttp.status==200){ varxml=xmlhttp.responseXML; //獲取服務器響應的XML文件中的city標簽 varcities=xml.getElementsByTagName("city");
2、編寫網頁10.1.4應用案例：模擬百度搜索功能
//獲取頁面中ul標簽，用來顯示城市名稱和城市描述信息 varul=document.getElementsByTagName("ul")[0]; varlen=ul.childNodes.length;
//刪除ul下所有的li標簽 for(vari=0;i<len;i++){ varli=ul.childNodes[0]; li.parentNode.removeChild(li);//移除li標簽 } //向ul中添加li標簽 for(vari=0;i<cities.length;i++){ varcname=cities[i].childNodes[0].firstChild.nodeValue; varcdescribe=cities[i].childNodes[1].firstChild.nodeValue; varli=document.createElement("li");//創(chuàng)建li標簽 li.innerHTML=cname+":"+cdescribe; ul.appendChild(li);//ul標簽中追加li標簽 } } }</script>10.1.4應用案例：模擬百度搜索功能 <body> <divid="container"> <imgsrc="img/baidu.png"class="img"><br/> <inputtype="text"id="keywords"class="keywords"onkeyup="search(this)"/> <ul></ul> </div> </body>啟動服務器圖
10-4
模擬百度搜索10.2jQuery技術10.2.1jQuery簡介10.2.2jQuery選擇器10.2.3jQuery事件10.2.4jQuery常用方法10.2.5使用jQuery實現Ajax請求10.2.1jQuery簡介jQuery是一個快速、簡潔的JavaScript框架。它于2006年1月由JohnResig(約翰·萊西格)發(fā)布，設計的宗旨是“WriteLess,DoMore”，即倡導寫更少的代碼，做更多的事情。jQuery封裝了JavaScript常用的功能代碼，提供了一種簡便的JavaScript設計模式，優(yōu)化了HTML文檔操作、事件處理、動畫設計和Ajax交互。jQuery核心特性包括獨特的鏈式語法和短小清晰的多功能接口，高效靈活的CSS選擇器，以及可對CSS選擇器進行擴展。jQuery還擁有便捷的插件擴展機制和豐富的插件。jQuery簡化JavaScript和Ajax編程，能夠使開發(fā)人員從設計和書寫繁雜的JavaScript應用中解脫出來。10.2.2jQuery選擇器jQuery選擇器是jQuery的核心功能之一，通過選擇器使我們更方便地獲取頁面中的元素。jQuery選取HTML元素$(selector).action()jQuery核心函數$()$(selector,[context])查找所有l(wèi)i標簽，而且這些li標簽是div的子標簽$(“div>li”);10.2.2jQuery選擇器基本選擇器表
10-4基本選擇器的名稱、描述、返回值和示例選擇器名稱描述返回值示例#idID選擇器根據給定的ID匹配一個元素單個元素$(“#my”)選取id為my的元素.class類選擇器根據給定的類名匹配元素元素集合$(“.my”)選取class為my的所有元素element標簽選擇器根據給定的標簽匹配元素元素集合$(“p”)選取所有的p元素*全局選擇器匹配所有元素元素集合$(“*”)選擇所有元素selector1,...selectorN并集選擇器將每一個選擇器匹配到的元素合并后一起返回元素集合$(“div,p,.my”)選取所有div、p標簽、class為my的一組元素element.classelement#id交集選擇器匹配指定class或id的元素或元素集合單個元素或元素集合$(“div#container”)選取id為container的div元素10.2.2jQuery選擇器層次選擇器表
10-5層次選擇器的名稱、描述、返回值和示例選擇器名稱描述返回值示例$(“ancestordescendant”)后代選擇器選取給定祖先元素下匹配所有的后代元素元素集合$(“divp”)選取div元素里所有的p元素$(“parent>child”)子選擇器選取給定的父元素下匹配所有的子元素元素集合$(“div>p”)選取div元素下元素名為p的子元素$(“prev+next”)相鄰選擇器選取緊接在prev元素后的next元素元素集合$(“div+p”)選取div元素的下一個p元素$(“prev~siblings”)同輩選擇器選取prev元素后的所有同輩元素元素集合$(“div~p”)選取div元素之后的所有同輩p元素10.2.2jQuery選擇器屬性選擇器表
10-6屬性選擇器的描述、返回值和示例選擇器描述返回值示例[attribute]選取擁有此屬性的元素元素集合$(“div[id]”)選取擁有屬性id的div元素[attribute=value]選取屬性值為value的元素元素集合$(“div[id=’container’]”)選取id為container的div元素[attribute!=value]選取屬性值不等于value的元素元素集合$(“div[id!=’container’]”)選取id不等于container的div元素[attribute^=value]選取屬性值以value開始的元素元素集合$(“div[id^=’hi’]”)選取id以“hi”開始的div元素[attribute$=value]選取屬性值以value結束的元素元素集合$(“div[id$=’hi’]”)選取id以“hi”結束的div元素10.2.2jQuery選擇器過濾選擇器表
10-7基本過濾選擇器的描述、返回值和示例選擇器描述返回值示例:first選取第一個元素單個元素$(“l(fā)i:first”)選取所有l(wèi)i元素中第一個:last選取最后一個元素單個元素$(“l(fā)i:last”)選取所有l(wèi)i元素中最后一個:even選取索引是偶數的所有元素，索引從0開始元素集合$(“l(fā)i:even”)選取索引是偶數的li元素:odd選取索引是奇數的所有元素，索引從0開始元素集合$(“l(fā)i:odd”)選取索引是奇數的li元素:eq(index)選取指定索引值的元素單個元素$(“l(fā)i:eq(1)”)選取索引為1的li元素:gt(index)選取所有大于指定索引值的元素元素集合$(“l(fā)i:gt(1)”)選取索引大于1的li元素:lt(index)選取所有小于指定索引值的元素元素集合$(“l(fā)i:lt(1)”)選取索引小于1的li元素（1）基本過濾選擇器10.2.2jQuery選擇器表
10-8內容過濾選擇器的描述、返回值和示例（2）內容過濾選擇器選擇器描述返回值示例:contains(text)選取所有文本內容為text的元素元素集合$(“div:contains(‘中國’)”)選取含有文本“中國”的div元素:empty選取不包含子元素或文本的空元素元素集合$(“div:empty”)選取不包含任何元素和內容的div元素:has(selector)選取含有選擇器所匹配的元素的元素元素集合$(“div:has(p)”)選取含有p元素的div元素:parent選取含有子元素或文本的元素元素集合$(“div:parent”)選取擁有子元素或文本的div元素10.2.2jQuery選擇器表
10-9可見性過濾選擇器的描述、返回值和示例（3）可見性過濾選擇器選擇器描述返回值示例:hidden選取所有不可見的元素元素集合$(“:hidden”)選取所有不可見的元素，例如，<inputtype=”hidden”>、<spanstyle=”display:none”>、<divstyle=”visibility:hidden”/>等元素:visible選取所有可見的元素元素集合$(“#myidspan:visible”)選取id為myid的標簽內所有可見的span標簽10.2.2jQuery選擇器表
10-10子元素過濾選擇器的描述、返回值和示例（4）子元素過濾選擇器選擇器描述返回值示例:first-child選取每一個父元素的第一個子元素元素集合$(“ulli:first-child”)選取每一個ul中第一個li元素:last-child選取每一個父元素的最后一個子元素元素集合$(“ulli:last-child”)選取每一個ul中最后一個li元素:only-child選取一個元素，這個元素的父元素只有唯一的子元素（這個子元素就是選取的元素）元素集合$(“ulli:only-child”)選取每一個ul中只有唯一一個li元素:nth-child(index/odd/even)選取每個父元素下的第index個子元素/奇/偶元素，下標從1開始元素集合$(“ulli:nth(2)”)選取每一個ul中下標為2的li元素10.2.2jQuery選擇器表
10-11表單過濾選擇器的描述和返回值（5）表單過濾選擇器選擇器描述返回值:input選取所有的<input>、<select>、<textarea>和<button>元素集合:text選取所有的文本框元素集合:password選取所有的密碼框元素集合:checkbox選取所有的多選框元素集合:radio選取所有的單選框元素集合:submit選取所有的提交按鈕元素集合:reset選取所有的重置按鈕元素集合:button選取所有的按鈕元素集合10.2.2jQuery選擇器表
10-12表單對象屬性過濾選擇器的描述和返回值（6）表單對象屬性過濾選擇器選擇器描述返回值:enabled選取所有屬性為可用的表單元素元素集合:disabled選取所有屬性為不可用的表單元素元素集合:checked選取所有被選中的表單元素元素集合:selected選取所有被選中的option表單元素元素集合10.2.3jQuery事件jQuery事件是對JavaScript事件的封裝$(document).ready(function(){
//頁面加載完成后執(zhí)行的代碼
$("p.china").css("color","red");//類名為china的p標簽設置字體顏色為紅色
})jQuery事件方法（1）鼠標事件表
10-13鼠標常用事件的描述和執(zhí)行時機方法描述執(zhí)行時機click(fn)觸發(fā)或將函數綁定到指定元素的click事件單擊鼠標時dblclick(fn)觸發(fā)或將函數綁定到指定元素的dblclick事件雙擊鼠標時mouseover(fn）觸發(fā)或將函數綁定到指定元素的mouseover事件鼠標移過時mouseout(fn）觸發(fā)或將函數綁定到指定元素的mouseout事件鼠標移出時10.2.3jQuery事件（2）鍵盤事件
表
10-14鍵盤常用事件的描述和執(zhí)行時機方法描述執(zhí)行時機keypress(fn)觸發(fā)或將函數綁定到指定元素的keypress事件產生可打印字符時keydown(fn)觸發(fā)或將函數綁定到指定元素的keydown事件按下鍵盤時keyup(fn)觸發(fā)或將函數綁定到指定元素的keyup事件釋放按鍵時（3）表單事件表
10-15表單常用事件的描述和執(zhí)行時機方法描述執(zhí)行時機focus(fn)觸發(fā)或將函數綁定到指定元素的focus事件獲得焦點blur(fn)觸發(fā)或將函數綁定到指定元素的blur事件失去焦點submit(fn)觸發(fā)或將函數綁定到指定元素的submit事件提交表單時10.2.3jQuery事件2、jQuery事件的綁定$(selector).on(events,[selector],fn)events：一個或者多個用空格分隔的事件類型，例如，“click”、“blur”。selector：元素的子元素選擇器，可以省略。fn：回調函數。10.2.3jQuery事件應用案例：div標簽樣式完成本案例，div標簽需要綁定mouseover、mouseout事件10.2.3jQuery事件<title>mouseover、mouseout事件的使用</title>
<styletype="text/css">
.current{
color:red;
}
</style>
<scripttype="text/javascript"src="js/jQuery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("div").on({
mouseover:function(){
$(this).addClass("current");
},
mouseout:function(){
$(this).removeClass("current");
}
})
})
</script>addClass()方法的作用是向被選中元素添加一個或多個類。該方法不會移除已存在的class屬性removeClass()方法的作用是移除class屬性10.2.3jQuery事件<title>優(yōu)化mouseover、mouseout事件</title> <styletype="text/css"> .current{ color:red; }</style><scripttype="text/javascript"src="js/jQuery-3.7.1.min.js"></script><script>
$(document).ready(function(){
$("div").on("mouseovermouseout",function(){
$(this).toggleClass("current");
})
})</script>優(yōu)化代碼10.2.4jQuery常用方法表
10-16jQuery常用方法方法描述html()獲取或設置元素內容（包括HTML標記），等價于JavaScript中的innerHTML屬性text()獲取或設置元素文本內容，等價于JavaScript的innerText屬性val()獲取或設置表單元素的值，等價于JavaScript的value屬性attr()獲取或設置標簽的屬性值hide()隱藏元素removeAttr()移除標簽的屬性prop()針對selected、checked、disabled等表單元素的屬性，直接操作的就是布爾值；語法：$(selector).prop(‘屬性名’,值)，例如，$("p.china").prop("style","text-decoration:underline")css()用于獲取和設置CSS屬性值，設置CSS的語法：$(selector).css(name,value)10.2.5使用jQuery實現Ajax請求jQuery提供了$.ajax()、$.get()、$.post()等方法實現Ajax請求。Ajax的dataType選項設置預期服務器返回的數據類型，如果不指定，jQuery自動根據HTTP包中的MIME信息返回responseXML或responseText，并作為回調函數參數傳遞表
10-17dataType選項的值選項的值描述json服務器返回JSON數據，例如，{"username":"charles","gender":"男","age":18}xml服務器返回XML文檔html返回純文本HTML信息text返回純文本字符串script返回純文本JavaScript代碼。不會自動緩存結果，除非設置了“cache”參數jsonp返回JSONP格式10.2.5使用jQuery實現Ajax請求jQuery實現Ajax請求：實現用戶名的驗證jQuery的安裝圖
10-5
jQuery下載頁面10.2.5使用jQuery實現Ajax請求jQuery的安裝
頁面引入jQuery<scripttype="text/javascript"src="js/jQuery-3.7.1.min.js"></script>10.2.5使用jQuery實現Ajax請求<script>
$(document).ready(function(){//加載事件
$("#username").blur(function(){//文本框失去焦點時觸發(fā)的函數
varusername=document.getElementById("username").value;//獲取用戶名
$.ajax({url:"CheckUserServlet",//發(fā)送請求的地址
type:"POST",//請求方式，默認為GET
data:{"username":username},//發(fā)送給服務器的數據
dataType:'text',//如果不設置datType，則默認當成字符串處理。jQuery實現Ajax請求10.2.5使用jQuery實現Ajax請求//請求成功后調用的回調函數，參數data為服務器返回的數據
success:function(data){ alert(data);},//請求失敗后調用的函數
error:function(){ alert("無法連接到服務器或者處理錯誤");} }) })})
</script>
用戶名：<inputtype="text"id="username"onblur="checkUser()"/>10.2.5使用jQuery實現Ajax請求jQuery的get()方法的使用$("#username").blur(function(){
varusername=document.getElementById("username").value;
$.get("CheckUserServlet",{"username":username},function(data){//使用GET方式發(fā)送請求
alert(data);
},"text");
})10.3JSON技術10.3.1JSON簡介10.3.2JSON基礎語法和常用方法10.3.3應用案例：使用jQueryAjax獲取JSON數據10.3.1JSON簡介JSON（JavaScriptObjectNotation,JS對象標記法）是一種輕量級的數據交換格式。它基于ECMAScript（EuropeanComputerManufacturersAssociation,歐洲計算機協會制定的js規(guī)范）的一個子集，采用完全獨立于編程語言的文本格式來存儲和表示數據。JSON是通過JavaScript對象標記法書寫的文本，是Ajax發(fā)送和接收數據的一種格式。10.3.2JSON基礎語法和常用方法JSON語法var變量名=‘{“key1”:value1,“key2”:value2}’;對象形式JSON示例varuser={"id":1,"name":"Charles","gender":"male","age":30}10.3.2JSON基礎語法和常用方法數組形式JSON示例varusers=[ { "id":1,"name":"Charles","gender":"male","age":30},{"id":2,"name":"Jack","gender":"male","age":20}
];10.3.2JSON基礎語法和常用方法JSON語法規(guī)則如下：（1）數組使用方括號“[]”表示，每個數組由多個值組成，值之間用“，”號分隔，數組可以包含多個對象或者其他數組。（2）對象使用大括號“{}”表示，每個對象由多個鍵值對組成，鍵值對之間用“，”分隔，對象之間也是用“，”號分隔。（3）JSON數據是由鍵值對組成的。每個鍵值對包含一個鍵和一個值，鍵和值之間使用冒號“：”隔開。（4）名稱使用雙引號，值支持字符串（雙引號中）、數值（整數或浮點數）、布爾值（true或false）、對象（花括號中）、數組（方括號中）和null六種數據類型。（5）并列的數據之間使用逗號“，”分隔。（6）使用“\”轉義字符。10.3.2JSON基礎語法和常用方法JSON常用方法JS對象轉為JSON字符串varjsonStr=JSON.stringify(user);JSON字符串轉為JS對象varjsObject=JSON.parse(jsonStr);10.3.3應用案例：使用jQueryAjax獲取JSON數據具體步驟（1）導入gson-2.10.1.jar包。Java轉化為JSON字符串示例Gsongson=newGson();
out.println(gson.toJson(對象));//將對象轉化為JSON字符串，并響應到客戶端10.3.3應用案例：使用jQueryAjax獲取JSON數據（2）在“WEB-INF/config”目錄下創(chuàng)建student.xml文件<?xmlversion="1.0"encoding="UTF-8"standalone="no"?>
<students>
<studentid="1">
<name>kitty</name>
<email>kitty@</email>
</student>
<studentid="2">
<name>ross</name>
<email>ross@126.com</email>
</student>
<studentid="3">
<name>jack</name>
<email>jack@126.com</email>
</student>
</students>10.3.3應用案例：使用jQueryAjax獲取JSON數據（3）在包“com.swxy.pojo”下創(chuàng)建實體類StudentpublicclassStudent{ privateintsid; privateStringname; privateStringemail; publicStudent(){} publicStudent(intsid,Stringname,Stringemail){ super(); this.sid=sid; =name; this.email=email; }//省略get和set方法}10.3.3應用案例：使用jQueryAjax獲取JSON數據（4）在包“com.swxy.dao”下創(chuàng)建XMLDao，用于讀取XML文件publicXMLDao(Stringpath){
this.path=path;
}
privateStringpath;//XML文件的目錄
10.3.3應用案例：使用jQueryAjax獲取JSON數據//查詢所有學生
publicList<Student>query()throwsParserConfigurationException,SAXException,IOException{
List<Student>stus=newArrayList<Student>();
Documentdoc=this.readXML();
NodeListnodes=doc.getElementsByTagName("student");//獲取所有student節(jié)點
for(inti=0;i<nodes.getLength();i++){//遍歷所有student節(jié)點
Elementele=(Element)nodes.item(i);//獲取學生節(jié)點
Stringid=ele.getAttribute("id");//獲取學號
ElementnameEle=(Element)ele.getElementsByTagName("name").item(0);
ElementemailEle=(Element)ele.getElementsByTagName("email").item(0);
Stringname=nameEle.getTextContent();//獲取姓名
Stringemail=emailEle.getTextContent();//獲取email
Studentstudent=newStudent(Integer.parseInt(id),name,email);//構建學生對象
stus.add(student);//學生對象添加到集合中
}
returnstus;
}
10.3.3應用案例：使用jQueryAjax獲取JSON數據//讀取xml文件
publicDocumentreadXML()throw
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
- 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
- 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
- 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 供熱供氣工程履約擔保格式
- 2025版?zhèn)湄浶袠I(yè)質量認證合同范本3篇
- 展覽館弱電系統(tǒng)改造合同模板
- 醫(yī)療服務票據管理策略與流程
- 2025年度綠色辦公用品采購及回收利用合同3篇
- 紡織服裝電力供應協議準則
- 城市濱水區(qū)改造房屋拆除工程協議
- 2025版電梯設備安裝與維護合同范本3篇
- 船只租賃合同：水上建筑維修
- 2025版商用空調定期檢查、保養(yǎng)與故障處理合同3篇
- 抖音快手短視頻創(chuàng)業(yè)項目融資商業(yè)策劃書
- 《新媒體導論》（第二版）-課件 第5、6章 新媒體的社交化：社會化媒體的發(fā)展及其應用、新媒體的移動化：新時空下的新傳播
- 橋梁檢修通道施工方案
- 英文寫作課件：段落的寫作
- 軟件設計說明書通用模板
- 產業(yè)園運營合作協議
- 酒店治安安全培訓
- 16J607-建筑節(jié)能門窗
- 我的家鄉(xiāng)-東營
- 理解詞語句子的方法PPT
- 作文開頭與結尾PPT課件ppt(共42張PPT)
評論
0/150
提交評論