xhrGet 是 XHR 架構中最重要的函數，使用頻率也最高。使用它即可以請求伺服器上的靜態文本資源如 txt、xml 等，也可以擷取動態網頁面 php、jsp、asp 等，只要從伺服器返回的是字元資料流即可。
除了 xhrGet，Dojo 的 XHR 架構還包含 xhrPost，rawXhrPost，xhrPut，rawXhrPut，xhrDelete 。這幾個函數與 xhrGet 類似，使用方法和參數都可以參考 xhrGet 。區別在於他們的 HTTP 要求類型，xhrPost 發送的是 Post 請求，xhrPut 發送的是 Put 請求，xhrDelete
發生的是 Delete 請求。
下面我們看幾個執行個體：
1、使用 xhrGet 請求文本資源
用戶端——
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="HelloDojoAjax.aspx.cs" Inherits="DojoTest.HelloDojoAjax" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js" type="text/javascript"></script> <script type="text/javascript"> function helloWorld(){ dojo.xhrGet({ url:"HelloDojo.txt",//請求的伺服器資源url handleAs:"text",//返回的資料類型 load:function(response,ioArgs){alert(response);},//成功後回呼函數 error:function(error,ioArgs){alert(error.message);}//出錯時回呼函數 }); } //綁定頁面載入完成後的初始化函數 dojo.ready(helloWorld); </script></head><body> </body></html>
服務端資源——
hello world!!Dojo!
2、使用 xhrGet 擷取Json資料
用戶端——
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DojoAjaxJson.aspx.cs" Inherits="DojoTest.DojoAjaxJson" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <%-- 引入 Dojo--%> <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js" type="text/javascript"></script> <script type="text/javascript"> function GetJsonData() { dojo.xhrGet({ url: "GetCity.aspx", //請求的伺服器資源url handleAs: "json", //返回的資料類型 handle: PrintResult//回呼函數 }); return false; } //對返回的json資料進行處理，放入表格 function PrintResult(data){ var table = "<table border=\"1\">"; table += "<tr><th>ProvinceId</th><th>CityName</th></tr>"; dojo.forEach(data, function(city) { table += "<tr><td>"; table += city.ProvinceId; table += "</td><td>"; table += city.CityName; table += "</td></tr>"; }); table += "</table>"; dojo.place(table, dojo.body()); } function init() { //helloworld 函數到按鈕的點擊事件 dojo.connect(dojo.byId("mybutton"), "onclick", "GetJsonData"); } //綁定頁面載入完成後的初始化函數 dojo.ready(init); </script></head><body> <input type="button" id="mybutton" value="擷取json資料" /></body></html>
服務端——
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;namespace JqueryAjaxTest.Data{ public partial class GetCity : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { string result = @"[{""ProvinceId"":""BJ"",""CityName"":""北京""}, {""ProvinceId"":""TJ"",""CityName"":""天津""}]"; //清空緩衝區 Response.Clear(); //將字串寫入響應輸出資料流 Response.Write(result); //將當前所有緩衝的輸出發送的用戶端，並停止該頁執行 Response.End(); } }}
3、使用xhrGet提交表單
用戶端——
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DojoAjaxText.aspx.cs" Inherits="DojoTest.DojoAjaxText" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <%-- 引入 Dojo--%> <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js" type="text/javascript"></script> <script type="text/javascript"> function SubmitForm() { dojo.xhrGet({ url:"GetService.aspx", form: "myform", //需要非同步提交的表單的 id handleAs: "text", //預設值，不對返回的資料做任何處理 handle: PrintResult, //正常和錯誤返回的情況都能處理，可以說是 load 和 error 的混合體，但優先順序比 load 低，只有在沒有設定 load 時才起作用。 content:{Password:"123456"},//這裡可以修改表單中的內容，如果起始表單都為空白，則修改無效 sync:false //預設為非同步，所設不設false意義不大 }); return false; //為了阻止系統預設的表單提交事件，讓表單提交非同步進行，如果不返回 false，會引起頁面跳轉。 } function PrintResult(response){ dojo.create( "div", { "innerHTML": response }, dojo.body() ); } </script></head><body> <form id="myform" onsubmit="return SubmitForm();"> 使用者名稱：<input type="text" name="UserID" /> 密碼：<input type="password" name="Password" /> <input type="submit" name="sub" value="提交" /> </form></body></html>
服務端——
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;namespace DojoTest{ public partial class GetService : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { string id = ""; string pwd = ""; //擷取參數 if (!String.IsNullOrEmpty(HttpContext.Current.Request["UserID"]) && !String.IsNullOrEmpty(HttpContext.Current.Request["Password"])) { id = HttpContext.Current.Request["UserID"]; pwd=HttpContext.Current.Request["Password"]; } //清空緩衝區 Response.Clear(); //將字串寫入響應輸出資料流 Response.Write("使用者輸入id為："+id+",輸入密碼為："+pwd); //將當前所有緩衝的輸出發送的用戶端，並停止該頁執行 Response.End(); } }}
注意：
1、
回呼函數PrintResult包含兩個參數：response 和 ioArgs。
response：表示從伺服器端返回的資料，Dojo 已經根據 handleAs 設定的資料類型進行了預先處理。
ioArgs: 這是一個對象，包含調用 xhrGet 時使用的一些參數。之所以把這些資訊放在一個對象中並傳遞給回呼函數是為了給回呼函數一個執行“上下文”，讓回呼函數知道自己屬於哪個 HTTP 要求，請求有哪些參數，返回的資料是什麼類型等。這些資訊在偵錯工具時特別有用。
ioArgs.url：請求的 URL，與調用 xhrGet 時設定的值一樣。
ioArgs.query：請求中包含的參數， URL 中“ ? ”後面的內容。
ioArgs.handAs：如何對返回的資料進行預先處理，與調用 xhrGet 時設定的值一樣。
ioArgs.xhr： xhrGet 函數使用的 XHR 對象。
2、handleAs（預先處理方式）
text：預設值，不對返回的資料做任何處理
xml：返回 XHR 對象的 responseXML
javascript：使用 dojo.eval 處理返回的資料，返回處理結果
json：使用 dojo.fromJSon 來處理返回的資料，返回產生的 Json 對象
json-comment-optional：如果有資料包含在注釋符中，則只使用 dojo.fromJSon 處理這部分資料，如果沒有資料包含在注釋符中，則使用 dojo.fromJSon 處理全部資料。
json-comment-filtered：資料應該包含在 /* … */ 中，返回使用 dojo.fromJSon 產生的 Json 對象，如果資料不是包含在注釋符中則不處理。
3、代碼中的注釋，也說明了一些值得注意的地方。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
