DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> AJAX的無刷新機制使得在注冊系統中對於注冊名稱的檢測能即時顯示。完成分離篇
AJAX的無刷新機制使得在注冊系統中對於注冊名稱的檢測能即時顯示。完成分離篇
編輯:AJAX詳解      日期:2016/12/30 17:49:46
本文主要實現了在donet中,前台界面與後台程序完成分離,以達到互不影響的效果,從而降低了前台後台之前的偶合度。(當然這種效果也只是相對的),就果我下面舉的例子來說吧,會員注冊和修改會員資料是在一個頁面上顯示。注冊可以達到完成分離(後台程序可以完全不知道前台界面是什麼樣子的,也不需要知道前面界面窗體中包括哪些內容,即不需要知道前台將要傳些什麼值給我),但修改會員數據,就需要前台傳個用戶名來過,從而顯示指定的用戶信息。如果你采用其CookIEs等用戶級的變量來傳的話,當然就可以達到完成分離的效果了。


1。xmlHttp.JS---用於處於客戶端的XMLHTTP數據

//將所有的客戶端表單數據生成XML文件
function GetAllFormData()
{
    var strXML = "<ClIEnt>\r\n<FormData>\r\n";
    for(var i=0;i<=document.forms(0).item.length;i++)
    {
        strXML += "<" + document.forms(0).item(i).name + ">";
        strXML += document.forms(0).item(i).value;
        strXML += "</" + document.forms(0).item(i).name + ">\r\n";
    }
    strXML += "</FormData>\r\n</ClIEnt>"
    return strXML;
}

///向服務器發送XML文檔
function Send(Str,URL) 
{
    var Http = new ActiveXObject("Microsoft.XMLHTTP")
    Http.open("POST",URL,false)
    Http.send(Str)
    return Http.responseText;
}

///獲得XML中指定的節點的值
function GetXMLNodeValue(strXML,nodeName)
{
    var Dom = new ActiveXObject("Microsoft.XMLDOM")
    Dom.async=false 
    Dom.loadXML(strXML)
    if(Dom.parseError.errorCode != 0) 
    {
        delete(Dom)
        return(false)
    }
    else
    {
        var node = Dom.documentElement.selectSingleNode("//"+nodeName);
        if(node)
            nodeValue = node.text;
        delete(Dom)
        return(nodeValue);
    }
}
2. tesASPx.htm---客戶端文件(即注冊修改會員資料頁面)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD Html 4.0 Transitional//EN" >
<Html>
    <HEAD>
        <title>NewUser</title>
        <meta content="Microsoft Visual Studio .Net 7.1" name="GENERATOR">
        <meta content="C#" name="CODE_LANGUAGE">
        <meta content="JavaScript" name="vs_defaultClIEntScript">
        <meta content="http://schemas.microsoft.com/intellisense/IE5" name="vs_targetSchema">
        <script language="Javascript" src="XMLHttp.JS"></script>
        <script language=Javascript>
        <!--
            ///本頁的測試用例
            function Test()
            {
                var tmp = Send(GetAllFormData(),"./test.ASPx");
                document.Form1.UserName.value  = GetXMLNodeValue(tmp,"UserName");
                document.Form1.PassWord.value  = GetXMLNodeValue(tmp,"PassWord");
                document.Form1.EMail.value  = GetXMLNodeValue(tmp,"EMail");
                document.Form1.Question.value  = GetXMLNodeValue(tmp,"Question");
                document.Form1.Answer.value  = GetXMLNodeValue(tmp,"Answer");
            }
        //-->
        </script>
    </HEAD>
    <body MS_POSITIONING="GridLayout" >
        <form id="Form1" method="post" name="Form1">
            <FONT face="新細明體">
                <DIV style="Z-INDEX: 102; LEFT: 192px; WIDTH: 288px; POSITION: absolute; TOP: 64px; HEIGHT: 200px"
                    ms_positioning="FlowLayout">
                    <DIV>用戶名:<INPUT id="UserName" type="text" name="UserName"></DIV>
                    <DIV>密碼:<INPUT id="PassWord" type="passWord" name="PassWord" ></DIV>
                    <div id="HidPass" runat="server" ms_positioning="FlowLayout">
                        確認密碼:<INPUT id="ConPassWord" type="passWord" name="ConPassWord">
                    </div>
                    <DIV>EMail:<INPUT id="EMail" type="text" name="EMail"></DIV>
                    <DIV>密碼提示語:<INPUT id="Question" type="text" name="Question" ></DIV>
                    <DIV>密碼答案:<INPUT id="Answer" type="text" name="Answer" ></DIV>
                    <DIV id="HidSafeCode" runat="server">
                        驗證碼:<INPUT id="CheckCode" type="text" name="CheckCode" ><IMG src="SafeCode.ASPx" border="0">
                    </DIV>
                    <INPUT type="reset" value="Reset" name="reset">
                    <INPUT id="Button3" type="button" value="XML" name="Button3" onclick="Test();" >
                </DIV>
            </FONT>
        </form>
    </body>
</Html>

3.xmlHttp.cs---重載Page類(操作客戶端以XMLHttp發過的請求)
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.XML;
using System.IO;
using System.Collections.Specialized;

namespace Model.Code
{
    /**//// <summary>
    /// xmlHttp---對XmlHttp的操作(繼承自OverridePage類,表示其子類都是對XMLHttp發送過來的數據進行操作)
    /// 冷風.Net,2005/03/26
    /// </summary>
    public class XMLHttp : OverridePage
    {
        public XMLHttp(){}

        /**//// <summary>
        /// 生成XMLDocument對象
        /// 作者:冷風,net,2005/03/26
        /// </summary>
        /// <param name="stream">XML格式的內存塊</param>
        /// <returns>XMLDocument對象</returns>
        protected System.Xml.XmlDocument CreateXMLDocument(System.IO.Stream stream)
        {
            System.Xml.XMLDocument doc = new XMLDocument();
            try
            {
                doc.Load(stream);
            }
            catch
            {
                byte[] buffer = new byte[stream.Length];
                stream.Read(buffer,0,buffer.Length);
                string strXML = System.Text.UnicodeEncoding.Default.GetString(buffer,0,buffer.Length);
                doc.LoadXml(strXML);
            }
            return doc;
        }

        /**//// <summary>
        /// 獲得XMLNode中第一個指定的節點的文本值
        /// 作者:冷風,net,2005/03/26
        /// </summary>
        /// <param name="node">XMLNode對象</param>
        /// <param name="nodeName">要搜索的節點名稱</param>
        /// <returns>節點的值</returns>
        protected string GetXMLNodeValue(XMLNode node,string nodeName)
        {
            XMLNode subNode = node.SelectSingleNode("//"+nodeName);
            return subNode.InnerText;
        }

        /**//// <summary>
        /// 將XMLNode對象轉化為NameValueCollection對象
        /// 作者:冷風,net,2005/03/26
        /// </summary>
        /// <param name="node">XMLNode對象</param>
        /// <returns>NameValueCollection對象</returns>
        protected NameValueCollection CreateNameValueCollectionFromXML(XMLNode node)
        {
            NameValueCollection nvc = new NameValueCollection();
            for(int i=0;i<node.ChildNodes.Count;i++)
            {
                nvc.Add(node.ChildNodes[i].Name,node.ChildNodes[i].InnerText);
            }
            return nvc;
        }

        /**//// <summary>
        ///    為了不返回不必要的數據,必須重載Render方法
        ///    作者:冷風,net,2005/03/26
        /// </summary>
        /// <param name="writer">輸出參數</param>
        protected override void Render(HtmlTextWriter writer)
        {
        }
    }
}

4.test.aspx---對應的tesASPx.htm的請求文件
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.XML;
using System.IO;
using System.Collections.Specialized;

namespace Model.VIP
{
    /**//// <summary>
    /// test 的摘要描述。
    /// </summary>
    public class test : Code.XMLHttp
    {
        private string m_strXML="";
        private void Page_Load(object sender, System.EventArgs e)
        {    
            XMLDocument doc = this.CreateXMLDocument(this.Request.InputStream);
            string userName = GetXMLNodeValue(doc.DocumentElement,"UserName");
            DataSet ds = Code.Users.GetUserInfo(userName);
            //如果存在數值則表明是修改會員信息,否則為新增加
            if(ds!=null && ds.Tables[0].Rows.Count>0)
            {
                m_strXML = ds.GetXML();
            }
            else
            {
                NameValueCollection userInfo = this.CreateNameValueCollectionFromXML(doc.DocumentElement.FirstChild);
                string returnValue = Code.Users.AddUser(userInfo);
                if(returnValue=="OK")
                {
                    m_strXML ="注冊成功!";
                }
                else
                {
                    m_strXML = "注冊失敗 !";
                }
            }
            Response.Write(m_strXML);
        }

        Web Form 設計工具產生的程式碼#region Web Form 設計工具產生的程式碼
        override protected void OnInit(EventArgs e)
        {
            //
            // CODEGEN: 此為 ASP.Net Web Form 設計工具所需的呼叫。
            //
            InitializeComponent();
            base.OnInit(e);
        }
        
        /**//// <summary>
        /// 此為設計工具支援所必須的方法 - 請勿使用程式碼編輯器修改
        /// 這個方法的內容。
        /// </summary><, /SPAN>
        private void InitializeComponent()
        {    
            this.Load += new System.EventHandler(this.Page_Load);

        }
        #endregion
    }
}

個人感覺這麼做,可以方便前台人台與後台人員合作開發時,前台人台可以完全不懂donet就行了,這樣對於前台的如何更改,是否采用該頁都不會影響後台的程式。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved