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学习总结的更多相关文章

  1. ASP.NET MVC学习之Ajax(完结)

    一.前言 通过上面的一番学习,大家一定收获不少.但是总归会有一个结束的时候,但是这个结束也意味着新的开始. 如果你是从事ASP.NET开发,并且也使用了第三方控件,那么一定会觉得ASP.NET开发aj ...

  2. ASP.NET MVC 学习笔记-7.自定义配置信息 ASP.NET MVC 学习笔记-6.异步控制器 ASP.NET MVC 学习笔记-5.Controller与View的数据传递 ASP.NET MVC 学习笔记-4.ASP.NET MVC中Ajax的应用 ASP.NET MVC 学习笔记-3.面向对象设计原则

    ASP.NET MVC 学习笔记-7.自定义配置信息   ASP.NET程序中的web.config文件中,在appSettings这个配置节中能够保存一些配置,比如, 1 <appSettin ...

  3. 转:攻击JavaWeb应用[5]-MVC安全

    转:http://static.hx99.net/static/drops/tips-347.html 攻击JavaWeb应用[5]-MVC安全 园长 · 2013/07/25 13:31 注:这一节 ...

  4. MVC学习系列4--@helper辅助方法和用户自定义HTML方法

    在HTML Helper,帮助类的帮助下,我们可以动态的创建HTML控件.HTML帮助类是在视图中,用来呈现HTML内容的.HTML帮助类是一个方法,它返回的是string类型的值. HTML帮助类, ...

  5. ASP.NET MVC学习之视图篇(2)

    继ASP.NET MVC学习之视图(1)学习 4.HTML辅助器 虽然在ASP.NET MVC中我们已经摆脱了ASP.NET的控件,但是对于页面中需要循环标签的情况依然还是存在,可能很多人认为用for ...

  6. ASP.NET MVC学习之过滤器篇(2)

    下面我们继续之前的ASP.NET MVC学习之过滤器篇(1)进行学习. 3.动作过滤器 顾名思义,这个过滤器就是在动作方法调用前与调用后响应的.我们可以在调用前更改实际调用的动作,也可以在动作调用完成 ...

  7. ASP.NET MVC学习系列(二)-WebAPI请求

    继续接着上文 ASP.NET MVC学习系列(一)-WebAPI初探 来看看对于一般前台页面发起的get和post请求,我们在Web API中要如何来处理. 这里我使用Jquery 来发起异步请求实现 ...

  8. ASP.NET MVC学习系列(二)-WebAPI请求(转)

    转自:http://www.cnblogs.com/babycool/p/3922738.html 继续接着上文 ASP.NET MVC学习系列(一)-WebAPI初探 来看看对于一般前台页面发起的g ...

  9. Spring MVC 学习总结(九)——Spring MVC实现RESTful与JSON(Spring MVC为前端提供服务)

    很多时候前端都需要调用后台服务实现交互功能,常见的数据交换格式多是JSON或XML,这里主要讲解Spring MVC为前端提供JSON格式的数据并实现与前台交互.RESTful则是一种软件架构风格.设 ...

随机推荐

  1. TurtleBot3 Waffle (tx2版华夫)(7)底盘测试

    说明:opencr本身带有自测底盘功能,通过按opencr的sw1和sw2来自检底盘是否正确安装和运行: 7.1.前进测试 1)测试前,先把小车架空,轮子不要着地: 2)接好电源后,打开opencr的 ...

  2. spark常用提交任务的基本的参数配置

    #!/bin/bash #队列名 根据yarn的队列提交 realtime_queue=root #提交的任务名 my_job_name="OrderQZ" spark-shell ...

  3. Head First 设计模式 - 01. 策略 (Strategy) 模式

    当涉及到"维护"时,为了"复用"目的而使用继承,结局并不完美 P4 对父类代码进行修改时,影响层面可能会很大 思考题 利用继承来提供 Duck 的行为,这会导致 ...

  4. apply 和 call的用法、区别

    1.JavaScript中函数是对象的方法,如果一个函数不是js对象的方法那一定是全局对象的函数,每个函数的对象都有apply和call方法,即每个对象都有call and apply apply:调 ...

  5. 聊聊并发,进程通信方式,go协程简单应用场景

    开篇提问 知道并发,并行,线程,协程概念吗?或者知道大概含义吗? 有线程为什么还要有协程?区别是什么? 『进程』通信方式知道几种?有没有超过3种? golang『协程』通信方式推荐? 使用并发的目的是 ...

  6. UnityToLaya小插件-找出空格并替换

    unity导出的文件中经常会出现带有空格的节点或者文件夹 而这些空格在本地开发测试过程中不会出现,当这些带有空格路径的文件需要放到网络上时,就出现问题了 所以这里写了一个简单的查找并清理空格的插件, ...

  7. Vue 组件内滚动条 滚到到底部

    因为在vue中,某个组件内 使用scrollTop赋值 滚动条没有变化 使用scrollTo 也不行(window.scorllTo 或者dom.scrollTo) 所以可以考虑使用投机取巧的办法: ...

  8. Flutter 基础组件:单选框和复选框

    前言 Material组件库中提供了Material风格的单选开关Switch和复选框Checkbox,虽然它们都是继承自StatefulWidget,但它们本身不会保存当前选中状态,选中状态都是由父 ...

  9. CTFshow-萌新赛逆向_签退

    查看题目信息 下载re3.pyc文件 使用uncompyle把re3.pyc反编译为re3.py uncompyle6 re3.pyc > re3.py 查看re3.py文件 # uncompy ...

  10. 【葵花宝典】lvs+keepalived部署kubernetes(k8s)高可用集群

    一.部署环境 1.1 主机列表 主机名 Centos版本 ip docker version flannel version Keepalived version 主机配置 备注 lvs-keepal ...