jQuery Ajax基礎應用【新手進】

Ajax在項目開發中是必不可少的一種建立互動式網頁應用的網頁開發技術。它包含了多種技術：

1、XHTML+CSS
2、DOM
3、XML 和 XSLT
4、XMLHttpRequest
5、使用 JavaScript 將所有的東西綁定在一起

上述可能對於新手來說是比較複雜，本文通過一個jQuery Ajax執行個體，可以讓新手很快上手應用到項目中。

預覽：

jQuery代碼：

 1 var tabs = $('.tabs_1'); 2 var tabsCon = $('.tabs_con_1'); 3 var _css = 'active'; 4  5 tabs.click(function(){ 6     var $this = $(this); 7     var ajaxUrl = $this.data('url'); 8     var index = tabs.index(this); 9     var currentCon = tabsCon.hide().eq(index);10     tabs.removeClass(_css);11     $this.addClass(_css);12     currentCon.show();13     if(!currentCon.data('ajaxLock')) _ajax(ajaxUrl, currentCon);14 });15 16 $('.' + _css).trigger('click');17 18 function _ajax(ajaxUrl, currentCon){19     $.ajax({20         url: ajaxUrl,21         beforeSend: function(){22             currentCon.html('正在努力載入...');23         },24         success: function(response){25             if(response) currentCon.html(response);26             currentCon.data('ajaxLock' ,true);27         },28         error: function(){29             currentCon.html('載入錯誤!');30             currentCon.data('ajaxLock', false);31         }32     });33 }

jQuery Ajax核心：

 1 $.ajax({ 2     url: ajaxUrl, //url為AJAX請求的地址。此地址是程式員提供，我們只需負責請求資料過來並顯示資料就可以了。 3     beforeSend: function(){ //beforeSend為AJAX請求之前執行的操作。本例輸出了一句話：“正在努力載入...” 4         currentCon.html('正在努力載入...'); 5     }, 6     success: function(response){ //success為AJAX請求成功後執行的操作。本例把返回的資料（HTML+內容）放到內容盒子（currentCon）中。 7         if(response) currentCon.html(response); 8         currentCon.data('ajaxLock' ,true); 9     },10     error: function(){ //error為AJAX若請求失敗執行的操作。本例輸出了一句提示：“載入錯誤!”11         currentCon.html('載入錯誤!');12         currentCon.data('ajaxLock', false);13     }14 });

看完上面的代碼和注釋，是不是覺得AJAX其實很簡單？其實只要懂得了它的原理，寫代碼就會很順手的。不過jQury確實是把AJAX的步驟簡化了很多，用起來很方便。

當然，jQuery還提供了一些參數的配置，如type等等..大家可以在本站下載 jQuery參考手冊 進行查閱。