標籤

css&javascript Ajax初步應用

Ajax，全名是Asynchronous Javascript and XML
非同步 Javascript 及 XML


傳統做法是整個表單提交給伺服器
必須等待伺服器回應後
客戶端才會有畫面更新

而Ajax實現了網頁中特定區塊的資料交換
而不會影響頁面其他區域，若網路夠快
使用者是不會明顯感受到差別
有點像是C#中的執行緒，在使用者不知道的情況下
已默默的完成交待任務並更新畫面

舉例來說，像是註冊時
當輸入完「帳號」後，離開到下一格時
Ajax開始運作，檢查出資料庫中有重複的ID
在帳號框旁會顯示「帳號重複」

其交換方式的過程大至如下：

客戶端觸發事件(可能按了滑鼠，或移到特定區塊)
　　　↓
啟動Ajax向伺服器提出需求
　　　↓
伺服器處理後回應
　　　↓
Ajax接到回應後，更新客戶端指定區域的頁面

綜上，在撰寫客戶端時
需設計觸發事件中「發出需求」及「接受回應」
不然無法實現Ajax，其本上用傳統的Html亦可實現

以下程式碼會實現當使用者輸入數字
會回傳1~數字*數字的表格
例如輸入9回傳9*9乘法表

客戶端：


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Ajax頁面</title>
    <script type="text/javascript">

        //建立請求物件
        var request=null
        function createRequest()
        {
            try
            {
                request=new XMLHttpRequest();
            }
            catch(trymicrosoft)
            {
                try
                {
                    request=new ActivexObject("Msxm12.XMLHTTP");
                }
                catch(othermicrosoft)
                {
                    try
                    {
                        request=new ActiveXOject("Microsoft.XMLHTTP");
                    }
                    catch(failed)
                    {
                        request=null;
                    }
                }
            }

            if(request==null)
                alert("無法產生Request物件");
        }
        /*
        function createRequest()
        {
            if(window.XMLHttpRequest)
                request=new XMLHttpRequest();
            else if(window.ActiveXObject)
                request=new ActiveXObject("Microsoft.XMLHTTP");
        }
        */


        //送出請求
        function AskAjaxData()
        {
            //var url = "/Data/ServerAjaxDataProvider.ashx?tt=" + new Date().getTime();

            var nn = document.getElementById("T1").value;
            var url = "/Data/ServerAjaxDataProvider.ashx?nn=" + nn + "&tt=" + new Date().getTime();

            createRequest();    //建立請求物件         
            request.open("GET",url,true);
            request.onreadystatechange= AcceptData;
            request.send(null);
        }


        //處理回呼處理
        function AcceptData()
        {
            if(request.readyState==4) //回應完成，可獲得回應
            {
                if(request.status==200)//回應結果是ok的
                {
                    var vv=request.responseText;//取得回應字串
                    //document.getElementById("ResultSpan").innerText = vv;//寫在span中
                    document.getElementById("ResultDiv").innerHTML = vv;//寫在div中

                }
            }  
        }
    </script>
</head>
<body>
    <h1>Ajax頁面</h1>
    <p>Ajax答案：<span id="ResultSpan"></span></p>
    <p><input type="text" id="T1" /></p>
    <p><input id="Btn1" type="button" value="呼叫Ajax" onclick="AskAjaxData()" /></p>
    <div id="ResultDiv"></div>

</body>
</html>

伺服器端對應的泛式：

using System;
using System.Collections.Generic;
using System.Text;
using System.Web;

namespace MyAspWeb.Data
{
    public class ServerAjaxDataProvider : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            /*
            Random rr = new Random();
            int a = rr.Next(100);
            context.Response.Write("伺服器的值：" + a);
            */
            /*
            context.Response.Write("伺服器的時間：" + DateTime.Now.ToString());
            */

            int aa = int.Parse(context.Request.QueryString["nn"]);
            StringBuilder sb = new StringBuilder();
            sb.Append("<table width='800' cellpaddind='10' border='1'>");
            for (int i = 1; i <= aa; i++)
            {
                sb.Append("<tr>");
                for (int j = 1; j <= aa; j++)
                    sb.Append(string.Format("<td align='center'>{0}*{1}={2}</td>", i, j, i * j));
                sb.Append("</tr>");
            }
            sb.Append("</table>");
            context.Response.Write(sb.ToString());

        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}
標籤：

留言

張貼留言

熱門文章