雖然微軟的VS中的控制項中有AJAX功能的控制項可以達到網頁址更新部分,可是一直沒有針對AJAX與Server互動的功能加以開發(ex:非同步檔案上傳...)
所以這個分類的文章我會用ASP.NET的泛型檔案還有控制項以及JavaScript還有HTML的技術做整合應用。
首先介紹XMLHttpRequest:
它是一個物件存在的最大意義就是它會調用JavaScript以程式化方式經由Http協定連線然後和server溝通。
而且最好的是這個動作可以在背景完成,有別於以往的傳統網頁,你每按下一個控制項網頁就要PostBack一次,
也就是這個技術產生出AJAX(網頁可以做非同步更新,也就是指更新需要更新的部分其他則照舊)。
優點:
1.可以大幅降低網路資料流量
2.因為要求與回應皆可以在背景執行,所以網頁操作介面的反應會比傳統網頁好。
重點:
1.
使用XMLHttpRequest完整執行"要求/回應"流程如下:
a.開啟連線 : open()
b.網頁送出回應 : send()
c.接收server丟回來的回應並顯示 : responseText()
2.
.open()比較典型版本如下:
void open(DOMSString , DOMSString url , boolean async);
第一個參數DOMSString : 代表這次HTTP要求之方法:POST or GET(要用大寫)
第二個參數DOMSString : xxx.aspx 對應的泛型程式檔案名稱
第三個參數DOMSString : true:用非同步傳輸 false:同步傳輸。
.send():
傳送資料到server
.responseText():
一但調用send()當server端執行完畢後,如果server回應的是字串資料,就會調用responseText()方法取得回應資料。
example:
1.首先在VS中建立一個泛型程式檔案,我取名為XMLHttpRequest-dat.ashx.cs,記得要放在App_Code資料夾中。(server端)
2.要建立一個新資料夾不然會出錯,裡面放C#程式我取名為:Default12.aspx(client 端)
前端程式碼:(client端)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script>
function runRequest() {
try {
var client = new XMLHttpRequest();
client.open('POST', 'XMLHttpRequest-dat.ashx', false);
client.send();
//把從server接收到的資料,設給label顯示
document.getElementById('Label1').innerHTML = client.responseText;
} catch (e) {
document.getElementById('Label1').innerHTML = e;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
</form>
//這一行要放在form外面不然會出錯
<button onclick="runRequest()">取得伺服器資料</button>
</body>
</html>
泛型程式碼:(server端)
namespace Ajax
{
/// <summary>
///XMLHttpRequest_dat1 的摘要描述
/// </summary>
public class XMLHttpRequest_dat1 : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
//回應給client的是text
context.Response.ContentType = "text/plain";
//回應給client的字串
context.Response.Write("hello world");
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
留言列表
RWD (1)
