$.getScript()
有時候，在頁面初次加載時就取得所需的全部JavaScript文件是完全沒有必要的。雖然可以在需要哪個JavaScript文件時，動態地創建<script>標簽，jQuery代碼如下：
$(document.createElement("script")).attr("src","test.js").appendTo("head");或者
$("<script type='text/javascript' src='test.js' />").appendTo("head");但這種方式並不理想。為此，jQuery提供了$.getScript()方法來直接加載.js文件，與加載一個HTML片段一樣簡單方便，並且不需要對JavaScript文件進行處理，JavaScript文件會自動執行。
demo實例如下：
demo1.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> * { margin:0; padding:0;} body { font-size:12px;} .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;} .comment h6 { font-weight:700; font-size:14px;} .para { margin-top:5px; text-indent:2em;background:#DDD;} </style> <!-- 引入jQuery --> <script src="../scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $('#send').click(function() { $.getScript('test.js'); }); }) </script> </head> <body> <br/> <p> <input type="button" id="send" value="加載"/> </p> <div class="comment">已有評論：</div> <div id="resText" > </div> </body> </html>test.js代碼：
var comments = [ { "username": "張三", "content": "沙發." }, { "username": "李四", "content": "板凳." }, { "username": "王五", "content": "地板." } ]; var html = ''; $.each( comments , function(commentIndex, comment) { html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>'; }) $('#resText').html(html);當執行到demo1.html中的jQuery的時候，頁面就會加載test.js文件。
jQuery代碼如下：
$(function(){ $('#send').click(function() { $.getScript('test.js'); }); });與其他Ajax方法一樣，$.getScript()方法也有回調函數，它會在JavaScript文件成功載入后運行。例如像載入jQuery官方顏色動畫插件（jquery.color.js），成功后給元素綁定顏色變化動畫，就可以用到$.getScript()方法的回調函數。代碼如下：
$(function(){ $.getScript('jquery.color.js',function(){ $("<p>加載JavaScript完畢</p>").appendTo("body"); $("#go").click(function(){ $(".block").animate( { backgroundColor: 'pink' }, 1000).animate( { backgroundColor: 'blue' }, 1000); }); }); });當jquery.color.js動畫插件加載完畢后，單擊id為“go”按鈕時，class為block的元素就有了顏色動畫變化。
$.getJSON()
$.getJSON()方法用於加載JSON文件，與$.getScript()方法的用法相同。
我們來看demo2.
demo2.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> * { margin:0; padding:0;} body { font-size:12px;} .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;} .comment h6 { font-weight:700; font-size:14px;} .para { margin-top:5px; text-indent:2em;background:#DDD;} </style> <!-- 引入jQuery --> <script src="../scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $('#send').click(function() { $.getJSON('test.json'); }); }); </script> </head> <body> <br/> <p> <input type="button" id="send" value="加載"/> </p> <div class="comment">已有評論：</div> <div id="resText" > </div> </body> </html>test.json代碼：
[
{
"username": "張三", "content": "沙發." }, { "username": "李四", "content": "板凳." }, { "username": "王五", "content": "地板." } ]但點擊“加載”按鈕后，網頁上看不到任何效果。雖然加載了JSON文件，但是並沒有告訴JavaScript對返回的數據如何處理。為此，jQuery提供了回調函數，在回調函數里處理返回的數據。代碼如下：
$(function() { $('#send').click(function() { $.getJSON('test.json',function(data) { //data：返回的數據 }); }); });可以在函數中通過data變量來遍歷相應的數據，也可以使用迭代方式為每個項構建相應的HTML代碼。雖然在這里可以使用傳統的for循環來實現，但既然是講解jQuey，那么還是使用jQuery里的方法。jQuery提供了一個通用的遍歷方法$.each()，可以用於遍歷對象和數組。 $.each()函數不同於jQuery對象的each()方法，它是一個全局函數，不操作jQuery對象，而是以一個數組或者對象作為第1個參數，以一個回調函數作為第2個參數。回調函數擁有兩個參數：第1個為對象的成員或數組的索引，第2個為對象變量或內容。代碼如下：
$(function(){ $('#send').click(function() { $.getJSON('test.json', function(data) { $('#resText').empty(); var html = ''; $.each(data, function(commentIndex, comment) { html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>'; }); $('#resText').html(html); }); }); });修改后的demo2.html代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> * { margin:0; padding:0;} body { font-size:12px;} .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;} .comment h6 { font-weight:700; font-size:14px;} .para { margin-top:5px; text-indent:2em;background:#DDD;} </style> <!-- 引入jQuery --> <script src="../scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ $('#send').click(function() { $.getJSON('test.json', function(data) { $('#resText').empty(); var html = ''; $.each(data, function(commentIndex, comment) { html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>'; }); $('#resText').html(html); }); }); }) //]]> </script> </head> <body> <br/> <p> <input type="button" id="send" value="加載"/> </p> <div class="comment">已有評論：</div> <div id="resText" > </div> </body> </html>在上面的代碼中，在jQuery部分，當返回數據成功后，首先清空id為“resText”的元素的內容，以便重新構造新的HTML，然后通過$.each()循環函數依次遍歷每個項，並將遍歷出來的內容構建成HTML代碼拼接起來，最后將構建好的HTML添加到id為“resText”的元素中。
不僅如此，還能通過使用JSONP形式的回調函數來加載其他網站的JSON數據，例如從圖片網站（http://Flicker.com）搜索汽車類別的4張最新圖片。代碼如下：（假設你已經對JSONP有了解——不熟悉JSONP的同學可以看我的這篇文章：關於JSON和JSONP的詳解）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> * { margin:0; padding:0;} body { font-size:12px;} .para { width:100px;height:100px;margin:5px;border:0;} </style> <!-- 引入jQuery --> <script src="../scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $('#send').click(function() { $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?",function (data){ $.each(data.items, function( i,item ){ $("<img class='para'/> ").attr({ "src": item.media.m, "title": item.title }).appendTo("#resText"); if ( i == 3 ) { return false; } }); }); }); }); </script> </head> <body> <p> <input type="button" id="send" value="加載"/> </p> <div id="resText" > </div> </body> </html>上面的代碼中再次用到全局函數$.each()來遍歷數據，因為只需要4張圖片，所以當i=3的時候就需要退出循環。在$.each()函數中，如果需要退出each循環，只要返回false即可。
$.ajax()方法
$.ajax()方法是jQuery最底層的Ajax實現。
它的結構為： $.ajax(options)
該方法只有1個參數，但在這個對象里包含了$.ajax()方法所需要的請求設置以及回調函數等信息，參數以key/value的形式存在，所有參數都是可選的。
前面用到的$.load()、$.get()、$.post()、$getScript()和$.getJSON()這些方法，都是基於$.ajax()方法構建的，$.ajax()方法是jQuery最底層的Ajax實現，因此可以用它來代替前面的所有方法。
例如，可以使用下面的jQuery代碼代替$.getScript方法：
$(function(){ $('#send').click(function() { $.ajax({ type: "GET", url: "test.js", dataType: "script" }); }); });再例如，可以使用以下jQuery代碼來代替$.getJSON()方法：
$(function(){ $('#send').click(function() { $.ajax({ type: "GET", url: "test.json", dataType: "json", success : function(data){ $('#resText').empty(); var html = ''; $.each( data , function(commentIndex, comment) { html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>'; }); $('#resText').html(html); $('#resText').val(html); } }); }); });序列化
最后，講解一下序列化元素：
1.serialize()方法
做項目的過程中，表單是必不可少的，經常用來提供數據，例如注冊、登錄等。常規的方法是使表單提交到另一個頁面，整個瀏覽器都會被刷新，而使用Ajax技術則能夠異步的提交表單，並將服務器返回的數據顯示在當前頁面中。
前面在講解$.get()和$.post()方法的時候，表單的HTML代碼如下：
<form id="form1" action="#"> <p>評論:</p> <p>姓名:<input type="text" name="username" id="username"></p> <p><input type="button" id="send" value="提交"></p> </form>為了獲取姓名和內容，必須將字段的值逐個添加到data參數中。代碼如下：
$('#send').click(function() { $.get("get1.php", { username:$('#username').val(), content:$('#content').val() },function(data,textStatus){ $('#resText').html(data); //將返回的數據添加到頁面上 }); });這種方式只有少量字段的表單中，勉強還可以用，但如果表單元素越來越復雜，使用這種方式在增大工作量的同時也使表單缺乏彈性。jQuery為這一常用的操作提供了一個簡化的方法——serialize()。與jQuery中其他方法一樣，serialize()方法也是作用於一個jQuery對象，它能夠將DOM元素內容序列化為字符串，用於Ajax請求。通過使用serialize()方法，可以把剛才的jQury代碼改為如下：
$('#send').click(function() { $.get("get1.php",$('#form1').serialize(),function(data,textStatus){ $('#resText').html(data); //將返回的數據添加到頁面上 }); });我們可以看到使用serialize()與前面那個逐個傳參的效果是一樣的。
而且這種，即使在表單中再增加字段，腳本仍然能夠使用，並且不需要做其他多余工作。
需要注意的是，$.get()方法中data參數不僅可以使用映射方式，如以下jQuery代碼：
{
username: $('#username').val(), conent: $('#content).val() }也可以使用字符串方式，如以下jQuery代碼：
"username=" + encodeURIComponent($('#username').val()) + "&content=" + encodeURIComponent($('#content').val())用字符串方式時，需要注意對字符編碼（中文問題），如果不希望編碼帶來麻煩，可以使用serialize()方法，它會自動編碼。
因為serialize()方法作用於jQuery對象，所以不光只有表單能使用它，其他選擇器選取的元素也都能使用它，如以下jQuery代碼：
$(":checkbox,:radio").serialize();把復選框和單選框的值序列化為字符串形式，只會將選中的值序列化。
2.serializeArray()方法
在jQuery中還有一個與serialize()類似的方法——serializeArray()，該方法不是返回字符串，而是將DOM元素序列化后，返回JSON格式的數據。jQuery代碼如下：
var fields = $(":checkbox,:radio").serializeArray(); console.log(fields);通過console.log()方法輸出fields對象，然后在瀏覽器的F12中查看該對象。 
既然是一個對象，那么就可以使用$.each()函數對數據進行迭代輸出。代碼如下：
$(function() { var fields = $(":checkbox,:radio").serializeArray(); console.log(fields); $.each(fields,function(i,field){ $('#results').append(fiels.value + " , "); }); });3.$.param()方法
它是serialize()方法的核心，用來對一個數組或對象按照key/value進行序列化。
例如：
var obj = {a:1,b:2,c:3}; var k = $.param(obj); alert(k); //輸出a=1&b=2&c=3TIP
$.ajax() 方法是 $.get、$.post 等一系列方法的基礎，這些方法的底層還是調用 $.ajax() 方法。拿一小段源碼來看一下：
getJSON: function(url,data,callback) { return jQuery.get(url,data,callback,"json"); } get: function(url,data,callback,type) { // shift arguments if data argument was omited if(jQuery.isFunction(data)) { type = type || callback; callback = data; data = null; } return jQuery.ajax({ type: "GET", url: url, data: data, success: callback, dataType: type }); }可以看到，$.get() 方式是直接調用 $.ajax() 方法的。而其他 $.getJSON ，$.getScript() 等之類方法是調用的 $.get() 方法，相當於最后還是調用的 $.ajax() 方法。
所以，我建議，就不要使用 $.get() ， $.post() 了，全部直接使用 $.ajax() 方法吧。