AJAX和MVC总结

最新推荐文章于 2024-11-20 15:57:30 发布

原创最新推荐文章于 2024-11-20 15:57:30 发布 · 330 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Ajax #MVC #Servlet #应用服务器 #浏览器

AJAX和MVC总结

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

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

AJAX：

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

创建异步请求对象：创建一个XMLHTTPRequest对象，用来发送异步请求。需要注意的是不同浏览器有不同的创建方法，在创建前需要判断一下浏览器的类型，调用合适的方法。
编写回调方法：服务器返回一个结果，将结果显示在页面的哪个位置、显示返回结果中的哪些信息等等体现在这个方法中，即服务器返回结果处理方法。首先要通过调用异步请求对象的readyState 和status两个函数看服务器响应的状态。readyState 有5个状态，其中返回0表示open函数已经调用，返回1表示请求已经接收但还没发送数据，2表示服务器正在处理数据，3表示已经有部分数据返回，4表示服务器已经完成响应； status则有许多种状态，最常见的有：404——网页未找到，400——客户端出错，500——服务器出错，200——一切正常。判断完后，应答正常则可以得到服务器返回的数据，显示到页面上。
发送异步请求：即向服务器发送请求。首先得到异步请求；然后绑定回调方法（第二步编写的函数），<异步请求对象.onreadystatechange方法=回调函数名;>这样绑定，注意在回调函数名后不加“（）”；再选择发送方法(post/get)和发送URL，<异步请求对象名.open(“POST/GET”,"servlet/jsp页面"，true)>，true表示是异步请求；然后编写服务器的解码格式<异步请求名.setRequestHeader(" Content-Type" , "application/x-www-formurlencoded ")>；最后再发送参数即可。

代码示例：

<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>

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