2011年11月22日 星期二

HTTP 狀態碼 301跟HTTP 狀態碼 404

相關參考:

301轉址
http://www.yes-seo.tw/2011/04/html-301-redirect/
http://www.webconfs.com/how-to-redirect-a-webpage.php
http://www.wulongjun.org/301-redirect
http://www.dannytalk.com/redirecting-in-plesk/
http://www.seowhy.com/24_24_zh.html

Response.Status
http://www.lao8.org/html/8/2010-7-10/Response.Status/

HTTP狀態碼
http://blog.miniasp.com/post/2009/01/16/Web-developer-should-know-about-HTTP-Status-Code.aspx

2011年11月9日 星期三

Ajax參考資料

網站位址:

https://developer.mozilla.org/zh_tw/AJAX

[AJAX]檢查帳號是否重複

參考來源:http://eoffice.im.fju.edu.tw/phpbb/viewtopic.php?t=2633

JavaScript :


<script type="text/javascript">
      var xmlHttp;
      var proc;
      
      //程式由此執行
        function chkAccount() {
         proc = document.getElementById("imgproc");
         proc.style.visibility = 'visible';//顯示處理中的圖片
            createXMLHttpRequest();//建立XMLHttpRequest物件
            var myId = document.getElementById("txtAccount").value;
            var url = "ValiAccount.aspx?myId=" + myId;
           
            xmlHttp.onreadystatechange = callback; //資料回傳之後,使用callback這個函數處理後續動作
            xmlHttp.open("POST", url, true);//將輸入的帳號傳至後端作驗證
            xmlHttp.send(null);
        }
        //xmlHttp.open(a,b,c)
        //第一個參數是 HTTP request 的方法,也就是從 GET、POST、HEAD 中選一個使用,都要大寫
        //第二個參數是要呼叫的url,不過只能呼叫同一個網域的網頁
      //第三個參數決定此 request 是否不同步進行
      //如果設定為true則即使後端尚未傳回資料也會繼續執行後面的程式
      //如果設定為false則必須等後端傳回資料才會繼續執行後面的程式
      
      
   //此函式在建立XMLHttpRequest物件
        function createXMLHttpRequest() {
            if (window.ActiveXObject) {//IE
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            else if (window.XMLHttpRequest) {//other browser
                xmlHttp = new XMLHttpRequest();               
            }
        }

        function callback() {
            if (xmlHttp.readyState == 4) {
                if (xmlHttp.status == 200) {
               var xmldoc = xmlHttp.responseXML;//接收後端程式傳回來的xml
                    var mes = xmldoc.getElementsByTagName("message")[0].firstChild.data;//將Tag 為message的值抓出來
                    var val = xmldoc.getElementsByTagName("passed")[0].firstChild.data;//將Tag 為passed的值抓出來
                    setMessage(mes, val);
                }
            }
        }
        //xmlHttp.readyState 所有可能的值: 0 (還沒開始), 1 (讀取中), 2 (已讀取), 3 (資訊交換中), 4 (一切完成)
      //xmlHttp.status = 200 (一切正常), status = 404 (查無此頁), status =500 (內部錯誤)      
       
        function setMessage(message, isValid) {           
            var messageArea = document.getElementById("divAccount");
            var fontColor = "red";
 
            if (isValid == "true" || isValid == "True") {
                fontColor = "green";               
            }
            proc.style.visibility = 'hidden';//隱藏處理中的圖片
            messageArea.innerHTML = "<font color=" + fontColor + ">" + message + " </font>";//顯示是否有重複的帳號
        }
</script>



觸發事件的input及顯示message的div及圖片 :
<input  id="txtAccount" onChange="chkAccount();"><IMG id="imgproc" style="VISIBILITY: hidden; CURSOR: wait" src="checking.gif">
<div id="divAccount"></div>



後端處理程式
ValiAccount.aspx.cs 

 private void Page_Load(object sender, System.EventArgs e)
      {
         Response.ContentType="text/xml";
         Response.AddHeader("Cache-Control", "no-cache");
         Response.Write("<response>");

         
         bool uFlag=false;
         string message="";
         if(Request["myId"]!=null)
         {
            string myId=Request["myId"].ToString();
            if(myId=="paddy")
            {
               message="帳號無人使用";
               uFlag=true;
            }
            else
            {
               message="帳號重覆";
            }

         }
         else
         {
            message="參數錯誤";
         }
         Response.Write("<passed>" + uFlag.ToString() + "</passed>");
         Response.Write("<message>" + message + "</message>");
         Response.Write("</response>");
         Response.End();

      }



回傳的XML如下:
<response>
   <passed>False</passed>
   <message>帳號重覆</message>
</response>