使用AJAX技術發送異步請求
什麼是AJAX
AJAX指一步Javascript和XML（Asynchronous JavaScript And XML），它是一些列技術的組合，簡單來講AJAX基於XMLHttpRequest讓咱們在不重載頁面的狀況下和服務器進行數據交換。javascript
加上JavaScript和DOM（Document Object Model,文檔對象模型），咱們就能夠在接收到響應數據後局部更新頁面。XML指的是數據的交互模式，能夠是純文本（Plain Text）、HTML或JSON。java
使用jQuery發送AJAX請求
jQuery是流行的JavaScript庫，它包裝了JavaScript，讓咱們經過更簡單的方式編寫JavaScript代碼。對於AJAX，它提供了多個相關的方法，使用它能夠很方便地實現AJAX操做。更重要的是，jQuery處理了不一樣瀏覽器的AJAX兼容問題，咱們只須要編寫一套代碼，就能夠在全部主流瀏覽器上運行。jquery
在示例中，使用全局jQuery函數ajax()發送AJAX請求。ajax()函數是底層函數，有豐富的自定義配置，支持的主要參數以下：ajax
jQuery還提供了快捷方法：用戶發送GET請求的get()方法和用於發送POST請求的post()方法，還有直接用於獲取json數據的getjson()以及獲取腳本的getscript()方法。這些方法都是基於ajax()方法實現的。json
返回「局部數據」
對於處理AJAX請求的視圖函數來講，不會返回完整的HTML響應，這時通常會返回局部數據，常見的類型有純文本或局部HTML模板、JSON數據或者空值windows
下面程序對應的頁面中，咱們顯示一片很長的虛擬文章，文章正下方有一個」Load More」的按鈕，當按鈕被單擊時，會發送一個AJAX請求獲取文章的更多內容並直接動態插入到文章下方。瀏覽器
用來顯示虛擬文章視圖是show_post服務器
文章的隨機正文經過Jinja2提供的generate_Jorem_ipsum()函數生成，n參數用來指定段落的數量，默認爲5，它會返回由隨機字符組成的虛擬文章。文章下面添加了一個」Load More」按鈕。按鈕下面是兩個<script></script>代碼塊，第一個script是從CDN加載jQuery資源。app
在第二個script標籤中，咱們在代碼的最外層建立了一個$(function(){…})函數，這個函數是常見的$(document).ready(function(){…})函數的簡寫形式。這個函數用來在頁面DOM加載完畢後執行代碼，相似傳統JavaScript中的window.onload方法，因此咱們一般會將代碼包裝在這個函數中。美圓符號是jQuery的簡寫，咱們經過它來調用jQuery提供的多個方法，因此$.ajax()等同於jQuery.ajax()。異步
在$(function(){…})中，$(‘#load’)被稱爲選擇器，咱們在括號中傳入目標元素的id、class或是其餘屬性來定位對應的元素，將其建立爲jQuery對象。咱們傳入了」Load More」按鈕的id值以定位到加載按鈕。在這個選擇器上，咱們附加了.click(function(){…})，這會爲加載按鈕註冊一個單擊事件處理函數，當加載按鈕被單擊時就會執行單擊事件回調函數。在這個回調函數中，咱們使用$.ajax()方法發送一個AJAX請求到服務器，經過url將目標URL設爲」/more」，經過type參數將請求的類型設爲GET。當請求成功處理並返回2xx響應或304響應，會觸發success回調函數。success回調函數接收的第一個參數爲服務器端返回的響應主體，在這個回調函數中，咱們在文章正文(經過$(‘.body’)選擇)底部使用append()方法插入返回的data數據。
from jinja2.utils import generate_lorem_ipsum
@app.route('/post')
def show_post():
post_body = generate_lorem_ipsum(n=2)#生成兩段隨機文本
return u'''
<h1>A very long post</h1>
<div class="body">%s</div>
<button id="load"> Load More</button>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function() {
$('#load').click(function() {
$.ajax({
url: '/more', // 目標URL
type: 'get', // 請求方法
success: function(data){ // 返回2XX響應後觸發的回調函數
$('.body').append(data); // 將返回的響應插入到頁面中
}
})
})
})
</script>''' %post_body
@app.route('/more')
def load_post():
return generate_lorem_ipsum(n=1)
if __name__ == '__main__':
app.run(debug = True)
結果：
訪問127.0.0.1:5000/post頁面
點擊Load More按鈕，瀏覽器會在後臺發送一個GET請求到/more，這個視圖返回的隨機字符會被動態的插入到文章下方
能夠看到頁面沒有刷新，只是在底部多顯示了一段內容
再次點擊按鈕
HTTP服務器端推送
不管是傳統的HTTP請求-響應式的通訊模式，仍是一部的AJAX式請求，服務器端始終處於被動的應答狀態，只有在客戶端發出請求的狀況下，服務器端纔會返回響應。這種通訊模式被稱爲客戶端拉取。
在某些場景下，須要的通訊模式是服務器端的主動推送。好比一個聊天室有不少用戶，當某個用戶發送消息後，服務器接收到這個請求，而後把消息推送給聊天室的全部用戶。
相似這種關注實時性的狀況還有不少，好比社交網站的導航欄實時顯示新提醒和私信的數量，用戶的在線狀態更新，股價行情監控、顯示商品庫存信息、多人遊戲、文檔協做等。
實施服務器桂鬆的一些列技術被合稱爲HTTP Server push（http服務器端推送），目前經常使用的推送技術以下：
輪詢（polling）這類使用AJAX技術模擬服務器端推送的方法實現起來比較簡單，但一般會形成服務器資源上的浪費，增長服務器的負擔，並且會讓用戶的設備消耗更多的電量（頻繁的發起異步請求）。SSE效率更高，在瀏覽器的兼容性方面，除了windows IE/Edge，SSE（server-sent event）基本支持全部主流瀏覽器，但瀏覽器一般會限制標籤頁的連接數量。
除了這些推送技術，在HTML5的API中還包含了一個WebSocket協議，和HTTP不一樣，它是一種基於TCP協議的全雙工通訊協議。和前面說的服務器端推送技術相比，WebSocket實時性更強，並且能夠實現雙向通訊。另外，WebSocket的瀏覽器兼容性要強於SSE。