學習AJAX的過程中，發現自己之前存在著很多的不足，于是花了些時間，總結了一些知識，現在和大家分享一下。
前端和后端指的是客戶端和服務器端；前臺和后臺指的都是客戶端上瀏覽者瀏覽界面和管理者管理界面。
客戶端和服務器端進行數據的傳遞通過的都是get方法或者post方法。get方法的數據會留在瀏覽器中新返回頁面的url里面；post方法中的數據在瀏覽器的請求包內的數據內容里面，服務器接收后，如果沒有對齊進行處理，那么我們就無法在返回頁面中找到相應的數據。
單純的說腳本太抽象，從電影的角度說：電影后期編輯時，編輯師根據腳本對拍攝的影像進行剪切，排版，加入特效等等相應的操作；從計算機語言的角度說：HTML文檔后期運行時，瀏覽器根據腳本(客戶端腳本)對HTML進行相應動態的處理和顯示。具體讓我用一句話來說的話，腳本就是可以加工成型東西的機制。
單單使用html標簽進行數據的傳遞和使用(特指)是不可能實現的，所以，這里說的“純”是可以有客戶端腳本的HTML頁面，當然，另一個隱含的意思就是，這里沒有后臺腳本等等的參與，所以，你直接把數據提交給服務器，這個方法是不管用的，也就是說post方法不可以實現純HTML頁面之間數據傳遞(可以)和使用(不可以)，在這里本人也會給出相應post方法的數據傳遞的實現代碼，好了，接著說本塊的這個話題。
如何實現這個該功能呢？有什么方法呢？一個思路是通過get方法；另一個思路是通過瀏覽器中的cookie。
傳遞數據的頁面代碼(通過3種方法實現，其它的大家自己再想一想，本句不再重復)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd"><html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>利用鏈接標簽a手動拼接url</title> </head> <body> <a href="獲得url中的參數.html?name=qingshan&sex=man">鏈接</a> </body></html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd"><html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>利用javascript手動拼接url</title> <script type="text/javascript"> //JavaScript中寫window.open("test3.html?name=qingshan&key=qingshan");彈出窗口一般不行 function Post(){ url="獲得url中的參數.html?name=" + encodeURI(document.getElementById("name").value); //頁面跳轉，并在url中傳遞數據 location.href=url; //location為對象 //window.location.href=url; location為對象 //window.location=url; location為屬性 //document.location=url; } </script> </head> <body> <input type="text" name="name" id="name"/> <input type="submit" value="提交" onclick="javascript:Post();" /> </body></html><!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>利用form表單自動拼接url</title> </head> <body> <!--瀏覽器會自動在url后面加上相應的值,形如：test.html?name=數值&sex=數值--> <form method="get" action="獲得url中的參數.html"> 姓名：<input type="text" name="name" /> <br /> 性別：<input type="text" name="sex" /> <br /> <input type="submit" value="提交" /> </form> </body></html>接收并顯示數據
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>獲得url中的參數</title> <script type="text/javascript"> /* 1、從 URL 字符串中提取變量的值 2、字符串對象的indexof()，substr()，split(),toUpperCase()方法 */ //方法一 href屬性 function Request(strName){ //BOM對象 獲取當前頁面的url var strHref = window.document.location.href; //字符串對象的方法 獲取參數字符串開始的位置 var intPos = strHref.indexOf("?"); //取出參數字符串 var strRight = strHref.substr(intPos + 1); //將多個參數，按照“&”進行分割 var arrTmp = strRight.split("&"); for(var i = 0; i < arrTmp.length; i++){ //將一個參數字符串按照“=”分割成：參數名和參數值 var arrTemp = arrTmp[i].split("="); if(arrTemp[0].toUpperCase() == strName.toUpperCase()) return arrTemp[1]; } return ""; } //方法二 search方法 /* function Request(sPan){ var sQuery = document.location.search; if(sQuery.indexOf("?") == 0) sQuery = sQuery.substr(1); if(sQuery.indexOf("&") >= 0){ var aQuery = sQuery.split("&"); var sTempQuery; for (var nTempCount = 0; nTempCount < aQuery.length; nTempCount++){ sTempQuery = aQuery[nTempCount]; if (sTempQuery.indexOf("=") >= 0){ if (sTempQuery.substring(0,sTempQuery.indexOf("=")) == sPan){ //return deCodeURI(sTempQuery.substr(sTempQuery.indexOf("=") + 1)); JavaScript腳本 return sTempQuery.substr(sTempQuery.indexOf("=") + 1); //表單 } }else return false; } return false; }else{ if (sQuery.indexOf("=") >= 0){ if (sQuery.substring(0,sQuery.indexOf("=")) == sPan){ //return decodeURI(sQuery.substr(sQuery.indexOf("=") + 1)); JavaScript腳本 return sQuery.substr(sQuery.indexOf("=") + 1); }else return false; }else return false; } } */ </script> </head> <body> <form method=get action="test3.htm" name="myform"> <input type="text" name="name" value="請在文本輸入框里輸入內容" /> <input type="submit" value="提交" /> </form> <script type="text/javascript"> //頁面加載完成后自動運行下面的代碼 Rtext=Request("name") if(Rtext!=""){ myform.name.value=Rtext; } </script> </body></html>
傳送數據
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd"><html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>發送數據</title> <script type="text/javascript"> //傳送的數據賦值到cookie中 function setCookie(name,value,path) //兩個參數，一個是cookie的名子，一個是值 { //var Days = 30; //此 cookie 將被保存 30 天 //var exp = new Date(); //new Date()("December 31, 9998"); //exp.setTime(exp.getTime() + Days*24*60*60*1000); //document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); //document.cookie = name + "="+ escape (value) + ";expires="; //escape()及unescapte()方法已過時，現使用encodeURI()和decodeURI() document.cookie = name + "="+ encodeURI(value) + ";path="+path+";expires="; } //從cookie中取出相應的值 function getCookie(name) { var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)")); try{ if(arr != null) return decodeURI(arr[2]); return null; }catch(err){ } } //刪除cookie中相應的值 function delCookie(name) { var exp = new Date()(); exp.setTime(exp.getTime() - 1); var cval=getCookie(name); if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString(); } //往cookie中添加傳送數據 setCookie("name","青山"); </script> </head> <body> <a href="ReadCookie.html">跳轉</a> </body></html>
顯示數據
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd"><html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>顯示數據</title> <script type="text/javascript"> //往cookie中添加傳送的數據 function setCookie(name,value,path) //兩個參數，一個是cookie的名子，一個是值 { //var Days = 30; //此 cookie 將被保存 30 天 //var exp = new Date(); //new Date()("December 31, 9998"); //exp.setTime(exp.getTime() + Days*24*60*60*1000); //document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); //document.cookie = name + "="+ escape (value) + ";expires="; //escape()及unescapte()方法已過時，現使用encodeURI()和decodeURI() document.cookie = name + "="+ encodeURI(value) + ";path="+path+";expires="; } //從cookie中取出相應的值 function getCookie(name) { //正則表達式的運用 var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)")); try{ if(arr != null) //避免中文亂碼問題 return decodeURI(arr[2]); return null; }catch(err){ } } //刪除cookie中相應的值 function delCookie(name) { var exp = new Date(); exp.setTime(exp.getTime() - 1); var cval=getCookie(name); if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString(); } //從cookie中獲得數據 alert(getCookie("name")); //刪除數據 delCookie("name"); alert("刪除？" + getCookie("name")); </script> </head> <body> </body></html>對于HTML中書寫form標簽的方法在這里就不寫了，下去有興趣的讀者可以自己寫一下。下面用的方法是通過Javascript創建節點的方法，具體如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd"><html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>模板</title> <script type="text/javascript"> function addForm(){ //創建form標簽，并設置相應的屬性 var fatherForm = document.createElement("form"); fatherForm.method="post"; //可以設置為get fatherForm.action="a.html"; //創建第一個input標簽，并設置相應的屬性 var firstInput = document.createElement("input"); firstInput.type="hidden"; //child1.setAttribute("type","text"); firstInput.name="name"; firstInput.value="青山"; //創建第二個input標簽，并設置相應的屬性 var secondInput = document.createElement("input"); secondInput.type="hidden"; secondInput.name="sex"; secondInput.value="男"; //將創建的input的節點添加到form標簽里 fatherForm.appendChild(firstInput); fatherForm.appendChild(secondInput); //將創建的form節點添加到body標簽里 //document.getElementById("body").appendChild(father); document.body.appendChild(fatherForm); //提交表單 fatherForm.submit(); } </script> </head> <body id="body"> <input type="button" value="input" onclick="javascript:addForm();"/> </body></html>對于post的方法的驗證，可以逐步的做，可以先顯示創建的節點，然后通過工具查看相應的請求(post或get)
ASP.net頁面之間的跳轉
asp.net頁面之間的跳轉有多種思路。思路一：客戶端直接進行跳轉工作；思路二：服務器端執行相應的服務器端代碼進行相應的跳轉工作；思路三：瀏覽器執行服務器端返回的腳本進行跳轉。
三種思路，每一種思路都有很多具體的實現，例如：上面get和post就是一些具體的方法。在這里只寫一些本人認為重點的內容
不需要執行服務器端代碼 1、有javascript參與 修改屬性 1、location.href="跳轉后的頁面.html"; 2、window.location="跳轉后的頁面.html"; 3、window.location.href="跳轉后的頁面.html"; 4、document.location="跳轉后的頁面.html"; 執行方法 1、window.open("跳轉后的頁面.html"); 2、表單提交方法 2、無javascript參與 1、<a >跳轉到百度</a> 2、<form method="get" action="跳轉后的頁面.html"></form> <!--method可以為post-->只需要執行服務器端代碼 1、response.redirect("answer.aspx?name=aaa&sex=bbb"); //注意，這個可能是第三種情況 2、server.transfer("answer.aspx?name=aaa&sex=bbb"); 3、server.execute("answer.aspx?name=aaa&sex=bbb"); 區別： response.redirect()：沒有站點限制(可以由雅虎服務器跳到新浪服務器)；速度慢；當前url顯示的路徑改變； transfer()和execute()：只能進行站內頁面跳轉(同一臺服務器上)；速度快；當前url顯示的路徑不變； redirect()：可實現*.aspx頁面跳轉到其它類型頁面 transfer()：只能進行*.aspx頁面之間跳轉 execute()：把aspx頁面上的內容插入到另一個aspx頁面最后面需要服務端和客戶端都執行腳本 通過使用Response.Write方法有多種具體的實現，在這里就不寫了 1、Response.Write("<script type='text/javascript'>window.open('aaa.aspx?name=qingshan&sex=man');</script>"); 很多瀏覽器禁止窗口的彈出窗體；目標頁面和原頁面可以在2個服務器上，原窗口保留，另外新增一個新頁面 2、Response.Write("<script type='text/javascript'> window.location='aaa.aspx?name=qingshan&sex=man';</script>"); 新打開的頁面，原窗口被代替
客戶端和服務器端進行數據的交流都是通過post方法或者get方法，這一點在前面也說了，之所以在這里再說，是為了讓大家明白清楚，下面的內容。
runat="server" 的意思就是變成控件，變成asp.net的控件，標簽元素和控件是不同的東西，在服務器端，控件會進行一個處理，生成具有一些標志的標簽元素，然后返回給瀏覽器，瀏覽器和服務器端進行交互的時候，都會把這些具有特殊標志的標簽元素的所有特性給傳過來
asp.net服務器端控件會在客戶端請求的時候，被服務器變成標簽元素返回給瀏覽器，瀏覽器每次和服務器進行交互的時候，都會把這些標簽的state返回給服務器端，然后，服務器端解析這些狀態，看看是否有相應事件的觸發，當然，我們也可以通過后端代碼訪問這些數據，因為這些數據包含了該“控件”的所有信息，所以，有時會使我們對post和get方法在這里的作用有些迷茫，其實，這些數據都是通過post方法或者get方法實現傳遞的，至于服務器端是如何解析數據并執行的，我們現在不用管。
一個小測試，說明服務端控件傳送state信息。
前端<body> <form id="form1" runat="server" method="get"> <asp:Button ID="Button1" runat="server" Text="測試" onclick="Button1_Click" /> </form></body>后端 protected void Button1_Click(object sender, EventArgs e) { Response.Write("測試內容"); }
結果(方便大家看，這里用的為get方法)
接著說我們ASP.net頁面之間數據傳輸的問題，這里具體的代碼就不寫了，說一下思路。思路一：前臺為主；思路二：后臺為主。具體的東西大家可以看一下別人的東西吧！下面是我copy張世棟并簡單做了一些修改的東西，大家可以看看
1. 使用QueryString變量 QueryString是一種非常簡單的傳值方式，他可以將傳送的值顯示在瀏覽器的地址欄中。但是對于傳遞數組或對象的話，就不能用這個方法了。//ask.aspx的代碼 protected void Button1_Click(object sender,EventArgs e) { //傳遞的參數包含在URL中,URL的長度有限制 Response.Redirect("answer.aspx?name=天天"); } //answer.aspx中代碼 protectedvoid Page_Load(object sender, EventArgs e) { Response.Write(Request.QueryString["name"]); } 2. 使用Application 對象變量 Application對象的作用范圍是整個全局，也就是說對所有用戶都有效。其常用Lock和UnLock方法來對application對象進行鎖定,防止多個用戶同時對次此對象進行操作,造成數據混亂。//ask.aspx的代碼 private void Button1_Click(object sender, System.EventArgs e) { //類似與哈希表 Application["name"] = "天天"; //使用Server.Transfer跳轉頁面的時候瀏覽器顯示的地址并沒有改變 Server.Transfer("answer.aspx"); } //answer.aspx中代碼 private void Page_Load(object sender, EventArgs e) { Application.Lock(); Response.Write(Application["name"].ToString()); Application.UnLock(); }3. 使用Session變量 其操作與Application類似，作用于用戶個人，所以，過量的存儲會導致服務器內存資源的耗盡。//ask.aspx的代碼private void Button1_Click(object sender, System.EventArgs e) { Session["name"] = "天天"; Response.Redirect ("answer.aspx"); } //answer.aspx中代碼 private void Page_Load(object sender, EventArgs e) { Response.Write(Session["name"].ToString()); } 4. 使用Cookie對象變量 與Session一樣，對每一個用戶而言的，Cookie是存放在客戶端的，而session是存放在服務器端的。而且Cookie的使用要配合ASP.NET內置對象Request來使用//ask.aspx的代碼 private void Button1_Click(object sender, System.EventArgs e) { HttpCookiecookieTest = new HttpCookie("name"); //創建cookie對象 cookieTest.Value ="天天"; //給cookie對象賦值 Response.AppendCookie(cookieTest); //保存cookies對象(response.Cookie.Add（CookieName）;) erver.Transfer("answer.aspx"); } //answer.aspx中代碼 private void Page_Load(object sender, EventArgs e) { HttpCookie MyCookie= Request.Cookies["name"];//獲取Cookie對象 String StrName =MyCookie.Value; //獲取其變量值 Response.Write(StrName); } 5. 使用cache緩存的方式 緩存存在的時間不是太長所以需要慎重使用//ask.aspx的代碼 protected void Button1_Click(object sender,EventArgs e) { this.Cache.Insert("name", "天天"); Server.Transfer("answer.aspx"); } //answer.aspx中代碼 protectedvoid Page_Load(object sender, EventArgs e) { Response.Write(Cache["name"].ToString()); } 6. 使用Server.Transfer方法 這個才可以說是面象對象開發所使用的方法，其使用Server.Transfer方法把流程從當前頁面引導到另一個頁面中，新的頁面使用前一個頁面的應答流，所以這個方法是完全面象對象的，簡潔有效。//ask.aspx的代碼 public string name { get { return "天天"; } } private void Button1_Click(object sender, System.EventArgs e) { Server.Transfer("answer.aspx"); } //answer.aspx中C#代碼 private void Page_Load(object sender, EventArgs e) { ask a = new ask(); string StrName = a.name; Response.Write(StrName); }
方法不僅僅只有上面那些，還有很多種，有興趣的讀者，可以繼續做下去。
本篇博客主要寫的內容為：靜態HTML之間頁面的轉化；靜態HTML之間數據的傳遞；ASP.net頁面之間的轉化；ASP.net頁面之間數據的傳遞；靜態HTML和ASP.net頁面之間的交互。里面的有些內容可能不是做了為一個模塊來講，但是，可以從別的模塊中得到，所以在上面的描述中就沒有再重復的寫了，另外，在靜態HTML和ASP.net頁面之間交互的解釋非常的少，
學習AJAX的過程中，發現自己之前存在著很多的不足，于是花了些時間，總結了一些知識，現在和大家分享一下。
前端和后端指的是客戶端和服務器端；前臺和后臺指的都是客戶端上瀏覽者瀏覽界面和管理者管理界面。
客戶端和服務器端進行數據的傳遞通過的都是get方法或者post方法。get方法的數據會留在瀏覽器中新返回頁面的url里面；post方法中的數據在瀏覽器的請求包內的數據內容里面，服務器接收后，如果沒有對齊進行處理，那么我們就無法在返回頁面中找到相應的數據。
單純的說腳本太抽象，從電影的角度說：電影后期編輯時，編輯師根據腳本對拍攝的影像進行剪切，排版，加入特效等等相應的操作；從計算機語言的角度說：HTML文檔后期運行時，瀏覽器根據腳本(客戶端腳本)對HTML進行相應動態的處理和顯示。具體讓我用一句話來說的話，腳本就是可以加工成型東西的機制。
單單使用html標簽進行數據的傳遞和使用(特指)是不可能實現的，所以，這里說的“純”是可以有客戶端腳本的HTML頁面，當然，另一個隱含的意思就是，這里沒有后臺腳本等等的參與，所以，你直接把數據提交給服務器，這個方法是不管用的，也就是說post方法不可以實現純HTML頁面之間數據傳遞(可以)和使用(不可以)，在這里本人也會給出相應post方法的數據傳遞的實現代碼，好了，接著說本塊的這個話題。
如何實現這個該功能呢？有什么方法呢？一個思路是通過get方法；另一個思路是通過瀏覽器中的cookie。
傳遞數據的頁面代碼(通過3種方法實現，其它的大家自己再想一想，本句不再重復)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd"><html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>利用鏈接標簽a手動拼接url</title> </head> <body> <a href="獲得url中的參數.html?name=qingshan&sex=man">鏈接</a> </body></html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd"><html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>利用javascript手動拼接url</title> <script type="text/javascript"> //JavaScript中寫window.open("test3.html?name=qingshan&key=qingshan");彈出窗口一般不行 function Post(){ url="獲得url中的參數.html?name=" + encodeURI(document.getElementById("name").value); //頁面跳轉，并在url中傳遞數據 location.href=url; //location為對象 //window.location.href=url; location為對象 //window.location=url; location為屬性 //document.location=url; } </script> </head> <body> <input type="text" name="name" id="name"/> <input type="submit" value="提交" onclick="javascript:Post();" /> </body></html><!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>利用form表單自動拼接url</title> </head> <body> <!--瀏覽器會自動在url后面加上相應的值,形如：test.html?name=數值&sex=數值--> <form method="get" action="獲得url中的參數.html"> 姓名：<input type="text" name="name" /> <br /> 性別：<input type="text" name="sex" /> <br /> <input type="submit" value="提交" /> </form> </body></html>接收并顯示數據
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>獲得url中的參數</title> <script type="text/javascript"> /* 1、從 URL 字符串中提取變量的值 2、字符串對象的indexof()，substr()，split(),toUpperCase()方法 */ //方法一 href屬性 function Request(strName){ //BOM對象 獲取當前頁面的url var strHref = window.document.location.href; //字符串對象的方法 獲取參數字符串開始的位置 var intPos = strHref.indexOf("?"); //取出參數字符串 var strRight = strHref.substr(intPos + 1); //將多個參數，按照“&”進行分割 var arrTmp = strRight.split("&"); for(var i = 0; i < arrTmp.length; i++){ //將一個參數字符串按照“=”分割成：參數名和參數值 var arrTemp = arrTmp[i].split("="); if(arrTemp[0].toUpperCase() == strName.toUpperCase()) return arrTemp[1]; } return ""; } //方法二 search方法 /* function Request(sPan){ var sQuery = document.location.search; if(sQuery.indexOf("?") == 0) sQuery = sQuery.substr(1); if(sQuery.indexOf("&") >= 0){ var aQuery = sQuery.split("&"); var sTempQuery; for (var nTempCount = 0; nTempCount < aQuery.length; nTempCount++){ sTempQuery = aQuery[nTempCount]; if (sTempQuery.indexOf("=") >= 0){ if (sTempQuery.substring(0,sTempQuery.indexOf("=")) == sPan){ //return deCodeURI(sTempQuery.substr(sTempQuery.indexOf("=") + 1)); JavaScript腳本 return sTempQuery.substr(sTempQuery.indexOf("=") + 1); //表單 } }else return false; } return false; }else{ if (sQuery.indexOf("=") >= 0){ if (sQuery.substring(0,sQuery.indexOf("=")) == sPan){ //return decodeURI(sQuery.substr(sQuery.indexOf("=") + 1)); JavaScript腳本 return sQuery.substr(sQuery.indexOf("=") + 1); }else return false; }else return false; } } */ </script> </head> <body> <form method=get action="test3.htm" name="myform"> <input type="text" name="name" value="請在文本輸入框里輸入內容" /> <input type="submit" value="提交" /> </form> <script type="text/javascript"> //頁面加載完成后自動運行下面的代碼 Rtext=Request("name") if(Rtext!=""){ myform.name.value=Rtext; } </script> </body></html>
傳送數據
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd"><html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>發送數據</title> <script type="text/javascript"> //傳送的數據賦值到cookie中 function setCookie(name,value,path) //兩個參數，一個是cookie的名子，一個是值 { //var Days = 30; //此 cookie 將被保存 30 天 //var exp = new Date(); //new Date()("December 31, 9998"); //exp.setTime(exp.getTime() + Days*24*60*60*1000); //document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); //document.cookie = name + "="+ escape (value) + ";expires="; //escape()及unescapte()方法已過時，現使用encodeURI()和decodeURI() document.cookie = name + "="+ encodeURI(value) + ";path="+path+";expires="; } //從cookie中取出相應的值 function getCookie(name) { var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)")); try{ if(arr != null) return decodeURI(arr[2]); return null; }catch(err){ } } //刪除cookie中相應的值 function delCookie(name) { var exp = new Date()(); exp.setTime(exp.getTime() - 1); var cval=getCookie(name); if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString(); } //往cookie中添加傳送數據 setCookie("name","青山"); </script> </head> <body> <a href="ReadCookie.html">跳轉</a> </body></html>
顯示數據
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd"><html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>顯示數據</title> <script type="text/javascript"> //往cookie中添加傳送的數據 function setCookie(name,value,path) //兩個參數，一個是cookie的名子，一個是值 { //var Days = 30; //此 cookie 將被保存 30 天 //var exp = new Date(); //new Date()("December 31, 9998"); //exp.setTime(exp.getTime() + Days*24*60*60*1000); //document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); //document.cookie = name + "="+ escape (value) + ";expires="; //escape()及unescapte()方法已過時，現使用encodeURI()和decodeURI() document.cookie = name + "="+ encodeURI(value) + ";path="+path+";expires="; } //從cookie中取出相應的值 function getCookie(name) { //正則表達式的運用 var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)")); try{ if(arr != null) //避免中文亂碼問題 return decodeURI(arr[2]); return null; }catch(err){ } } //刪除cookie中相應的值 function delCookie(name) { var exp = new Date(); exp.setTime(exp.getTime() - 1); var cval=getCookie(name); if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString(); } //從cookie中獲得數據 alert(getCookie("name")); //刪除數據 delCookie("name"); alert("刪除？" + getCookie("name")); </script> </head> <body> </body></html>對于HTML中書寫form標簽的方法在這里就不寫了，下去有興趣的讀者可以自己寫一下。下面用的方法是通過Javascript創建節點的方法，具體如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd"><html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>模板</title> <script type="text/javascript"> function addForm(){ //創建form標簽，并設置相應的屬性 var fatherForm = document.createElement("form"); fatherForm.method="post"; //可以設置為get fatherForm.action="a.html"; //創建第一個input標簽，并設置相應的屬性 var firstInput = document.createElement("input"); firstInput.type="hidden"; //child1.setAttribute("type","text"); firstInput.name="name"; firstInput.value="青山"; //創建第二個input標簽，并設置相應的屬性 var secondInput = document.createElement("input"); secondInput.type="hidden"; secondInput.name="sex"; secondInput.value="男"; //將創建的input的節點添加到form標簽里 fatherForm.appendChild(firstInput); fatherForm.appendChild(secondInput); //將創建的form節點添加到body標簽里 //document.getElementById("body").appendChild(father); document.body.appendChild(fatherForm); //提交表單 fatherForm.submit(); } </script> </head> <body id="body"> <input type="button" value="input" onclick="javascript:addForm();"/> </body></html>對于post的方法的驗證，可以逐步的做，可以先顯示創建的節點，然后通過工具查看相應的請求(post或get)
ASP.net頁面之間的跳轉
asp.net頁面之間的跳轉有多種思路。思路一：客戶端直接進行跳轉工作；思路二：服務器端執行相應的服務器端代碼進行相應的跳轉工作；思路三：瀏覽器執行服務器端返回的腳本進行跳轉。
三種思路，每一種思路都有很多具體的實現，例如：上面get和post就是一些具體的方法。在這里只寫一些本人認為重點的內容
不需要執行服務器端代碼 1、有javascript參與 修改屬性 1、location.href="跳轉后的頁面.html"; 2、window.location="跳轉后的頁面.html"; 3、window.location.href="跳轉后的頁面.html"; 4、document.location="跳轉后的頁面.html"; 執行方法 1、window.open("跳轉后的頁面.html"); 2、表單提交方法 2、無javascript參與 1、<a >跳轉到百度</a> 2、<form method="get" action="跳轉后的頁面.html"></form> <!--method可以為post-->只需要執行服務器端代碼 1、response.redirect("answer.aspx?name=aaa&sex=bbb"); //注意，這個可能是第三種情況 2、server.transfer("answer.aspx?name=aaa&sex=bbb"); 3、server.execute("answer.aspx?name=aaa&sex=bbb"); 區別： response.redirect()：沒有站點限制(可以由雅虎服務器跳到新浪服務器)；速度慢；當前url顯示的路徑改變； transfer()和execute()：只能進行站內頁面跳轉(同一臺服務器上)；速度快；當前url顯示的路徑不變； redirect()：可實現*.aspx頁面跳轉到其它類型頁面 transfer()：只能進行*.aspx頁面之間跳轉 execute()：把aspx頁面上的內容插入到另一個aspx頁面最后面需要服務端和客戶端都執行腳本 通過使用Response.Write方法有多種具體的實現，在這里就不寫了 1、Response.Write("<script type='text/javascript'>window.open('aaa.aspx?name=qingshan&sex=man');</script>"); 很多瀏覽器禁止窗口的彈出窗體；目標頁面和原頁面可以在2個服務器上，原窗口保留，另外新增一個新頁面 2、Response.Write("<script type='text/javascript'> window.location='aaa.aspx?name=qingshan&sex=man';</script>"); 新打開的頁面，原窗口被代替
客戶端和服務器端進行數據的交流都是通過post方法或者get方法，這一點在前面也說了，之所以在這里再說，是為了讓大家明白清楚，下面的內容。
runat="server" 的意思就是變成控件，變成asp.net的控件，標簽元素和控件是不同的東西，在服務器端，控件會進行一個處理，生成具有一些標志的標簽元素，然后返回給瀏覽器，瀏覽器和服務器端進行交互的時候，都會把這些具有特殊標志的標簽元素的所有特性給傳過來
asp.net服務器端控件會在客戶端請求的時候，被服務器變成標簽元素返回給瀏覽器，瀏覽器每次和服務器進行交互的時候，都會把這些標簽的state返回給服務器端，然后，服務器端解析這些狀態，看看是否有相應事件的觸發，當然，我們也可以通過后端代碼訪問這些數據，因為這些數據包含了該“控件”的所有信息，所以，有時會使我們對post和get方法在這里的作用有些迷茫，其實，這些數據都是通過post方法或者get方法實現傳遞的，至于服務器端是如何解析數據并執行的，我們現在不用管。
一個小測試，說明服務端控件傳送state信息。
前端<body> <form id="form1" runat="server" method="get"> <asp:Button ID="Button1" runat="server" Text="測試" onclick="Button1_Click" /> </form></body>后端 protected void Button1_Click(object sender, EventArgs e) { Response.Write("測試內容"); }
結果(方便大家看，這里用的為get方法)
接著說我們ASP.net頁面之間數據傳輸的問題，這里具體的代碼就不寫了，說一下思路。思路一：前臺為主；思路二：后臺為主。具體的東西大家可以看一下別人的東西吧！下面是我copy張世棟并簡單做了一些修改的東西，大家可以看看
1. 使用QueryString變量 QueryString是一種非常簡單的傳值方式，他可以將傳送的值顯示在瀏覽器的地址欄中。但是對于傳遞數組或對象的話，就不能用這個方法了。//ask.aspx的代碼 protected void Button1_Click(object sender,EventArgs e) { //傳遞的參數包含在URL中,URL的長度有限制 Response.Redirect("answer.aspx?name=天天"); } //answer.aspx中代碼 protectedvoid Page_Load(object sender, EventArgs e) { Response.Write(Request.QueryString["name"]); } 2. 使用Application 對象變量 Application對象的作用范圍是整個全局，也就是說對所有用戶都有效。其常用Lock和UnLock方法來對application對象進行鎖定,防止多個用戶同時對次此對象進行操作,造成數據混亂。//ask.aspx的代碼 private void Button1_Click(object sender, System.EventArgs e) { //類似與哈希表 Application["name"] = "天天"; //使用Server.Transfer跳轉頁面的時候瀏覽器顯示的地址并沒有改變 Server.Transfer("answer.aspx"); } //answer.aspx中代碼 private void Page_Load(object sender, EventArgs e) { Application.Lock(); Response.Write(Application["name"].ToString()); Application.UnLock(); }3. 使用Session變量 其操作與Application類似，作用于用戶個人，所以，過量的存儲會導致服務器內存資源的耗盡。//ask.aspx的代碼private void Button1_Click(object sender, System.EventArgs e) { Session["name"] = "天天"; Response.Redirect ("answer.aspx"); } //answer.aspx中代碼 private void Page_Load(object sender, EventArgs e) { Response.Write(Session["name"].ToString()); } 4. 使用Cookie對象變量 與Session一樣，對每一個用戶而言的，Cookie是存放在客戶端的，而session是存放在服務器端的。而且Cookie的使用要配合ASP.NET內置對象Request來使用//ask.aspx的代碼 private void Button1_Click(object sender, System.EventArgs e) { HttpCookiecookieTest = new HttpCookie("name"); //創建cookie對象 cookieTest.Value ="天天"; //給cookie對象賦值 Response.AppendCookie(cookieTest); //保存cookies對象(response.Cookie.Add（CookieName）;) erver.Transfer("answer.aspx"); } //answer.aspx中代碼 private void Page_Load(object sender, EventArgs e) { HttpCookie MyCookie= Request.Cookies["name"];//獲取Cookie對象 String StrName =MyCookie.Value; //獲取其變量值 Response.Write(StrName); } 5. 使用cache緩存的方式 緩存存在的時間不是太長所以需要慎重使用//ask.aspx的代碼 protected void Button1_Click(object sender,EventArgs e) { this.Cache.Insert("name", "天天"); Server.Transfer("answer.aspx"); } //answer.aspx中代碼 protectedvoid Page_Load(object sender, EventArgs e) { Response.Write(Cache["name"].ToString()); } 6. 使用Server.Transfer方法 這個才可以說是面象對象開發所使用的方法，其使用Server.Transfer方法把流程從當前頁面引導到另一個頁面中，新的頁面使用前一個頁面的應答流，所以這個方法是完全面象對象的，簡潔有效。//ask.aspx的代碼 public string name { get { return "天天"; } } private void Button1_Click(object sender, System.EventArgs e) { Server.Transfer("answer.aspx"); } //answer.aspx中C#代碼 private void Page_Load(object sender, EventArgs e) { ask a = new ask(); string StrName = a.name; Response.Write(StrName); }
方法不僅僅只有上面那些，還有很多種，有興趣的讀者，可以繼續做下去。
本篇博客主要寫的內容為：靜態HTML之間頁面的轉化；靜態HTML之間數據的傳遞；ASP.net頁面之間的轉化；ASP.net頁面之間數據的傳遞；靜態HTML和ASP.net頁面之間的交互。里面的有些內容可能不是做了為一個模塊來講，但是，可以從別的模塊中得到，所以在上面的描述中就沒有再重復的寫了，另外，在靜態HTML和ASP.net頁面之間交互的解釋非常的少，
