既然是认识AJAX,理论和实践相结合,这样让自己学的更快,理解更深入,我分一下几点:
1、 认识传统的同步交互方式和AJAX解决方案
2、 AJAX使用到的技术
3、 实例体验AJAX
一、同步交互方式和AJAX解决方案
传统的WEB应用是同步交互的方式,这种同步交互方式的处理过程如下图
什么是同步交互方式:
首先,用户向HTTP服务器提交一个处理请求。接着,服务器端接收到请求后,按照预先编写好的程序中的业务逻辑进行处理,比如和数据库服务器进行数据信息交换。最后,服务器对请求进行响应,将结果返回给客户端,返回一个HTML在浏览器中显示,通常会有CSS样式丰富页面的显示效果。
同步交互的不足之处,会给用户一种不连贯的体验,当服务器处理请求时,用户只能等待状态,页面中的显示内容只能是空白。
AJAX解决方案
AJAX采用的异步交互的处理方式,很好的解决不连贯的用户体验,处理过程如图:
二、AJAX使用的技术
1、JavaScript脚本
2、XHTML和CSS
3、DOM
4、XML和XSTL
5、XMLHTTPRequest
三、实例体验AJAX
首先,布置好开发环境:
JDK 1.4以上,我使用1.6
Eclipse 3.1以上,我使用3.4
Tomcat 5.0以上,我使用6.0
MySql 4以上,我使用5.0
如果你没有十足的把握请搭建和我一样的环境。
实例1:
我先做一个传统同步交互的实例,然后同AJAX的异步交互进行对比。
这里还要介绍下J2EE中经常提到的MVC模式:
MVC模式,即模型—视图—控制器模式,核心是代码分为相对独立的3个组成部分,其功能如下:
模型(Model),业务逻辑层。实现业务逻辑、状态管理的功能。
视图(View),表示层。即实现与用户交互的界面,通常实现数据的输入和输出功能。
控制器(Control),控制层。起到控制整个业务流程的作用,实现View和Model部分的协同工作。
在Model2中,采用Servlet作为控制器,负责接收客户端Web浏览器发送来的所有请求,并依据处理的不同结果,转发到对应的JSP页面实现在浏览器客户端的显示。
Model2模式工作如下:
好现在就开始写代码来实现上面的原理了:
要有三个东西,如下:
一个页面,也就是View,先制定好是login.jsp,用来登陆的;
一个Servlet,也就是Model,用来作为控制层。
好了,奇怪为什么没有Control,也就是没有控制器呢?后面就知道咯!
下面是Eclipse中的层次结果:
login.jsp代码如下:
<%@ page language="java" contentType="text/html; charset=UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <script language="javascript"> var XMLHttpReq = false; function createXMLHttpRequest(){ if(window.XMLHttpRequest){ XMLHttpReq = new XMLHttpRequest(); }else if(window.ActiveXObject){ try{ XMLHttpReq = new ActiveXObject("MSXML2.XMLHTTP"); }catch(e){ try{ XMLHttpReq = new ActiveXObject("Mircsoft.XMLHTTP"); }catch(e1){} } } } function sendRequest(url){ createXMLHttpRequest(); XMLHttpReq.open("GET",url,true); XMLHttpReq.onreadystatechange = processResponse; XMLHttpReq.send(null); } function processResponse(){ if(XMLHttpReq.readyState == 4){ if(XMLHttpReq.status == 200){ var res = XMLHttpReq.responseXML.getElementsByTagName("res")[0].firstChild.data; window.alert(res); document.myform.uname.value=""; document.myform.pwd.value=""; }else{ window.alert("你请求的页面有异常"); } } } function userCheck(){ var uname = document.myform.uname.value; var pwd = document.myform.pwd.value; if(uname == ""){ window.alert("用户名不能为空"); document.myform.pwd.value=""; document.myform.uname.focus(); return false; }else{ sendRequest("login?uname="+uname+"&pwd="+pwd); } } </script> <form action="" method="post" name="myform"> 用户名:<input type="text" name="uname"> 密码:<input type="password" size="20" name="pwd"> <input type="button" value="login" </form> </body> </html> |