dojo/request

簡介

dojo/request 是 dojo toolkit 的 AJAX 模組，用來傳送符合 AJAX 規範的 request 給後端伺服器，要求伺服器傳送資料給流覽器。

這篇先介紹如何使用 get 和 post 兩種，接收的檔案是標準的文字檔。因為沒有真的伺服器在後端，所以就放一個檔案在目錄裡，直接去讀這個檔案。但是 Chrome 的預設會阻擋流覽器讀取本地 (local) 的檔案，所以得先把 Chrome 關掉，在 OS X 的主控台下"open /Applications/Browser/Google\ Chrome.app --args --allow-file-access-from-files" 指令，在 windows 的主控台下 "Chrome.exe --allow-file-access-from-files"，記得在下指令前，一定要把所有的開啟的 Chrome 流覽器都關掉，不然指令會不起作用。

範例

範例中建立兩個按鈕，一個按下後會送出 get 的 request，另一個會送出 post 的 request，但接收的檔案都是同一個；把資料檔和網頁放在同一個目錄下就可以了。資料檔的檔名為 lyrics.txt。記得開啟「開發者工具」中的「主控台」看結果。如果真的送資料到伺服器， url 的值就要填提供服務的 servlet 或 CGI (Common Gatway Interface) 程式的名稱了。

CSS

<style>
input, textarea {
    font-family:monospace;
}
</style>

在 CSS 中改變 input 及 textarea 兩毎標記內容所使用的字型，改用定寬字。

HTML

<body class="claro">
    Different Requests
    
    
</body>

Script

第 18 行和第 42 行指派給變數 query 的值，就當成由輸入欄位取得，透過 dojos/form/Manager 的 gatherFormValues() 所傳回的 Javascipt 物件，當成送到伺服器的查詢資料。

變數 opts 的值也是個 Javascript 的物作，其中的屬性用來設定 request 的選項。

method 指定 request 所使用的方法，其實共有八種如下：

OPTIONS
GET
HEAD
POST
PUT
DELETE
TRACE
CONNECT

這裡只介紹 GET 和 POST 兩種，其它六種各有不同的用途。

GET 和 POST 選項不同的地方在 GET 用 query 鍵傳送資料給伺服器，query 的值會被轉成 query string 的格式，附加在 url 的後面，傳給伺服器。POST 則用 data 鍵，傳送資料給伺服器， url 的後面不會加任何東西。

async:true 是預設值，指 AJAX request 會以非同步的方式傳送，如果程式一定要等到收到伺服器傳回的資料後才能開始做其它事，就要把它設定為 false，改為同步作業。

preventCache：true, 告訴流覽器不要使用快取 (cache) 中的資料，每次都要向伺服器要資料。如果後端資料變更的頻率很高時，最後設定為 true，避免使用 cache 中的資料，如果資料很少在變動，設定為 false 可以節省頻寬，而且反應會比較快。

timeout 設定逾時值，單為為 milliseconds。設這個值和網路的頻寬有關，最好實地實驗，測一下。

handlAs 指定傳回的資料要以何種格式進行處理。支援的格式有下列幾種：

text
json
javascript
xml

設定為 text 時，直接傳回純文字。

設定為 json 時，若收到的資料確實為 JSON 格式時，會轉成 Javascrpt 的物件後傳回。

設定為 javascript 時，若收到正確的 Javascript，則下載後會立刻執行該段 Javascript 程式碼。但這很有可能造成安全上的漏洞，要小心使用。

設定為 xml 時，則傳回一份 XML 文件，以供處理。

request 的回呼函式有三個傳入的參數都不同。第一個回呼函式是成功時呼叫，參數是伺服器傳回的資料。第二個是發生錯誤時呼叫，傳入的參數是含有錯誤訊息的物件。第三個函式在每一次傳回回應 (response)時呼叫一次；有時一個 request 會有一個以上的 response，可以物件裡的資料來顯示傳輸進度。

熊伯的外接硬碟

2015年10月1日星期四

dojo/request （AJAX）