若只如初見——WEB/BS開發(fā)必備基礎(chǔ)知識(shí)

發(fā)表時(shí)間：2012-5-23

發(fā)布人：葵宇科技

瀏覽次數(shù)：43

疑惑
- 與C/S的不同
- 數(shù)據(jù)傳遞機(jī)制
- WEB特有屬性
- 前臺(tái)與后臺(tái)的定義
示例
- 數(shù)據(jù)傳遞機(jī)制
- Response和Request
- 服務(wù)端控件
- IsPostBack
文尾

疑惑

話說接觸web開發(fā)有一段時(shí)間了，習(xí)慣于以前的C/S，理解起B(yǎng)/S中一些概念還是有些困難，例如最常用的Ispostback、客戶端與服務(wù)端的交互以及ASP.NET中的一些獨(dú)有屬性。

與C/S的不同

B/S（Browser/Server，瀏覽器/服務(wù)器模式），由于瀏覽器是現(xiàn)在最常用的軟件，這種模式統(tǒng)一了客戶端，將系統(tǒng)功能實(shí)現(xiàn)的核心部分集中到服務(wù)器上，簡化了系統(tǒng)的開發(fā)、維護(hù)和使用，瀏覽器通過Web Server同數(shù)據(jù)庫進(jìn)行數(shù)據(jù)交互。C/S（Client/Server，客戶機(jī)/服務(wù)器) ，是大家熟知的軟件系統(tǒng)體系結(jié)構(gòu)，通過將任務(wù)合理分配到Client端和Server端，降低了系統(tǒng)的通訊開銷，需要安裝客戶端才可進(jìn)行管理操作。

C/S和B/S的不同之處還很多，各有優(yōu)劣，在此不一一介紹。從部署上說，都是服務(wù)端/客戶端組成，只不過是一個(gè)是必須和服務(wù)端軟件一一對(duì)應(yīng)，另外一個(gè)的客戶端是瀏覽器而已。但正是這個(gè)貌似簡單的不同，讓安百般理解不通。

數(shù)據(jù)傳遞機(jī)制

這點(diǎn)也是對(duì)web系統(tǒng)中非常重要但是又讓安“迷茫”的一個(gè)原因，C/S的容易理解，數(shù)據(jù)在客戶端形成數(shù)據(jù)包通過協(xié)議傳給服務(wù)端，雖然B/S原理也是如此，但是因?yàn)榍昂笈_(tái)代碼在同一個(gè)界面，也讓俺甚是不解。

web特有屬性

這個(gè)也不用說，什么session、Request、Response、表單、ispostback等。

這些都是想要跨入web開發(fā)必須掌握的基礎(chǔ)知識(shí)，一下用幾個(gè)簡單明了的示例結(jié)合圖片對(duì)這些疑惑稍作解答。

前臺(tái)與后臺(tái)的定義

前臺(tái)與后臺(tái)，這定義在C/S中可木有，因?yàn)槲覀円话阕隼佣荚谕慌_(tái)機(jī)器，理解不出來，在我看來，所謂前臺(tái)就是界面，即以后會(huì)生成html

示例

數(shù)據(jù)傳遞機(jī)制

先看一幅簡單明了的圖片：

其中上面的主機(jī)代表服務(wù)器，下面的顯示器代表瀏覽器，箭頭代表傳遞方向，數(shù)字代表傳遞順序。數(shù)據(jù)傳遞流程是這樣的：

1、首先是用瀏覽器發(fā)出訪問請(qǐng)求，就像是你輸入網(wǎng)址（例如http://www.aiting.tk）請(qǐng)求訪問該網(wǎng)址。

2、然后在服務(wù)器處理該命令，生成html頁返回給瀏覽器。

3、瀏覽器收到html頁后，要進(jìn)行下一步操作，比如說點(diǎn)擊某個(gè)按鈕，把操作及數(shù)據(jù)回發(fā)（下面理解ispostback會(huì)使用到）給服務(wù)器。

4、如果有必要，服務(wù)器判斷是否是回發(fā)信息選擇不同的處理方法，處理完后再向?yàn)g覽器返回一個(gè)html頁。

5、瀏覽器顯示處理后的html頁，至此一個(gè)數(shù)據(jù)傳遞流程完成。

需要說明的是，瀏覽器上顯示的信息和服務(wù)端控件，貌似是你一點(diǎn)就會(huì)有反饋，其實(shí)你看到的只是一個(gè)靜態(tài)的html頁，真正的數(shù)據(jù)和處理都需要服務(wù)器來執(zhí)行。

Response和Request

這兩個(gè)概念也是像安這樣初學(xué)者認(rèn)為難啃的硬骨頭，我們同樣以一幅簡單易懂的圖片來解釋：

左面這幅圖是瀏覽器顯示的靜態(tài)html頁，右面的是服務(wù)器的aspx頁，細(xì)心點(diǎn)從地址欄就能看出來。其實(shí)我們"斷章取義"就能看出這兩個(gè)概念的大致作用。Request（請(qǐng)求）是將信息從瀏覽器發(fā)送給服務(wù)器；Response（響應(yīng)）是將信息由服務(wù)器發(fā)送給給瀏覽器。我們上面的客戶端與服務(wù)端數(shù)據(jù)傳遞流程再解釋一次：

1、首先，瀏覽器輸入想要訪問的地址。

2、服務(wù)器接收到該相應(yīng)，處理后發(fā)送給瀏覽器一個(gè)含有“姓名”、“國家名稱”和“提交”按鈕的html頁面。

3、瀏覽器出現(xiàn)該html頁面后，用戶輸入“Ritcha”和“USA”，點(diǎn)擊“提交”按鈕。

4、服務(wù)端收到回發(fā)的數(shù)據(jù)后，命令頁面顯示“您好，Ritcha，歡迎使用ASP.NET!”。

IsPostBack

IsPostBack，意為瀏覽器回發(fā)給服務(wù)器。在web開發(fā)中，IsPostBack 的使用比不可少，雖然用起來也非常簡單，但是理解起來卻是有點(diǎn)難度，尤其是對(duì)安這用思維邏輯甚是簡單的人。上面提到數(shù)據(jù)在服務(wù)器和瀏覽器之間傳遞時(shí)，服務(wù)端會(huì)判斷是否是回發(fā)信息，進(jìn)而選擇處理的方式，這個(gè)在很多情況下是必要的，例如Page_Load頁面加載，如果每次刷新頁面都需要重新綁定，會(huì)浪費(fèi)不必要的軟硬件資源，這時(shí)可以判定是否是回發(fā)頁面進(jìn)而決定是否重新綁定。下面用簡單的例子說明IsPostBack 的作用。

不使用IsPostBack時(shí)：

前臺(tái)界面：

后臺(tái)代碼：

    protected void Page_Load(object sender, EventArgs e)
    {
                txtUserName.Text = "";//清空用戶名
                txtPWD.Text = "";   //清空密碼
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
            if (txtPWD .Text =="a" && txtUserName .Text=="a")
            {
                    //賬號(hào)密碼均正確則登錄成功
                    Response.Write("登錄成功");}
            else 
            {
                    //否則登錄失敗
                    Response.Write ("登錄失敗");
            }
    }

運(yùn)行結(jié)果：

結(jié)果分析：Page_Load事件會(huì)把用戶名和密碼清空，即使按F5刷新，也會(huì)登錄失敗，這是因?yàn)槊看吸c(diǎn)擊Login按鈕都會(huì)執(zhí)行Page_Load時(shí)間，所以會(huì)一直登錄失敗。

使用 IsPostBack：

前臺(tái)界面相同，后臺(tái)代碼：

    protected void Page_Load(object sender, EventArgs e)
    {
            if (!IsPostBack )//如果不是回發(fā)頁面則執(zhí)行以下代碼
            {
                    txtUserName.Text = "";//清空用戶名
                    txtPWD.Text = "";   //清空密碼
            }
                
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
            if (txtPWD .Text =="a" && txtUserName .Text=="a")
            {
                    //賬號(hào)密碼均正確則登錄成功
                    Response.Write("登錄成功");}
            else 
            {
                    //否則登錄失敗
                    Response.Write ("登錄失敗");
            }
    }

運(yùn)行結(jié)果：

結(jié)果分析：因?yàn)樵?span style="font-size:18px">Page_Load里面加入了IsPostBack驗(yàn)證，首次加載的作用是清空原有的“txtUserName”和“txtPWD”，相當(dāng)于填寫賬戶密碼的界面是回發(fā)頁面，不需要清空用戶名和密碼，所以登錄成功。我學(xué)的時(shí)候教程解釋的是是否第一次加載頁面，實(shí)際上是一樣的：是回發(fā)則證明不是第一次加載，反之，不是回發(fā)說明這是客戶端第一次加載頁面（結(jié)合上面介紹的瀏覽器與服務(wù)器數(shù)據(jù)傳遞流程）。

服務(wù)端控件

上面我們提到，服務(wù)端的控件，只要用戶操作，不管里面有沒有方法體都會(huì)執(zhí)行，還用剛才說明IsPostBack的前臺(tái)界面，后臺(tái)代碼如下：

    protected void Page_Load(object sender, EventArgs e)
    {
            if (!IsPostBack)//如果不是回發(fā)頁面則執(zhí)行以下代碼
            {
                    txtUserName.Text = "";//清空用戶名
                    txtPWD.Text = "";   //清空密碼
            }
            else 
            {
                    //否則登錄失敗
                    Response.Write("登錄失敗");
            }
                
    }
    protected void Button1_Click(object sender, EventArgs e)
    {

    }

運(yùn)行結(jié)果：