Jquery是一個非常流行的JavaScript庫,可以方便地操作HTML DOM和處理事件,jquery callback請求則是jquery中的一個重要特性。Callback請求是指向后臺發送請求后,能夠在服務器處理數據完成后自動回調到前端頁面,以實現數據的動態刷新。
$.get('http://example.com/data', {a:1, b:2}, function(data) { console.log(data); } );
上述代碼中,$.get()方法用于向指定的url發送get請求,第二個參數是一個對象,包含了請求的參數,第三個參數則是一個回調函數,當請求成功后會自動調用該函數,并將后臺返回的數據作為參數傳入。可以使用$.post()和$.ajax()方法來發送post請求或更加復雜的請求參數,但基本的參數和回調函數使用方法是相同的。
Callback請求的一個重要應用場景是在頁面上動態刷新數據,比如在網頁聊天室中實時收發消息。使用jquery實現動態刷新的流程是這樣的:首先在HTML頁面中固定一個容器,當有新的消息時將消息插入該容器,并同時向后臺發送消息請求,后臺返回新的消息后,通過callback回調函數將新的消息插入到容器中即可實現動態刷新。代碼如下:
var $container = $('#container'); var last_msg_time = 0; //上次接收到消息的時間戳 function refresh_message() { $.get('http://example.com/get_message', {last_time: last_msg_time}, function(result) { //result是后臺返回的消息數據 for (var i = 0; i< result.length; i++) { var msg = result[i]; $container.append($('').text(msg.content)); last_msg_time = msg.timestamp; } } ); } setInterval(refresh_message, 5000); //每5秒刷新一次消息上述代碼中,refresh_message()函數會周期性地向后臺發送請求,請求最新的消息數據。請求參數last_time表示上一次接收到消息的時間戳,后臺會將當前時間后的所有新消息數據返回。在成功回調函數中,將返回的消息插入到容器中,同時更新last_msg_time變量以便于下次請求。最后使用setInterval()函數在固定時間間隔內執行refresh_message()函數,即可實現了動態刷新。