使用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、總結：
 |
 |