`
狂奔DE蜗牛
  • 浏览: 15561 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

AJAX基础和MVC个人总结

阅读更多

  近期一直在学习WEB方面的知识,渐渐的开始接触并熟悉一些网页设计方面的技术和思想:CSS,JS,JSP,AJAX,这些都是一个java网页编程者必须熟悉并且精通的技术,现在对近两天学习的AJAX和MVC做一个简单的总结。

  一  AJAX部分

  1.首先来介绍一些AJAX技术吧,说到底AJAX也不能称得上一门真正的技术,它其实就是某些技术的综合利用,包含了JS,XMLRequest异步请求,CSS,DOM组件操作以及XML,HTML语言等等。它使用XMLRequest异步请求对象进行数据的读取传输,通过DOM组件的操作来刷新网页的内容。当你注册用户时,如何神奇的不用刷新网页就能在数据库中查找出这个用户名是否已注册,在你使用百度搜索是,如何实时的将你要搜索的内容用下拉框显示出来,这些都是AJAX的应用,不算很神奇,但足够的神秘。

 2. 如何来实现AJAX技术,即如何创建和使用XMLRequest异步请求对象,才是他神秘的地方。传统的WEB技术就是简单的请求处理,而AJAX打破了这种束缚,它通过获取网页中的数据然后通过AJAX代码块进行处理来局部刷新这个网页,并不是一个网页的跳转,这些都归功于XMLRequest,下面来具体说明其实现:

 要使用异步请求对象,当然首先要有一个对象,显然我们需要去创建这样一个对象,下面给出创建异步请求对象的代码:

写道
var request;
function createRequest(){
//判断客户端使用的浏览器是IE内核还是Netscape。
if(window.ActiveXObject){
request = new window.ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
request = new XMLHttpRequest();
}else{
window.alert("您使用的浏览器内核不支持AJAX,请更换浏览器!");
}
}

  

首先我们要知道目前的主流浏览器有两种 IE和Firefox,首先要判断用户使用的是何种浏览器,然后根据浏览器创建XMLRequest对象。

然后是从网页中获取数据并且处理数据。这些都是XMLRequest完成的,接下来要写这段代码,在写之前要考虑下(当然这是学习后才知道),当这些数据处理后,如何显示这些返回的信息呢!这就是问题所在了,所以要在此之前编写回调函数,下面给出这段代码:

写道
//第二步:编写回调函数
function processResult(){
//判断当前请求对象的状态是否已经执行完,并执行后页面的状态是否是200,200表示OK。
//异步请求对象的状态有5个,0表示为初始化,1表示开始载入,2.表示载入完成,3表示正在交互执行,4表示请求处理已经完成。
if(request.readystate == 4 && request.status == 200){
//输出服务器返回的信息
alert("服务器返回的信息是:"+request.responseText);
//将服务器返回的信息显示到DIV上
document.getElementById("divMessage").innerHTML = request.responseText;
}
}

//第三步:编写发送请求函数
function sendRequest(){
//创建异步请求对象
createRequest();
//绑定回调函数,必须要在open前绑定。
request.onreadystatechange = processResult;
//开始发送请求了,HTML发送请求的方式有两种:get和post.
//get请求的方式,如果要使用异步请求将第三个参数设置为true,否则为false即可
//request.open("get","validateUserServlet?userName="+userName,true);
//如果使用的是get方式发送的请求,再最后的时候必须加上request.send(null);
//post请求方式
request.open("post","validateUserServlet",true);
//使用post方式提交的时候一定要加上下边语句
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=gbk");
//获取用户输入的用户名
var userName = document.getElementById("userName").value;
//把用户名发送给服务器
request.send("userName="+userName);
}

     回调函数的设置是通过onreadystatechange属性来实现的,还有注意向服务器发送数据的格式。接下来就是在servlet中对得到的数据进行处理后然后返回,那部分代码完全由自己去发挥了。

   对于AJAX中要注意的的,个人认为有下面几个方面:

  首先对于XMLRequest异步请求对象的一些属性和方法要熟悉,比如readyState有四个返回值

           0 = uninitialized

           1 = loading

           2 = loaded

           3 = interactive

           4 = complete

Status返回的是服务器的状态,200代表服务器完成处理。onreadystatechange就是指回调函数。open(method,url,async),method是指表单的提交的方法,有get和post两种方法,当要发送的数据大于

512字节时,最好使用post方法,使用post方式时一定要在后面带上request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");这段代码。async有true和false两个值,使用true代表使用的是异步请求方式,就是发送数据后不需要响应就可以继续执行。

 以上就是关于AJAX部分的总结。

 二  MVC部分

  总的来说,MVC是一种模式设计思想,模型(Model),视图(View)和控制Controller)。MVC模式的目的就是实现Web系统的职能分工。Model层实现系统中的业务逻辑,通常能用JavaBean或EJB来实现。View层用于和用户的交互,通常用JSP来实现,Controller层是Model和View之间沟通的桥梁,他能分派用户的请求并选择恰当的视图以用于显示,同时他也能解释用户的输入并将他们映射为模型层可执行的操作。

 MVC主要是将一个项目分离成三个部分,三个层各司其职,每个人只需要完成自己要完成的部分,很多时候我们写代码到一半时候发现要添加某些东西,这时候很容易就牵一发而动全身,然而MVC模式中如果某些需求发生改变,只需要每个人修改自己相应的代码块,而不用去管其他层的代码。

   在WEB开发方面,jsp,html页面属于我们要给用户show的,即view,而那些servlet就是控制器,它接收请求,将数据封装成数据模型并且对这些模型进行处理,Model就是我们对数据库的操作,从数据库中取出数据,修改数据库内容。我们的每一个请求都通过一个servlet来根据请求的类型生成相应的servlet,即将以前所有的servlet包中的类综合起来,这些类都由我们页面发送的请求来生成,这些类的生成我们来通过一个ActionFacrory来实现。

下面给出生成servlet的代码:

写道
package cn.netjava.action;
/**
*命令对象工厂类实现
*根据命令名字,创建命令对象
*/
public class ActionFactory {
//单实例访问方法
public static ActionFactory getIns(){
if(null==ac){
ac=new ActionFactory();
}
return ac;
}

/**
* 根据具体的Action类名字创建Action对象
* @param actionName:具体的Action类全名
* @return :Action类型对象
*/
public Action getAction(String actionClass) {
Action actionInstance = null;
try {
Class c=Class.forName(actionClass);
actionInstance = (Action) c.newInstance();
} catch (Exception e) {
e.printStackTrace();
}
return actionInstance;
}
//不需要创建对象
private ActionFactory() { }
private static ActionFactory ac=null;
}

 

Action接口的定义如下:

写道
public interface Action {
/**
* 所有的具体Action实现这个接口
* @param request:请求对象
* @param response:应答对象
* @return :结果页面
*/
public String execute(HttpServletRequest request, HttpServletResponse response);

}

 

通过String来返回要跳转的页面。之后去通过这个ActionFactory来处理请求。

对于MVC经典设计模式,个人也是刚刚接触到,还要在以后的使用中深入的理解。对于一种思想关键的是要去理解,并在以后遇到一个问题去分析它的过程中去运用你所掌握的思想,而不是为了运用这种思想去刻意编写那种代码。

分享到:
评论

相关推荐

    mvc ajax 增删改

    Mvc + Ajax 增删改Mvc + Ajax 增删改 有库下载直接运行,如果好用,记得评论哈

    基于Ajax的新MVC框架的研究与实现

    本文将Ajax技术与MVC模式紧密结合,设计了一个新的MVC框架。应用该框架后,客户端请求基本都是Ajax请求。本文首次采用了Container这一概念,并提出了Container树结构信息的表示法,设计了针对该表示法的解析及生成算法。...

    mvc+(Ajax)分页条

    mvc+(Ajax)分页条实现无刷新页面删除

    jquery.ajax 传参数到mvc的action

    jquery.ajax 传参数到mvc的action

    Mvc Ajax 上传文件

    Mvc Ajax 上传文件 Mvc Ajax 上传文件 Mvc Ajax 上传文件 Mvc Ajax 上传文件 资源来自于网络 经过本人处理 欢迎大家交流 QQ574311505

    MVC示例运用ajax

    简单的MVC运用示例,有需要的可以参考下,有关于ajax的一些运用,仅供参考!!!!

    ajax应用个人总结

    ajax应用个人总结ajax应用个人总结

    ajax 基础教程源代码

    ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础...

    asp.net mvc ajax demo

    asp.net mvc ajax demo

    MVCAJAX用JQUERY调用实例例子

    MVCAJAX用JQUERY调用实例例子 一个简单的入门例子 MVC下用JQUERY调用AJAX并用JSON返回输入的值

    MVC Jquery Ajax例子

    mvc jquery Ajax,用户登录,无刷新分页。数据库为sql 2005备份文件,在sql 2005_bak文件夹下。各位前辈看了,对不合理的请指教。

    MVC3的Ajax分页

    Asp.Net MVC3下,用Webdiyer.WebControls.Mvc.MvcPager控件做的一个ajax分页的demo

    ajax基础知识总结

    学习ajax基础知识,让自己的前端技术更上一层,学会与后台交互

    论文研究-基于Ajax的客户端MVC模型 .pdf

    基于Ajax的客户端MVC模型,黄史,,随着Ajax的盛行,Web客户端的代码也日益复杂。本文首先分析Ajax与MVC三层模型各自的优势,然后提出在Ajax的客户端采用MVC三层模型来优化

    ajax基础教程ajax基础教程ajax基础教程

    ajax基础教程ajax基础教程ajax基础教程ajax基础教程ajax基础教程aax基础教程ajax基础教程ajax基础教程ajax础教程ajax基础教程aja基础教程ajax基础教程ajax基础教程ajax基础教程ajax基础教程aax基础教程ajax基础教程

    基于AJAX技术的MVC模式开发.pdf

    基于AJAX技术的MVC模式开发.pdf

    bootstrap,ajax,spring mvc,spring,hibernate 项目实战源码

    bootstrap,ajax,spring mvc,spring,hibernate 项目实战源码

    AJAX基础.pdf

    AJAX基础.pdf AJAX基础.pdf AJAX基础.pdf

    ajax 基础教程

    ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax ...

    .net mvc3.0分页(包含AJAX分页)

    和Views\Shared的 _NetMvc3Page.cshtml 两部分代码组成。其他代码均是我写的列子而加的。 其他代码均可以按自己的实际逻辑编写。自己可以在_NetMvc3Page.cshtml 修改成自己的分页样式。 里面实现了正常的分页及AJAX...

Global site tag (gtag.js) - Google Analytics