自从使用了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("我正在写博客园的博客"); } }
具体详细的设计思想下次继续