JavaScript中的AJAX(Asynchronous JavaScript and XML)是一種實(shí)現(xiàn)網(wǎng)頁上發(fā)送異步請求的技術(shù),通過AJAX,可以在不刷新整個(gè)網(wǎng)頁的情況下,成塊地更新網(wǎng)頁內(nèi)容,使得網(wǎng)頁的加載速度更快、更加流暢。本文將著重講解AJAX成功后的操作。
在AJAX的操作中,我們一般會使用XMLHttpRequest對象來封裝一個(gè)HTTP請求,該對象可以被傳遞給一個(gè)事件處理程序,以響應(yīng)服務(wù)器的返回?cái)?shù)據(jù)。AJAX成功后,我們需要根據(jù)服務(wù)器返回的數(shù)據(jù),來執(zhí)行相應(yīng)的操作,以達(dá)到我們想要的效果。
var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var response = xhr.responseText; //TODO: 執(zhí)行操作 } }; xhr.open('GET', '/api/myservice'); xhr.send();
比如,在調(diào)用某個(gè)API接口成功后,我們需要在頁面上顯示相應(yīng)的信息。這時(shí)候,我們可以通過DOM操作來更改頁面顯示的內(nèi)容。
function showInfo(data) { var infoDiv = document.getElementById('info'); infoDiv.innerHTML = data; }
如果需要?jiǎng)討B(tài)地向頁面中添加內(nèi)容,我們可以使用jQuery的append()方法。
function addDataToList(data) { var list = $('#dataList'); $.each(data, function(index, item) { var li = $('
在執(zhí)行完AJAX操作之后,可能還需要進(jìn)行一些其它的處理,比如顯示或隱藏某些元素,禁用或激活某些按鈕等等。這時(shí)候,我們可以根據(jù)需要在頁面JS中定義函數(shù),然后在AJAX的回調(diào)函數(shù)中進(jìn)行調(diào)用。
function showLoading() { $('#loading').show(); } function hideLoading() { $('#loading').hide(); } function refreshData() { showLoading(); $.ajax({ url: '/api/data', type: 'GET', success: function(data) { addDataToList(data); hideLoading(); }, error: function(jqXHR, textStatus, errorThrown) { alert('獲取數(shù)據(jù)失敗!'); hideLoading(); } }); }
以上是一些簡單的例子,AJAX成功后的操作具體需要根據(jù)具體需求來決定。總的來說,我們可以根據(jù)服務(wù)器返回的數(shù)據(jù),來更新頁面上的內(nèi)容,也可以通過執(zhí)行一些JS函數(shù)來進(jìn)行后續(xù)的處理。