使用JSP/Servlet技術開發—— 第十一章 Ajax互動擴充套件
1、 jQuery實現Ajax的方法:
●除了$.ajax()方法以外,jQuery還提供了其他多種更簡單的 Ajax 實現方法,如$.get()、$.post()、$.getJSON()、物件.load()等方法; |
|||||||||||||||
●$.get()方法:是 jQuery 封裝的傳送 HTTP GET 請求從伺服器載入資料的Ajax方法; 語法:$.get( url [, data] [, success] [, dataType] ); ◆$.get()方法常用引數:
|
|||||||||||||||
●$.post()方法:是 jQuery 封裝的傳送 HTTP POST請求從伺服器載入資料的Ajax方法; 語法:$.post( url [, data] [, success] [, dataType] ); ◆$.post()方法常用的引數:
|
|||||||||||||||
●$.getJSON()方法:由於使用Ajax技術實現非同步請求時,經常採用JSON資料格式作為相遇內容的載體,為了簡化此種情況下的方法呼叫,jQuery提供了此方法; 語法:$.getJSON( url [, data] [, success] ); ◆$.getJSON()方法常用的引數:
◆注意:$.getJSON()方法只能以GET方式傳送請求; |
|||||||||||||||
●.load()方法:方對於通過 Ajax 請求直接載入 HTML 內容當前頁面的使用場景,jQuery 也提供了 一個 . load()方法作為簡易實現。該方法通過傳送 Ajax 請求從 伺服器載入資料並把晌應的資料新增到指定元素中。 語法:$( selector ).load( url [, data] [, complete] ); ◆.load()方法常用的引數:
◆該方法預設使用 GET 方法傳送請求,除非提供的 data 引數是一個物件 , 則使用 POST 方法傳送; ◆該方法是最簡單的從伺服器獲取資料的 Ajax 方法 , 它幾乎與$ .get(url,data,success)方法等價;不同的是它不是全域性函式,而是針對與選擇器匹配的元素執行,並且它擁有匿名的回撥函式,當求成功後,該方法自動將返回的資料設定為匹配元素的 HTML 內容 |
|||||||||||||||
●.load ()方法還可以僅載入遠端文件的某個部分,通過 url 引數的特殊語法可以實現。url引數中可以通過空格連線決定載入內容的 jQuery 選擇器, 如以下程式碼: $ ("#result" ) . load (“article.html #starlet"); jQuery 將會取回 article.html的內容,然後解析返回的文件,查詢 id 為 target 的元素。該素連同其內容會被插入:id 為 result 的元素,所取回文件的其他部分則被丟棄; |
|||||||||||||||
●注:$.get()、$.post()、$.getJSON()、物件.load()等常用 Ajax 方法都是基於$.ajax ()方法封裝的,相比於$.ajax ()方法更加簡潔、方便。通常情況下,對於一般的Ajax 功能需求使用以上 Ajax 方法即可滿足(),如果需要更多的靈活性,可以使用$.ajax ()方法指定多引數; |
|||||||||||||||
●基於表單資料的Ajax請求: ▲jQuery的.serializeArray()方法會從一組表單元素中檢測有效控制元件,將其序列化成由 name 和 value()兩個屬性構成的 JSON 物件的陣列。 ◆其中有效控制元件的規則如下(檢測一組表單元素中的有效控制元件): ★沒有被禁用 ★必須有name屬性 ★選中的checkbox或radio才是有效的 ★只有觸發提交事件的submit按鈕才是有效的 ★file元素不會被序列化 |
|||||||||||||||
●$.param(): ◆jQuery還提供了一種更簡便的方式來實現將表單序列化成請求字串的功能,即對錶元素呼叫.serialize ()方法:$commentlnputs.serialize()方法,實際上,.serialize()方法內部就是使用 $.param()對.serializeArray()做了一個簡單包裝。對於不需要中間環節的情景,可以更簡便地完成表單資料的序列化; ◆將由. serializeArray()生成的物件陣列序列化成請求字串的形式: 語法:
|
2、使用 FastJSON生成 JSON 字串:
●FastJSON簡介:FastJSON是一個性能很好的、由Java實現的JSON解析器和生成器,來自阿里巴巴,其程式碼託管在 GitHub 伺服器上,在https://github.com/alibaba/fastjson/releases頁面可以找到不同版本jar檔案和原始碼下載路徑;FastJSON提供了把 Java 物件序列化成 JSON 字串,以及將 JSON 字串反序列化得到 Java物件的功能;
|
||||||||||||||||||||||||||||
●使用FastJSON API:FastJSON API的入口類是com.alibaba.fastjson.JSON,基本上常用的操作都可以通過該類的靜態方法直接完成。 ◆用於將 Java 物件序列化成 JSON 字串的常用方法如下:
◆列舉型別 SerializerFeature 定義了多種序列化屬性: ★常用屬性如下:
★eg:序列化時要包含包含值為 null 的欄位,數值為 null 輸出0,String 為 null 輸出“” String strJSON = JSON.toJSONString ( javaObject, SerializerFeature.WriteMapNullValue,SerializerFeature.WriteNullNumberAsZero, SerializerFeature.WriteNullStringAsEmpty ); |
3、 jQuery 讓渡$操作符:
●在 jQuery 中,"$“ 符號有著重要的作用;除了 iQuery , 還有其他一些 JavaScript 指令碼庫也使用'$' 符號,當專案開發中因為某些原因同時使用了 jQuery 和另一個同樣使用’ $' 符號的指令碼庫,就會產生衝突。 eg:下面程式碼Prototype的 $ 會覆蓋jQuery的 $ <script type="text/javascript" src="../js/jquery-1.12.4.min.js" /> <script type="text/javascript" src="../js/prototype.js" /> eg:下面的 jQuery的 $ 會覆蓋Prototype的 $ <script type="text/javascript" src="../js/prototype.js" /> <script type="text/javascript" src="../js/jquery-1.12.4.min.js" /> |
●為了使jQuery能夠與其他同樣使用”$”符號的指令碼庫共同工作, jQuery定義了jQuery.noConflict()方法,放棄對$的使用權,並可以通過返回值指定一個替代符號,以免與其他指令碼庫衝突; eg:jQuery.noConflict(); // 讓渡$使用權,後續jQuery程式碼使用jQuery代替$ jQuery( document ).ready( … ); 或者重新指定一個替代符號: var $j = jQuery.noConflict(); // 讓渡$使用權,並指定用 $j 代替$ $j( document ).ready( … ); ◆但是論採用哪種方式,都會改變 jQuery 的編碼風格,不僅更加煩瑣,而且對於已有 jQuery程式碼的重用也會產生不利影響; eg:建議使用如下程式碼:
|
4、總結: