JAVAAJAX教程第一章-初始AJAX

既然是认识AJAX，理论和实践相结合，这样让自己学的更快，理解更深入，我分一下几点：1、认识传统的同步交互方式和AJAX解决方案2、AJAX使用到的技术3、实例体验AJAX一、同步交互方式和AJAX解决方案传统的WEB应用是同步交互的方式，这种同步交互方式的处理过程如下图什么是同步交互方式：首先，用户向HTTP服务器提交一个处理请求。接着，服务器端接收到请求后，按照预先编写好的程序中的业务逻辑进行处理，比如和数据库服务器进行数据信息交换。最后，服务器对请求进行响应，将结果返回给客户端，返回一个HTML在浏览器中显示，通常会有CSS样式丰富页面的显示效果。同步交互的不足之处，会给用户一种不连贯的体验，当服务器处理请求时，用户只能等待状态，页面中的显示内容只能是空白。AJAX解决方案AJAX采用的异步交互的处理方式，很好的解决不连贯的用户体验，处理过程如图：二、AJAX使用的技术1、JavaScript脚本2、XHTML和CSS3、DOM4、XML和XSTL5、XMLHTTPRequest三、实例体验AJAX首先，布置好开发环境：JDK1.4以上，我使用1.6Eclipse3.1以上，我使用3.4Tomcat5.0以上，我使用6.0MySql4以上，我使用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代码如下：%@pagecontentType=text/html;charset=UTF-8language=java%!DOCTYPEhtmlPUBLIC-//W3C//DTDHTML4.01Transitional//EN=(String)session.getAttribute(result);if(result!=null&&result!=){if(result.equals(ok)){out.println(scriptwindow.alert('热烈的欢迎你！')/script);}else{out.println(scriptwinodw.alert('对不起，登陆失败！')/script);}session.invalidate();}%htmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=ISO-8859-1titleInserttitlehere/title/headbodyformaction=loginmethod=post用户名：inputtype=textname=uname密码：inputtype=passwordsize=20name=pwdinputtype=submitvalue=login/form/body/htmlLoginAction.java代码如下：packageclassmate;importjava.io.IOException;importjavax.servlet.ServletException;importjavax.servlet.http.HttpServlet;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;importjavax.servlet.http.HttpSession;publicclassLoginAction_refershextendsHttpServlet{@Overrideprotectedvoidservice(HttpServletRequestreq,HttpServletResponseresp)throwsServletException,IOException{//TODOAuto-generatedmethodstubStringuname=req.getParameter(uname);Stringpwd=req.getParameter(pwd);Stringtarget=;HttpSessionsession=req.getSession();if(uname.equals(yhw)&&pwd.equals(admin)){session.setAttribute(result,ok);target=/ajaxtest/login.jsp;}else{session.setAttribute(result,wrong);target=/ajaxtest/login.jsp;}resp.sendRedirect(target);}}web.xml代码如下:?xmlversion=1.0encoding=UTF-8?web-appxmlns:xsi==:web=:schemaLocation=://java.sun.com/xml/ns/javaee/web-app_2_5.xsdid=WebApp_IDversion=2.5display-nameajaxtest/display-nameservletservlet-namelogin/servlet-nameservlet-classclassmate.LoginAction/servlet-class/servletservlet-mappingservlet-namelogin/servlet-nameurl-pattern/login/url-pattern/servlet-mappingwelcome-file-listwelcome-filelogin.jsp/welcome-file/welcome-file-list/web-app这样就完成了一个传统同步交互了哦。看看你的成果。实例2：做完了同步交互，现在要来正式体验AJAX异步体验了哦。注意的是，现在要使用MySql，而且也涉及到了采用AJAX后的MVC设计模式：MySql就不说了，你要做的准备就是安装好MySql数据库，和下一个驱动JAR包。采用AJAX后的MVC设计模式，如图：文件层次如下：先来看View，视图部分的代码，login.jsp:%@pagelanguage=javacontentType=text/html;charset=UTF-8%!DOCTYPEhtmlPUBLIC-//W3C//DTDHTML4.01Transitional//EN=Content-Typecontent=text/html;charset=UTF-8titleInserttitlehere/title/headbodyscriptlanguage=javascriptvarXMLHttpReq=false;functioncreateXMLHttpRequest(){if(window.XMLHttpRequest){XMLHttpReq=newXMLHttpRequest();}elseif(window.ActiveXObject){try{XMLHttpReq=newActiveXObject(MSXML2.XMLHTTP);}catch(e){try{XMLHttpReq=newActiveXObject(Mircsoft.XMLHTTP);}catch(e1){}}}}functionsendRequest(url){createXMLHttpRequest();XMLHttpReq.open(GET,url,true);XMLHttpReq.onreadystatechange=processResponse;XMLHttpReq.send(null);}functionprocessResponse(){if(XMLHttpReq.readyState==4){if(XMLHttpReq.status==200){varres=XMLHttpReq.responseXML.getElementsByTagName(res)[0].firstChild.data;window.alert(res);document.myform.uname.value=;document.myform.pwd.value=;}else{window.alert(你请求的页面有异常);}}}functionuserCheck(){varuname=document.myform.uname.value;varpwd=document.myform.pwd.value;if(uname==){window.alert(用户名不能为空);document.myform.pwd.value=;document.myform.uname.focus();returnfalse;}else{sendRequest(login?uname=+uname+&pwd=+pwd);}}/scriptformaction=method=postname=myform用户名：inputtype=textname=uname密码：inputtype=passwordsize=20name=pwdinputtype=buttonvalue=loginonclick=userCheck()/form/body/html现在讲解下采用AJAX的几步骤：1、在浏览器客户端创建对应的XMLHttpRequest如上代码中的：functioncreateXMLHttpRequest(){if(window.XMLHttpRequest){XMLHttpReq=newXMLHttpRequest();}elseif(window.ActiveXObject){try{XMLHttpReq=newActiveXObject(MSXML2.XMLHTTP);}catch(e){try{XMLHttpReq=newActiveXObject(Mircsoft.XMLHTTP);}catch(e1){}}}}根据不同的浏览器创建对应的XMLHtt