ajax實現mvc模式

來源:互聯網
上載者:User

自從使用了SHH2的mvc模式後現在喜歡什麼都搞個mvc模式,根據mvc的架構確實不錯

在ajax中實現mvc模式:

M(模型):由代表格服務器端響應的對象充當,模型複雜從伺服器讀取資料,並負責通知控制器將資料更新(一般由XMLHttpRequest對象的responseText或responseXML充當)

V(視圖):通常由html頁面的DOM元素充當,這些元素負責顯示模型中的資料,並且讓使用者觸發事件以驅動事件

C(控制層):有js的事件處理函數充當,事件處理函數控制響應視圖的事件,並將模型的改變動態載入到html頁面中

 

而為了讓Ajax保持較好的MVC架構,通常按照下面的規則幹活:

1.將js指令碼單獨寫在一個.js檔案中,然後在需要的頁面中進行引入

2.不要將事件處理函數綁定到html頁面的元素屬性中,即不要在元素的屬性中添加onclick等事件,而是在js代碼中進行綁定,即綁定到DOM對象的屬性中

3.將回呼函數中執行的動態更新html頁面的指令碼單獨寫成一個js方法,而不直接寫到事件處理函數中

 

下面代碼示範一個簡單實現mvc:

頁面:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>mvcTest.html</title>    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    <!-- 引入js檔案 -->    <script type="text/javascript" src = "js/mvc.js"></script>  </head>  <body>    <div id = "show"></div>    <input type = "button" name = "test" id = "test" value = "提交">  </body></html>

js:關於XMLHttpRequest的處理詳細見http://www.cnblogs.com/shenliang123/archive/2012/05/13/2498524.html

//建立XMLHttpRequest對象var objXMLHttp;function createXMLHttpRequest(){    if(window.XMLHttpRequest){        objXMLHttp = new XMLHttpRequest();    }    else{        var MSXML = ['MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP'];        for(var i = 0; n< MSXML.length; i++){            try{                objXMLHttp = new ActiveXObject(MSXML[i]);                break;            }catch(e){                alert("建立XMLHttpRequest對象失敗");            }        }    }    }//為test綁定事件處理函數document.getElementById("test").onclick = sendRequest;function sendRequest(){    createXMLHttpRequest();    alert(objXMLHttp);    var url = "MVCServlet";    objXMLHttp.open("POST", url, true);    //設定訊息要求標頭    objXMLHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");    //指定響應函數    objXMLHttp.onreadystatechange = process;    //發送請求    objXMLHttp.send(null);}/** * process()為控制器函數 */function process(){    if(objXMLHttp.readyState == 4){        if(objXMLHttp.status == 200){            //調用視圖函數而不是直接寫在控制函數中            show(objXMLHttp.responseText);        }    }}/** * 視圖函數 */function show(content){    document.getElementById("show").innerHTML = content;}

MVCServlet:

package xidian.sl.ajax;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class MVCServlet extends HttpServlet {    public void doGet(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        doGet(request, response);    }    public void doPost(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        response.setContentType("text/html");        request.setCharacterEncoding("utf-8");        response.setCharacterEncoding("utf-8");        PrintWriter out = response.getWriter();        out.print("我正在寫部落格園的部落格");    }}

 

具體詳細的設計思想下次繼續

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。