Ajax的MVC架构设计

最新推荐文章于 2025-08-15 15:42:14 发布

原创最新推荐文章于 2025-08-15 15:42:14 发布 · 613 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax

ajax 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何利用Ajax技术实现MVC（Model-View-Controller）模式，从创建HTML表单实现View层，到编写JavaScript处理请求和响应，再到实现控制逻辑和验证会员身份的Control层，最后通过Servlet实现Model层的业务逻辑。重点在于展示如何整合前端交互和后端处理，以实现高效、灵活的Web应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

利用Ajax实现MVC模式

1）实现View层

创建index.jsp页，在其中放置一个用于收集用户输入会员名和密码的表单。

并将存放在该表单单元格的ID属性设置为login

<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title> 利用Ajax实现MVC模式</title>
<link href="Css/style.css" rel="stylesheet">
<script language="javascript" src="JS/fun.js"></script>
</head>

<body>

<table width="793" height="829" border="0" align="center" cellpadding="0" cellspacing="0" background="images/bg.jpg">
  <tr>
    <td valign="top"><table width="100%" height="309" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="3%" height="206"> </td>
        <td width="20%"> </td>
        <td width="77%"> </td>
      </tr>
      <tr>
        <td height="103"> </td>
        <td valign="top" id="login">
<form name="form1" action="" onSubmit="checkU(form1);return false">
			  <table width="100%"  border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <td height="24">会员名
                    <input name="username" type="text" class="txt_grey" id="username" size="16"></td>
                </tr>
                <tr>
                  <td height="24">密  码
                    <input name="PWD" type="password" class="txt_grey" id="PWD" size="16" onKeydown="if(event.keyCode==13) form1.submit();"></td>
                </tr>
                <tr>
                  <td height="31">
                    <input name="Button" type="button" class="btn_grey" value="注册">
                     
                    <input name="Submit2" type="submit" class="btn_grey" value="登录"> 
					<input name="Submit3" type="reset" class="btn_grey" value="重置"></td>
                </tr>
              </table>
		    </form>		
		</td>
        <td> </td>
      </tr>
    </table></td>
  </tr>
</table>
</body>
</html>

编写javascript文件fun.js ，用于通过XMLHttpResult对象以一部方式发送请求并通过XMLHttpRequest对象的onreadystatechange属性监听更新数据，然后更具实际情况显示赶回的结果

/**
 * Ajax框架
 */    
	var http_request = false;
    function createRequest(url) {
        http_request = false;
        if (window.XMLHttpRequest) {     // Mozilla浏览器
            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) {
                http_request.overrideMimeType('text/xml');     //设置MIME类别
            }
        } else if (window.ActiveXObject) {     // IE浏览器
            try {
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
               } catch (e) {}
            }
        }
        if (!http_request) {
            alert("不能创建XMLHttpRequest对象实例！");
            return false;
        }
        http_request.onreadystatechange = getResult;     //调用返回结果处理函数
        http_request.open('POST', url, true);
		http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		var formData ="";
		var elem = "";
		for(var i=0;i<form1.elements.length;i++){
			element = form1.elements[i];
			if(formData != ''){
				formData += '&';
			}
			formData += element.name+"="+element.value;
		}
        http_request.send(formData);
    }
    function getResult() {
        if (http_request.readyState == 4) {     // 判断请求状态
            if (http_request.status == 200) {     // 请求成功，开始处理返回结果
                deal(http_request.responseText);      //调用deal()方法处理返回结果
            } else {     //请求页面有错误
                alert("您所请求的页面有错误！");
            }
        }
    }
	function deal(result){
			if(result=="err"){
				alert("您输入的会员名称或密码错误，请重新输入！");
			}else{
				login.innerHTML=result;
			}
	}

	//表单验证
	function checkU(myform){
	if(myform.username.value==""){
		alert("请输入会员名!");myform.username.focus();return false;
	}
	if(myform.PWD.value==""){
		alert("请输入密码!");myform.PWD.focus();return false;
	}
	createRequest("loginservlet");
	}

2）实现control层

创建一个类LoginServlet，该类继承HttpServlet类，在其中编写doGet()和doPost()方法，用于调用Model层中的编写check()方法

package com.xhd;

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 LoginServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		String username=new String(request.getParameter("username").getBytes("iso-8859-1"), "utf-8");   //此处需要进行转码，否则将产生中文乱码
		String pwd=new String(request.getParameter("PWD").getBytes("iso-8859-1"), "utf-8");
		DealModel dealModel=new DealModel();
		String result=dealModel.check(username, pwd);
		response.setContentType("text/html");
		response.setCharacterEncoding("utf-8");
		System.out.println("返回结果："+result);
		PrintWriter out = response.getWriter();
		out.print(result);
		out.flush();
		out.close();
	}
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doGet(request,response);
	}
}

3）创建web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" 
	xmlns="http://java.sun.com/xml/ns/j2ee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
	http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
  <servlet>
    <description>This is the description of my J2EE component</description>
    <display-name>This is the display name of my J2EE component</display-name>
    <servlet-name>LoginServlet</servlet-name>
    <servlet-class>com.xhd.LoginServlet</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>LoginServlet</servlet-name>
    <url-pattern>/loginservlet</url-pattern>
  </servlet-mapping>
</web-app>

4)实现Model层

创建一个类DealModel,在其中编写用于验证会员身份的方法check().

package com.xhd;

public class DealModel {
	public String check(String username,String pwd){
		String result="";
		System.out.println(username);
		if(username.equals("mr")){
			if(pwd.equals("mrsoft")){
				result="登录成功！<br>当前登录会员：<br>"+username;
			}else{
				result="err";
			}
		}else{
			result="err";
		}
		return result;
	}

}