JSP／Servlet開發——第十一章 Ajax交互擴展

一、 jQuery實現Ajax的方法：

●除了$.ajax()方法之外，jQuery還提供了其餘多種更簡單的 Ajax 實現方法，如$.get()、$.post()、$.getJSON()、對象.load()等方法；

●$.get()方法：是 jQuery 封裝的發送 HTTP GET 請求從服務器加載數據的Ajax方法；   　　語法：$.get( url [, data] [, success] [, dataType] );      　　◆$.get()方法經常使用參數： 參  數 類  型 說      明 url String 必選，規定將請求到哪一個URL，(發送請求的地址) data PlainObject 或 String 可選，規定連同請求發送到服務器的數據 success Function( PlainObject Date，String textStatus, jqXHR  jqxhr ) 可選，請求成功後調用的函數； 參數Date：可選，服務器返回的結果數據； 參數textStatus：可選，描述請求狀態的字符串； 參數jqxhr：可選，jqxhr是XMLHttpResult的超集； 若是指定了dataType，則必須提供此參數。若是沒有事情須要處理，可使用null或jQuery()空方法做佔位符； dataType String 可選，預期服務器返回的數據類型，可用類型包括：XML、HTML、Script、JSON、JSONP、Text；

●$.post()方法：是 jQuery 封裝的發送 HTTP POST請求從服務器加載數據的Ajax方法； 　　語法：$.post( url [, data] [, success] [, dataType] );   　　　　◆$.post()方法經常使用的參數： 參  數 類  型 說      明 url String 必選，規定將請求到哪一個URL，(發送請求的地址) data PlainObject 或 String 可選，規定連同請求發送到服務器的數據 success Function(PlainObject Date，String textStatus, jqXHR  jqxhr) 可選，請求成功後調用的函數； 參數Date：可選，服務器返回的結果數據； 參數textStatus：可選，描述請求狀態的字符串； 參數jqxhr：可選，jqxhr是XMLHttpResult的超集； 若是指定了dataType，則必須提供此參數。可是可使用null方法做佔位符 dataType String 預期服務器返回的數據類型，包括：XML、HTML、Script、JSON、JSONP、Text

●$.getJSON()方法：因爲使用Ajax技術實現異步請求時，常常採用JSON數據格式做爲相遇內容的載體，爲了簡化此種狀況下的方法調用，jQuery提供了此方法；      語法：$.getJSON( url [, data] [, success] );        ◆$.getJSON()方法經常使用的參數： 參  數 類  型 說      明 url String 必選，規定將請求到哪一個URL，(發送請求的地址) data PlainObject 或 String 可選，規定連同請求發送到服務器的數據 success Function( PlainObject  data, String  textStatus, jqXHR  jqxhr ) 可選，請求成功後調用的函數； 參數Date：可選，服務器返回的結果數據； 參數textStatus：可選，描述請求狀態的字符串； 參數jqxhr：可選，jqxhr是XMLHttpResult的超集；  　　　　  ◆注意：$.getJSON()方法只能以GET方式發送請求；

●.load()方法：方對於經過 Ajax 請求直接加載 HTML 內容當前頁面的使用場景，jQuery 也提供了 一個 . load()方法做爲簡易實現。該方法經過發送 Ajax 請求從 　　服務器加載數據並把晌應的數據添加到指定元素中。  　　　　 語法：$( selector ).load( url [, data] [, complete] );    　　　　  ◆.load()方法經常使用的參數： 參  數 類  型 說      明 url String 必選，規定將請求到哪一個URL，(發送請求的地址) data PlainObject 或 String 可選，規定連同請求發送到服務器的數據 complete Function(String  responseText, String  textStatus, jqXHR  jqxhr ) 可選，對每一個匹配的元素設置完內容後都會觸發該函數； 參數responseText：可選，服務器返回的結果數據； 參數textStatus：可選，描述請求狀態的字符串； 參數jqxhr：可選，jqxhr是XMLHttpResult的超集； 　　◆該方法默認使用 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()生成的對象數組序列化成請求字符串的形式：    　　語法：

二、使用 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 字符串的經常使用方法以下： 方      法 說      明 public static String toJSONString ( Object object ) 將Java對象序列化成JSON字符串 public static String toJSONString (Object object, boolean prettyFormat ) prettyFormat爲true時生成帶格式的JSON字符串;  prettyFormat爲false，則與toJSONString (Object object)相同； public static String toJSONString ( Object object, SerializerFeature… features ) 能夠經過參數features指定更多序列化規則； public static String toJSONStringWithDateFormat (Object object, String dateFormat, SerializerFeature… features ) 能夠經過參數dateFormat指定日期類型的輸出格式；    ◆枚舉類型 SerializerFeature 定義了多種序列化屬性：      　　★經常使用屬性以下：     枚 舉 值 說      明 QuoteFieldNames 輸出 JSON 的字段名時加雙引號，默認即便用 WriteMapNullValue 輸出值爲null的字段，默認不輸出 WriteNullListAsEmpty 將值爲null的List字段輸出爲[ ] WriteNullStringAsEmpty 將值爲null的String字段輸出爲「」 WriteNullNumberAsZero 將值爲null的數值字段輸出爲0 WriteNullBooleanAsFalse 將值爲null的Boolean字段輸出爲false SkipTransientField 忽略transient字段，默認即忽略 PrettyFormat 格式化JSON字符串，默認不格式化      ★eg：序列化時要包含包含值爲 null 的字段，數值爲 null  輸出0，String 爲 null 輸出「」           String  strJSON = JSON.toJSONString ( javaObject, SerializerFeature.WriteMapNullValue,SerializerFeature.WriteNullNumberAsZero, SerializerFeature.WriteNullStringAsEmpty );

三、 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：建議使用以下代碼：

四、總結：