自從使用了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("我正在寫部落格園的部落格"); }}
具體詳細的設計思想下次繼續
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
