DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> AJAX的無刷新機制使得在注冊系統中對於注冊名稱的檢測能即時顯示。完成分離篇
AJAX的無刷新機制使得在注冊系統中對於注冊名稱的檢測能即時顯示。完成分離篇
編輯：AJAX詳解     
本文主要實現了在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就行了，這樣對於前台的如何更改，是否采用該頁都不會影響後台的程式。

AJAX詳解
AjaxHelper使用范例
前兩天發布了一個《.Net環境下基於AJax的MVC方案》，沒想到被轉載到CSDN首頁了，呵呵~不
sicp習題試解 (1.8)
; ===============================================
駁“AJAX 的七宗罪
我不帶任何主觀色彩來評一下這個所謂的 “AJax 的七宗罪”。 1、

相關文章

AJAX基礎知識AJAX詳解
小編推薦
ASP.NET 調味品：AJAX 解壓縮軟件在安裝制作領域的增值思考 網友:跟我學 自己實現漢語編程 ASP.NET利用JQuery中的Aajax實現JSON數據後台交互 通過改善架構來提高ASP.Net應用程序的性能 原來JS是如此強悍 ajax經典應用案例 (jsp) C++ 的 MTL 庫 示例（整理 by RobinKin from DevonIT) AptanaIDE中文亂碼的問題及說明解決 asp.netajax中validator的問題
熱門推薦
如何使用Ajax技術開發Web應用程序 sicp習題試解 (1.7) 駁“AJAX 的七宗罪 AJAX 開發的兩種不同的方法 注冊頁面中使用AJAX即時提醒用戶能否注冊成功 編程入門：Pascal語言簡介 自己寫的一個PHP上傳類 Ajax驅動的Web站點 AjaxPro.NET框架數據驗證(Asp.net2.0)
大家都在看
Atlas與URlRewrite融合問題一處 一個簡單的移動端網頁 HTML5 File API改善網頁上傳功能 純CSS3滾動菜單 HTML 5.1學習之新增的14項特性與應用示例 jQuery版仿Path菜單效果下載 怎麼像表格table一樣對層div進行輕松布局 jquery入門必備的基本認識及實例(整理)
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved