ajax实现mvc模式

news/2024/7/3 14:38:14

自从使用了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("我正在写博客园的博客");
    }

}