<%@ Page Language="C#" %>
<script runat="server">
void Page_Load(object sender, EventArgs e)
{
string testItem = Request["test"];
if (!string.IsNullOrEmpty(testItem))
{
//測試1, 顯示HTTP Method
if (testItem == "method")
Response.Write("HttpMethod=" + Request.HttpMethod);
//測試2, 傳回HTTP 404
else if (testItem == "404")
Response.StatusCode = 404;
//測試3, 傳回HTTP 201及Location header
else if (testItem == "201")
{
Response.StatusCode = 201;
Response.AppendHeader("Location",
"http://blog2.darkthread.net");
}
//測試3, 故意引發錯誤，傳回ASP.NET預設錯誤頁
else if (testItem == "error")
throw new ApplicationException("故意錯誤");
//測試4, 抛回Client端可解讀的HTTP 500
else if (testItem == "errorInfo")
{
Response.StatusCode = 500;
Response.Write("我達達的馬蹄是個美麗的錯誤~");
}
Response.End();
}
}
</script>
<!DOCTYPE>
<html>
<head id="Head1" runat="server">
<title>AJAX Example</title>
<style>
body,input { font-size: 9pt; }
</style>
<script src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.js'></script>
<script>
$(function () {
$("#btnGet").click(function () {
$("#frmShow").attr("src",
"?test=" + $("#selTestItem").val());
});
$("#btnAjax").click(function () {
var test = $("#selTestItem").val();
var $disp = $("#dvStatus");
$disp.text("");
$.ajax({
url: "?test=" + test,
//測試method時使用DELETE，其餘時候傳回P
type: test == "method" ? "DELETE" : "POST",
contentType: "application/json; charset=UTF-8",
statusCode: { //依不同StatusCode執行不同邏輯
200: function (r) { alert("OK-" + r); },
201: function (res, stausText, xhr) {
alert("201-Location=" +
//透過XHR取出Response Header
xhr.getResponseHeader("Location"));
},
404: function () {
alert("Page Not Found!");
},
500: function (xhr, statusText, err) {
alert(xhr.responseText);
}
},
error: function (xhr, statusText, err) {
//StatusCode=2xx或304時執行success, 其餘則將觸發error
$disp.text("ERROR->" + statusText + "/" + err);
}
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
測試項目:
<select id="selTestItem">
<option value="method">DELETE Method</option>
<option value="404">傳回404</option>
<option value="201">傳回201及Header</option>
<option value="error">發生錯誤</option>
<option value="errorInfo">解析錯誤</option>
</select>
<input type="button" id="btnGet" value="直接瀏覽" />
<input type="button" id="btnAjax" value="AJAX存取" />
<hr />
<div id="dvStatus"></div>
<iframe id="frmShow" style="width: 350px; height: 300px"></iframe>
</form>
</body>
</html>