Python 100 Days Day43 Static Resource and Ajax Request

author: jackfrued

靜態資源和Ajax請求

加載靜態資源

如果要在Django項目中使用靜態資源，可以先創建一個用於保存靜態資源的目錄。在vote項目中，我們將靜態資源置於名為static的文件夾中，在該文件夾包含了三個子文件夾：css、js和images，分別用來保存外部CSS文件、外部JavaScript文件和圖片資源，如下圖所示。

為了能夠找到保存靜態資源的文件夾，我們還需要修改Django項目的配置文件settings.py，如下所示：

STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'), ]
STATIC_URL = '/static/'

配置好靜態資源之後，大家可以運行項目，然後看看之前我們寫的頁面上的圖片是否能夠正常加載出來。需要說明的是，在項目正式部署到線上環境後，我們通常會把靜態資源交給專門的靜態資源服務器（如Nginx、Apache）來處理，而不是有運行Python代碼的服務器來管理靜態資源，所以上面的配置並不適用於生產環境，僅供項目開發階段測試使用。使用靜態資源的正確姿勢我們會在後續的章節為大家講解。

Ajax概述

接下來就可以實現“好評”和“差評”的功能了，很明顯如果能夠在不刷新頁面的情況下實現這兩個功能會帶來更好的用戶體驗，因此我們考慮使用Ajax技術來實現“好評”和“差評”。Ajax是Asynchronous Javascript And XML的縮寫 , 簡單的說，使用Ajax技術可以在不重新加載整個頁面的情況下對頁面進行局部刷新。

對於傳統的Web應用，每次頁面上需要加載新的內容都需要重新請求服務器並刷新整個頁面，如果服務器短時間內無法給予響應或者網絡狀況並不理想，那麽可能會造成瀏覽器長時間的空白並使得用戶處於等待狀態，在這個期間用戶什麽都做不了，如下圖所示。很顯然，這樣的Web應用並不能帶來很好的用戶體驗。

對於使用Ajax技術的Web應用，瀏覽器可以向服務器發起異步請求來獲取數據。異步請求不會中斷用戶體驗，當服務器返回了新的數據，我們可以通過JavaScript代碼進行DOM操作來實現對頁面的局部刷新，這樣就相當於在不刷新整個頁面的情況下更新了頁面的內容，如下圖所示。

在使用Ajax技術時，瀏覽器跟服務器通常會交換XML或JSON格式的數據，XML是以前使用得非常多的一種數據格式，近年來幾乎已經完全被JSON取代，下面是兩種數據格式的對比。

XML格式：

<?xml version="1.0" encoding="utf-8"?>
<message>
	<from>Alice</from>
    <to>Bob</to>
    <content>Dinner is on me!</content>
</message>

JSON格式：

{
    "from": "Alice",
    "to": "Bob",
    "content": "Dinner is on me!"
}

通過上面的對比，明顯JSON格式的數據要緊湊得多，所以傳輸效率更高，而且JSON本身也是JavaScript中的一種對象表達式語法，在JavaScript代碼中處理JSON格式的數據更加方便。

小結

到此為止，這個投票項目的核心功能已然完成，在下面的章節中我們會要求用戶必須登錄才能投票，沒有賬號的用戶可以通過注冊功能注冊一個賬號。