JavaWeb——Ajax与MVC学习总结
来源:互联网 发布:linux 目录 编辑:程序博客网 时间:2024/05/16 05:14
- Ajax
- 什么是Ajax
- 为什么使用Ajax
- 使用jquery Ajax实现登录
- Ajax实例练习
- 设计模式
- 设计模式的定义
- 设计模式的作用
- MVC设计模式
- MVC设计模式的模块组成
- MVC三部分之间的通信方式
- 互动模式
- 实例Backbone
- Web程序的MVC
- MVC编程思路
- MVC的优点
- Ajax
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学习总结(四十九)——简单模拟Sping MVC
- JavaWeb学习总结(四十九)——简单模拟Sping MVC
- JavaWeb学习总结(四十九)——简单模拟Sping MVC
- JavaWeb学习总结(四十九)——简单模拟Sping MVC
- JavaWeb学习总结(四十九)——简单模拟Sping MVC
- JavaWeb学习总结(四十九)——简单模拟Sping MVC
- JavaWeb学习总结(四十九)——简单模拟Sping MVC
- JavaWeb学习总结——简单模拟Sping MVC
- JavaWeb学习总结(四十九)——简单模拟Sping MVC
- JavaWeb学习总结——MVC(尚硅谷_佟刚老师)
- JavaWeb学习总结——Session总结
- JavaWeb学习总结(一)——JavaWeb开发入门
- JavaWeb学习总结(一)——JavaWeb开发入门
- JavaWeb学习总结(一)——JavaWeb开发入门
- JavaWeb学习总结(一)——JavaWeb开发入门
- JavaWeb学习总结(一)——JavaWeb开发入门
- JavaWeb学习总结(一)——JavaWeb开发入门
- 用qt写出来的一个网络爬虫
- C# 中字符串string和字节数组byte[]之间的转换
- linux执行mysql脚本文件
- ArrayList和LinkedList在性能上优缺点
- empty character constant
- JavaWeb——Ajax与MVC学习总结
- 双向链表
- Windows下Ubuntu16.04双系统的安装及使用
- 传统邮件营销推广,真的过时了?
- 网络信息安全攻防学习平台基础关
- RNN等详解
- 第二章——用Python实现感知器模型(MNIST数据集)
- 添加公司信息-公司宣传型小程序源代码下载1-视频教程24
- oschian---git本地项目上传步骤