Ajax在jQuery中的應用/jQuery實用工具函數start1.AjaxAjax是AsynchronousJavaScriptandXML的縮寫，其核心是通過XMLHttpRequest對象，以一種異步的方式，向服務器發送數據請求，并通過該對象接收請求返回的數據，從而完成人機交互的數據操作。這種利用Ajax技術進行的數據交互并不局限于Web動態頁面，在普通的靜態HTML頁面中同樣可以實現，因此，在這種背景下，Ajax技術在頁面開發中得以廣泛使用。2.loadload實現異步數據的功能語法：load(url,[data],[callback])例:$("#divtip").load("b.html");在load方法中，參數url還可以用于過濾頁面中的某類別的元素，如$("#divtip").load("b.html.divc");，則表示獲取頁面b.html中類別為“divc”的全部元素3.1.jquery中的全局函數-getJSON()雖然使用load()方法可以很快地加載數據到頁面中，但有時需要對獲取的數據進行處理，如果將用load()方法獲取的內容進行遍歷，也可以進行數據的處理，但這樣獲取的內容必須先插入頁面中，然后才能進行，因此，執行的效率不高。為了解決這個問題，我們采用將要獲取的數據另存為一種輕量極的數據交互格式，即JSON文件格式，由于這種格式很方便計算機的讀取，因而頗受開發者的青昧．在jQuery中，專門有一個全局函數getJSON()，用于調用JSON格式的數據，其調用的語法格式為：$.getJSON(url,[data],[callback])可選項[data]參數表示發送到服務器的數據，其格式為key/value另外一個可選項[callback]參數表示加載成功時執行的回調函數。下面舉例說明。3.2.jquery中的全局函數-getScript()$.getScript(url,[callback])通過此全局函數獲取js文件 $(function(){ $("#button1").click(function(){ $.getScript("xxx.js");//打開以獲取返回的數據的文件 }); })3.3.jquery中的全局函數-get()在上幾個小節中，我們通過jQuery中的各種全局函數，實現了不同格式數據的異步加載，如HTML、JSON、JS格式數據。在日常的開發中，有時也會遇到使用XML文檔保存數據的情況，對于這種格式的數據，jQuery中使用全局函數$.get()進行訪問，語法：$.get(url,[data],[callback],[type])

$.get("json.xml",function(data){ $("#p1").empty(); varhtml=""; $(data).find("user").each(function(){//遍歷獲取的數據 var$strUser=$(this); html+="姓名:"+$strUser.find("name").text()+"<br>" +"性別:"+$strUser.find("sex").text()+"<br>" +"郵箱:"+$strUser.find("email").text()+"<br>"; }); $("#p1").html(html);//顯示處理后的數據 });3.4.jquery中的全局函數-post()$.post也是帶參數向服務器發出數據請求。全局函數$.post與$.get()在本質上沒有太大的區別，所不同的是，get方式不適合傳遞數據量較大的數據，同時，其請求的歷史信息會保存在瀏覽器的緩存中，有一定的安全風險。而post方式向服務器發送數據請求，就不存在這兩個方面的不足。$.post(url,[data],[callback],[type])(url,[callback])通過此全局函數獲取js文件 $(function(){ $("#button1").click(function(){ $.getScript("xxx.js");//打開以獲取返回的數據的文件 }); })4.$.ajax()方法語法：$.ajax([options])可選項參數[options]為$.ajax方法中的請求設置，其格式為key/value，既包含發送請求的參數，也含有服務器響應后回調的數據。其全部名稱如表4.$.ajax()方法語法：$.ajax([options])可選項參數[options]為$.ajax方法中的請求設置，其格式為key/value，既包含發送請求的參數，也含有服務器響應后回調的數據。其全部名稱如表5.$.ajaxSetup()方法在使用$.ajax()方法時，有時需要調用多個$.ajax()方法，如果每個方法都設置其中的請求細節，將是一件十分麻煩的事。為了簡化這種工作，在jQuery中，可以使用$.ajaxSetup()方法設置全局性的Ajax默認選項，一次設置，全局有效，這樣大大簡化了$.ajax()方法中的細節編寫，格式:$.ajaxSetup([options])；$(function(){$.ajaxSetup({ type:"GET", url:"json.xml", dataType:"xml"});});

6.ajaxStart和ajaxStop全局事件在jquery中，使用ajax獲取異步數據時，ajaxStart與ajaxStop這兩個全局事件的使用頻率非常高。前者是當請求開始執行時觸發，往往用于編寫一些準備性的功能工作，如提示“正在獲取數據...”字樣；后者是當請求結束時觸發，在這一事件中，常常與前者配合，說明請求的最后進行展狀態，如將顯示中的“正在獲取數據...”字樣修改為“已成功獲取數據!”，然后漸漸消失。

$("#tip").ajaxStart(function(){ $(this).show(); });7.jQuery實用工具函數數組和對象的操作字符串操作測試操作URL操作工具函數擴展8.jQuery實用工具函數-遍歷數組$.each()遍歷，語法：$.each(obj,fn(para1,para2))參數obj表示要遍歷的數組或對象，fn為每個遍歷元素執行的回調函數，該函數包含兩個參數：para1表示數組的序號或對象的屬性；para2表示數組的元素和對象的屬性。

vararrStu={"張三":"60","李四":"70","王二":"80"}varstrC="<li>姓名：分數</li>"；$.each(arrStu,function(name,value){ strC+="<li>"+name+"："+value+"</li>"；});9.jQuery實用工具函數-數據篩選$.grep()篩選，語法：$.grep(array,function(elementOfArray,indexInArray),[invert])參數array為要篩選的原數組，回調函數fn中可以設置兩個參數,其中elementOfArray為數組中的元素，indexInArray為元素在數組中的序列號。另外，可選項[invert]為不二之，表示是否根據fn的規則取反向結果，默認為false，表示不取反。 $(function(){ varstrtmp="篩選前數據:"; vararrNum=[2,8,3,7,9,4,3,10,9,7,21];vararrGet=$.grep(arrNum,function(ele,index){ returnele>5&&index<8//元素值大于5且序號小于8});strtmp+=arrNum.join();strtmp+="<br><br>篩選后數據："+arrGet.join();$("#divTip").append(strtmp); })9.jQuery實用工具函數-數據變更$.map()，語法：$.map(array,callback(elementOfArray,indexInArray))參數array為要變更的原數組，回調函數fn中可以設置兩個參數,其中elementOfArray為數組中的元素，indexInArray為元素在數組中的序列號。 通過$.map()工具函數將數組中大于5且小于8的元素都增加3，并顯示在頁面中。 $(function(){ varstrtmp="變更前數據:"; vararrNum=[2,8,3,7,9,4,3,10,9,7,21];vararrGet=$.map(arrNum,function(ele,index){if(ele>5&&index<8){ returnele+3;}});strtmp+=arrNum.join();strtmp+="<br><br>變更后數據："+arrGet.join();$("#divTip").append(strtmp); })10.jQuery實用工具函數-數據搜索$.inArray()，語法：$.inArray(value,array)如果要在數組中搜索某個元素，可以使用工具函數$.inArray()，該方法相當于用javascript中的indexOf()函數搜索字符串中的某個字符。在工具函數$.inArray()中，如果找到了指定的某個元素，則返回元素在數組中的索引號，否則返回-1值。 通過$.map()工具函數將數組中大于5且小于8的元素都增加3，并顯示在頁面中。 $(function(){ varstrtmp="待搜索數據:"; vararrNum=[4,21,2,12,5];vararrPos=$.inArray(2,arrNum);strtmp+=arrNum.join();strtmp+="<br><br>搜索后結果："+arrPos;$("#divTip").append(strtmp); })11.字符串操作$.trim()工具函數，刪除字符串左右兩邊的空格符12.測試操作$.isPlainObject(obj)，即對象是否通過{}或newObject{}關鍵字創建，是則返回true，否返回false13.工具函數的擴展$.extend()工具函數編寫一個自定義工具函數，返回兩個數中最小值。 (function($){ $.extend({ "MinNum":function(p1,p2){ return(p1<p2)?p1:p2; } }); })(jQuery);14.jQuery常用插件validateformcookieAutoCompleteNotesForLightBoxContextMenujQZoomNivoSliderTableSortProgressBarLoadMaskPaginationActivebar2Ni