AJAX教程第一章—初识AJAX

网络整理 - 07-26

　　既然是认识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中的层次结果：

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "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>