JavaWeb——Ajax与MVC学习总结

2021/6/1 12:24:16

编程Tag： ajax view 设计模式 MVC javaweb pwd uname

本文主要是介绍JavaWeb——Ajax与MVC学习总结，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

- - Ajax:
    - 什么是Ajax?
    - 为什么使用Ajax?
    - 使用jquery Ajax实现登录
    - Ajax实例练习：
  - 设计模式
    - 设计模式的定义：
    - 设计模式的作用:
  - MVC设计模式
    - MVC设计模式的模块组成：
    - MVC三部分之间的通信方式：
    - 互动模式
    - 实例：Backbone
    - Web程序的MVC
    - MVC编程思路
    - MVC的优点：

Ajax:

什么是Ajax?

Ajax(Asynchronous JavaScript and XML),其中Asynchronous 是异步的意思。

Ajax:只刷新局部页面的技术.

这里写图片描述

为什么使用Ajax?

无刷新：不刷新整个页面，只刷新局部.

无刷新的好处：

只更新部分页面，有效利用带宽
提供类似C/S的交互效果，操作更方便

Ajax作用：

实现即时检查Email是否可用
实现无刷新的用户登录
实现搜索自动提示

使用jquery Ajax实现登录

这里写图片描述

Ajax实例练习：

<script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
        //作业面局部刷新，不做页面跳转的时候，推荐使用ajax
            $("#login").click(function(){
                //点击按钮实现登录功能
                /* $.ajax({
                    type:'post', //type：请求方式，get,post
                    url:'login.action',   //要访问的后台地址
                    data:{
                        'uname':$("#uname").val(),
                        'pwd':$("#pwd").val()
                    },
                    success:function(result) {
                        if(result=='1') {
                            //1.welcome
                            location.href="welcome.jsp";
                        } else {
                            //2.login
                            $("#tip").show();
                        }
                    }
                }); */
                /* $.post('login.action',{
                    'uname':$("#uname").val(),
                    'pwd':$("#pwd").val()
                },function(result){
                    //回调函数：当后台成功响应结果时，会自动调用
                    if(result=='1') {
                        //1.welcome
                        location.href="welcome.jsp";
                    } else {
                        //2.login
                        $("#tip").show();
                    }
                }); */
                $.get('login.action?uname='+$("#uname").val()+'&pwd='+$("#pwd").val(),function(result){
                    //回调函数：当后台成功响应结果时，会自动调用
                    if(result=='1') {
                        //1.welcome
                        location.href="welcome.jsp";
                    } else {
                        //2.login
                        $("#tip").show();
                    }
                });
            })
        })
    </script>

body之中的内容：

  <body>
    <table>
        <tr>
            <td>用户名：</td>
            <td>
                <input type="text" id="uname">
            </td>
        </tr>
        <tr>
            <td>密码：</td>
            <td>
                <input type="password" id="pwd">
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="button" value="登录" id="login">
            </td>
        </tr>
    </table>
    <span id="tip" style="color: red;display: none;">用户名或密码错误</span>
  </body>

LoginServlet.java中的doPost（）方法：

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        PrintWriter out = response.getWriter();
        String uname=request.getParameter("uname");
        String pwd=request.getParameter("pwd");
        System.out.println(uname);
        //1.登录成功
        //2.登录失败
        if("admin".equals(uname)&&"123".equals(pwd)) {
            //welcome
            out.print("1");
        } else {
            //login
            out.print("2");
        }
        out.flush();
        out.close();
    }

设计模式

设计模式的定义：

是一套被反复使用，多数人知晓的、代码设计经验的总结。

模式必须是典型问题（不是个别问题）的解决方案。

设计模式的作用:

解决一类问题的成功经验。

是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。

MVC设计模式

MVC模式的意思是，软件可以分成三个部分。
即：

模型 —– Model —- JavaBean —数据保存
视图 —– View —- JSP —用户界面
控制器 —– Controller —- Servlet —业务逻辑

MVC设计模式的模块组成：

模型：代表应用程序状态和业务逻辑

视图：提供可交互的客户界面，向客户显示模型数据

控制器：根据客户的请求来操纵模型，并把结果经由视图展现给客户。

MVC三部分之间的通信方式：

这里写图片描述

View 传送指令到 Controller
Controller 完成业务逻辑后，要求 Model 改变状态
Model 将新的数据发送到 View，用户得到反馈

所有的通信都是单向的。

互动模式

接受用户指令时，MVC 可以分成两种方式。一种是通过 View 接受指令，传递给 Controller。这里写图片描述

另一种是直接通过controller接受指令。

这里写图片描述

实例：Backbone

实际项目往往采用更灵活的方式，以 Backbone.js 为例。
这里写图片描述

用户可以向 View 发送指令（DOM 事件），再由 View 直接要求 Model 改变状态。
用户也可以直接向 Controller 发送指令（改变 URL 触发 hashChange 事件），再由 Controller 发送给 View。
Controller 非常薄，只起到路由的作用，而 View 非常厚，业务逻辑都部署在 View。所以，Backbone 索性取消了 Controller，只保留一个 Router（路由器）。

Web程序的MVC

这里写图片描述

MVC编程思路

这里写图片描述

MVC的优点：

提高了代码的重用性。

有利于开发的分工。

各司其职、互不干涉。

MVC参考阮一峰博主：MVC，MVP 和 MVVM 的图示
原文地址：

http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html

这篇关于JavaWeb——Ajax与MVC学习总结的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

JavaWeb——Ajax与MVC学习总结

Ajax:

什么是Ajax?

为什么使用Ajax?

使用jquery Ajax实现登录

Ajax实例练习：

设计模式

设计模式的定义：

设计模式的作用:

MVC设计模式

MVC设计模式的模块组成：

MVC三部分之间的通信方式：

互动模式

实例：Backbone

Web程序的MVC

MVC编程思路

MVC的优点：

相关编程文章