AJAX是從服務(wù)器端異步獲取數(shù)據(jù)的技術(shù),可以節(jié)省用戶等待頁(yè)面刷新的時(shí)間,使用戶的體驗(yàn)更加流暢。jQuery是一種JavaScript庫(kù),其中包括了AJAX的實(shí)現(xiàn)。
下面是一個(gè)使用jQuery實(shí)現(xiàn)AJAX的例子:
$(function(){ $('#btn').click(function(){ $.ajax({ type: 'POST', url: 'test.php', data: {'name': 'Ajax'}, dataType: 'text', success: function(data){ $('#result').html(data); }, error: function(xhr, type){ alert('Ajax error!'); } }); }); });
該例子中,首先使用了$(function(){...});來(lái)定義了一個(gè)匿名函數(shù),這個(gè)函數(shù)會(huì)在文檔準(zhǔn)備好后執(zhí)行。
然后,在匿名函數(shù)中,使用了一個(gè).click()函數(shù),這個(gè)函數(shù)是當(dāng)按鈕被點(diǎn)擊時(shí)才會(huì)執(zhí)行下面的代碼。
接著使用了$.ajax({...});來(lái)進(jìn)行AJAX請(qǐng)求,其中type表示請(qǐng)求方式,url表示請(qǐng)求的URL地址,data表示請(qǐng)求的數(shù)據(jù),dataType表示服務(wù)器返回的數(shù)據(jù)類型,success表示請(qǐng)求成功后的回調(diào)函數(shù),error表示請(qǐng)求失敗后的回調(diào)函數(shù)。
最后,在success回調(diào)函數(shù)中,使用了$('#result').html(data);來(lái)將服務(wù)器返回的數(shù)據(jù)顯示在HTML頁(yè)面中。
通過(guò)這個(gè)例子,我們可以看出jQuery的AJAX實(shí)現(xiàn)非常簡(jiǎn)單,不僅能夠幫助我們方便地進(jìn)行AJAX請(qǐng)求,而且在代碼實(shí)現(xiàn)上也非常簡(jiǎn)潔易懂。