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:只刷新局部页面的技术.

JavaWeb——Ajax与MVC学习总结_第1张图片

为什么使用Ajax?

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

无刷新的好处:

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

Ajax作用:

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

使用jquery Ajax实现登录

JavaWeb——Ajax与MVC学习总结_第2张图片

Ajax实例练习:


    

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学习总结_第3张图片

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

所有的通信都是单向的。

互动模式

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

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

JavaWeb——Ajax与MVC学习总结_第5张图片

实例:Backbone

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

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

Web程序的MVC

JavaWeb——Ajax与MVC学习总结_第7张图片

JavaWeb——Ajax与MVC学习总结_第8张图片

MVC编程思路

JavaWeb——Ajax与MVC学习总结_第9张图片

MVC的优点:

提高了代码的重用性。

有利于开发的分工。

各司其职、互不干涉。

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

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

你可能感兴趣的:(▷设计模式/架构)