JavaWeb——Ajax与MVC学习总结


Ajax:

什么是Ajax?

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

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

JavaWeb——Ajax与MVC学习总结

为什么使用Ajax?

无刷新:不刷新整个页面,只刷新局部.

无刷新的好处:

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

Ajax作用:

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

使用jquery Ajax实现登录

JavaWeb——Ajax与MVC学习总结

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三部分之间的通信方式:

JavaWeb——Ajax与MVC学习总结

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

所有的通信都是单向的。

互动模式

接受用户指令时,MVC 可以分成两种方式。一种是通过 View 接受指令,传递给 Controller。JavaWeb——Ajax与MVC学习总结

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

JavaWeb——Ajax与MVC学习总结


实例:Backbone

实际项目往往采用更灵活的方式,以 Backbone.js 为例。
JavaWeb——Ajax与MVC学习总结

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

Web程序的MVC

JavaWeb——Ajax与MVC学习总结

JavaWeb——Ajax与MVC学习总结

MVC编程思路

JavaWeb——Ajax与MVC学习总结

MVC的优点:

提高了代码的重用性。

有利于开发的分工。

各司其职、互不干涉。


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

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

上一篇:mongodb 3.2.4 添加用户


下一篇:springMVC分页,interceptor实现