zoukankan      html  css  js  c++  java
  • JavaWeb——Ajax与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

  • 相关阅读:
    23
    关系数据库范式
    组合
    排列
    bfs_迷宫求最短路径
    dfs-求连通块
    dfs_部分和问题
    线程
    http://m.blog.csdn.net/article/details?id=51699295
    jquery 页面多个倒计时
  • 原文地址:https://www.cnblogs.com/aixing/p/13327710.html
Copyright © 2011-2022 走看看