`
lancelot_WT
  • 浏览: 4652 次
  • 性别: Icon_minigender_1
  • 来自: 丽江
文章分类
社区版块
存档分类
最新评论
阅读更多

AJAX和MVC总结



总结时间:2010年10月19日   总结人:吴同    指导老师:熊向军


      http协议是Web应用中的主要协议,而http协议是基于请求响应模型的。客户端向服务器发送一个请求,请求头包含请求的方法、 地址、客户端信息等等。服务器则以一个状态行作为响应,相应的内容包成功或者错误编码加上包含服务器信息等等。 由于http协议具有上述特点,客户端每次更新信息都必须向服务器发送请求,收到信息后更新整个页面。

AJAX:

      如果一个网页有大量信息,而客户端只更新了其中的一小部分,服务器返回响应更新了整个页面,而其中大部分内容和之前的都一样,造成了时间和流量的浪费。可不可以只刷新需要刷新的部分,不用刷新整个页面呢?AJAX为我们提供了这种便利。 AJAX即异步JavaScript和XML技术,核心在于使用XMLHTTPRequest对象发送异步请求。主要有三个流程:

  1.  创建异步请求对象:创建一个XMLHTTPRequest对象,用来发送异步请求。需要注意的是不同浏览器有不同的创建方法,在创建前需要判断一下浏览器的类型,调用合适的方法。
  2. 编写回调方法:服务器返回一个结果,将结果显示在页面的哪个位置、显示返回结果中的哪些信息等等体现在这个方法中,即服务器返回结果处理方法。首先要通过 调用异步请求对象的readyState 和status两个函数看服务器响应的状态 。readyState 有5个状态 ,其中返回0表示open函数已经调用,返回1表示请求已经接收但还没发送数据,2表示服务器正在处理数据,3表示已经有部分数据返回,4表示服务器已经完成响应; status则有许多种状态,最常见的有:404——网页未找到,400——客户端出错,500——服务器出错,200——一切正常。判断完后,应答正常则可以得到服务器返回的数据,显示到页面上。
  3. 发送异步请求:即向服务器发送请求。首先得到异步请求;然后绑定回调方法(第二步编写的函数) ,<异步请求对象.onreadystatechange方法=回调函数名;>这样绑定,注意在回调函数名后不加“()”;再选择发送方法(post/get)和发送URL,<异步请求对象名.open(“POST/GET”,"servlet/jsp页面",true)>,true表示是异步请求;然后编写服务器的解码格式<异步请求名.setRequestHeader(" Content-Type" "application/x-www-formurlencoded ")>;最后再发送参数即可。
  4. 代码示例:
    
    <script type="text/javascript"> 
    //定义了XMLHttpRequest对象 var request; //设置全局变量,方便使用 
    //创建XMLHttpRequest对象函数 
    function getRequestObject() { 
         if (window.ActiveXObject) { request=new ActiveXObject      ("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) {
     request=new XMLHttpRequest(); } else
     { window.alert("你的浏览器不支持XMLHTTPRequest,将无使用AJAX功能!");} 
    }
     //回调方法实现:显示一个对话框,显示返回的文本内容 
    function processResult() {
     if ((request.readyState == 4) && (request.status == 200)) {
     alert("服务器返回的是: "+request.responseText); } 
    }
     //发送请求,绑定回调方法
     function sendRequest() { 
    //创建XMLHTTPRequest对象 
    getRequestObject();
     //绑定回调方法, 
    request.onreadystatechange=processResult; 
    //发送请求 
    // request.open("GET", "index.jsp", true);
     //发送Post请求 request.open("POST", "servlet", true); request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
    var userName=document.getElementById("para").value; 
    //将请求参数发送上去
     request.send("para="+para); 
    } 
    </script> 
    
    
     

  AJAX的优点优点在于可以异步传输数据,用户的操作不会被打断,减少数据的的冗余,让界面更加的精美,有更多人性化的操作。缺点是不能使用浏览器的后退功能。

 

 

 

MVC:

  • MVC是Model、view、control的缩写,Web制作中的一种思想方法。

     

  • 考虑到网页制作中程序和界面分离的情况,把请求响应的过程分为三个模块:1、客户端是界面显示模块;2、服务器数据处理和控制模块;3、是数据存放模块。

    这样美工、程序员、数据库管理员只需要做好自己那块即可,如改变网页的外观不需要修改程序,而修改程序不需要改变数据库,是低耦合的一种体现。
  • html和jsp生成动态网页,显示页面;servlet负责转发到对应得Action,进行控制;JavaBean(pojo和dao)负责数据模块。

     

  • 对XML文件配置:

  • <servlet-name>ControlServlet</servlet-name>
    	<servletclass>cn.wutong.servlet.ControlServlet</servlet-class>
    <!-- 将具体Action名字和全类名配置到Servlet参数中 -->
         <init-param>
          	<param-name>ActionName</param-name>
    	    	<paramvalue>cn.wutong.action.TheActionImpClassName</param-value>
         </init-param>
      </servlet>
    	<servlet-mapping>
          <servlet-name>ControlServlet</servlet-name>
          <url-pattern>*.do</url-pattern>
      </servlet-mapping>

     

     

这份总结写得比较仓促,不足之处还请指出~

 

  • 大小: 16.3 KB
分享到:
评论

相关推荐

    mvc ajax 增删改

    总结,此压缩包提供了一个基于ASP.NET MVC和Ajax的CRUD操作示例,对于想要学习或提升Web开发技能的程序员来说,这是一个宝贵的资源。通过阅读和实践,可以深入了解MVC架构与Ajax技术的结合,以及如何利用它们创建...

    asp.net mvc ajax demo

    **ASP.NET MVC与AJAX详解** ASP.NET MVC(Model-...总结来说,ASP.NET MVC结合AJAX技术,可以让开发者构建出高度交互和性能优越的Web应用。通过理解MVC架构和熟练运用AJAX,可以极大地提升Web应用的用户体验和效率。

    MVC Jquery Ajax例子

    这个例子结合了MVC架构模式、JQuery库、Ajax技术,实现了用户登录验证和无刷新分页功能。数据库采用SQL Server 2005,利用其强大的数据存储和管理能力。无刷新分页提升了用户体验,JQuery简化了前端代码,而MVC结构...

    asp.net mvc ajax 例子

    总结一下,ASP.NET MVC与Ajax的结合使我们能够构建动态、交互性强的Web应用。通过创建特定的Controller动作并使用JavaScript进行Ajax调用,我们可以实现页面的部分刷新,从而提高用户体验。在`ajaxMvcApplication`...

    基于MVC用JSPServlet实现JPetStore实验报告+使用AJAX和jQuery改善用户体验实验报告.doc

    总结来说,这个实验涵盖了MVC架构下JSP和Servlet的使用,以及如何通过AJAX和jQuery优化用户体验。通过实践,学生能够更好地理解Web应用的开发流程,掌握Java后端服务的编写,以及前端与后端的交互方式,同时体验到...

    jquery_ajax的mvc实现

    总结,jQuery AJAX在MVC架构中的实现涉及前端的jQuery代码与后端的服务器脚本协同工作。前端负责发起请求,处理响应,更新用户界面;后端负责处理请求,与数据模型交互,然后返回数据。通过这种方式,我们可以构建出...

    mvc4小项目 分页 ajax bootstrap

    总结起来,这个项目是一个利用ASP.NET MVC 4框架开发的Web应用,它结合了分页功能、Ajax异步请求和Bootstrap前端框架,提供了良好的用户体验。同时,它也展示了如何在VS2012环境下与SQL Server 2008 R2数据库进行...

    spring3 mvc 用 jquery ajax 交互

    总结,结合Spring MVC的Controller和jQuery的AJAX功能,开发者可以构建出更加动态、响应式的Web应用。这种交互方式使得前端可以灵活地与后端进行数据交换,而无需每次都刷新整个页面,提升了用户体验。在实际开发中...

    WebService和Ajax总结

    **WebService和Ajax总结** 在IT领域,WebService和Ajax是两种重要的技术,它们分别在Web应用程序的交互和用户体验提升上发挥了重要作用。本篇文章将全面探讨这两种技术的原理、应用及其在.NET环境下的实现。 **一...

    一个实用了spring mvc和ajax异步请求的例子

    总结起来,这个"一个实用了spring mvc和ajax异步请求的例子"涵盖了Web开发中的重要概念,包括Spring MVC的Controller设计、RESTful API的实现以及Ajax的异步数据交互。这样的组合使得Web应用更加动态,用户体验更佳...

    spring mvc+ajax 文件上传

    总结,结合Spring MVC和Ajax实现的文件上传方案,能够提供流畅、高效的用户体验,同时保持良好的控制层和业务处理逻辑。通过对前端和后端的合理设计,我们可以创建一个安全、用户友好的文件上传系统。在实际项目中,...

    jsp+servlet+javabean+ajax MVC模式,增删改查,数据分页显示

    总结来说,这个项目展示了如何使用`JSP+Servlet+JavaBean+Ajax`实现基于MVC模式的Web应用,包括基本的数据操作、分页显示以及文件上传功能。对于初学者,这样的实践能够帮助理解Web开发的基本流程和关键组件,同时...

    基于MVC和AJAX的Web开发模型的设计与应用.pdf

    总结来说,基于MVC和AJAX的Web开发模型是一种优化的开发策略,它结合了MVC的结构优势和AJAX的交互优势,能够提高Web应用的响应速度和用户体验,同时降低服务器负载。在实际项目中,通过合理设计和实施这一模型,可以...

    Spring mvc+Ajax用户登录增删改查功能

    总结,Spring MVC和Ajax的结合使用,为Web开发带来了高效的数据交互和良好的用户体验。通过理解和实践这个小项目,开发者能够深入理解这两种技术的协同工作方式,为后续的Web开发打下坚实的基础。

    MVC基础总结

    - **JavaScript和Ajax改进**: 提供了更好的JavaScript和Ajax支持,使得前后端交互更加顺畅。 - **默认启用了客户端验证**: 在客户端直接进行表单验证,提高了用户体验。 - **远程验证**: 允许使用远程服务进行...

    SpringmvcAjax

    总结,"SpringmvcAjax"涵盖了如何在Spring MVC环境中使用Ajax进行前后端通信的核心概念。从创建Ajax请求,到控制器处理请求,再到数据的序列化和反序列化,以及错误处理和UI更新,这些都是开发者在实际工作中需要...

    spring mvc+ajax 导出导入xml文件功能实现和整理

    总结来说,本文详细介绍了Spring MVC与Ajax技术结合使用来实现文件导入导出功能的过程,重点强调了在前后端交互过程中对于文件类型校验、上传方式选择以及安全性考虑的重要性,并且对相关代码段进行了分析和讲解。...

    mvc中ajax总结及运用

    ajax的基本运用和js的复习,能够实现一些很好的效果,没有用过的朋友可以用用

    使用了1年Ajax开发项目后的总结

    在一年的项目开发中,我不断学习和实践,逐步掌握了如何有效地利用Ajax、JSP、Servlet和Struts构建高效、可维护的Web应用。在处理复杂的业务逻辑和用户交互时,这些技术的结合提供了强大的工具。同时,我也认识到...

    Spring3MVC+ajax

    总结,Spring3 MVC和Ajax的结合为Web开发提供了强大的工具,实现了高效、动态的页面交互。通过学习和实践,开发者可以更好地利用这些技术来构建现代化的Web应用程序。对于SProject中的具体实现,可以通过阅读源代码...

Global site tag (gtag.js) - Google Analytics