既然是認識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 contentType="text/html; charset=UTF-8" language="java"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
String result = (String)session.getAttribute("result");
if(result != null && result != ""){
if(result.equals("ok")){
out.println("<script>window.alert('熱烈的歡迎你！')</script>");
}else{
out.println("<script>winodw.alert('對不起，登陸失敗！')</script>");
}
session.invalidate();
}
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<form action="login" method="post">
用戶名：<input type="text" name="uname">
密碼：<input type="password" size="20" name="pwd">
<input type="submit" value="login">
</form>
</body>
</html>
LoginAction.java代碼如下：
package classmate;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
public class LoginAction_refersh extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// TODO Auto-generated method stub
String uname = req.getParameter("uname");
String pwd = req.getParameter("pwd");
String target = "";
HttpSession session = 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代碼如下:
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
id="WebApp_ID"
version="2.5">
<display-name>ajaxtest</display-name>
<servlet>
<servlet-name>login</servlet-name>
<servlet-class>classmate.LoginAction</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>login</servlet-name>
<url-pattern>/login</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>login.jsp</welcome-file>
</welcome-file-list>
</web-app>
這樣就完成了一個傳統同步交互了哦。看看你的成果。
實例2：
做完了同步交互，現在要來正式體驗AJAX異步體驗了哦。注意的是，現在要使用MySql，而且也涉及到了採用AJAX後的MVC設計模式：
MySql就不說了，你要做的準備就是安裝好MySql數據庫，和下一個驅動JAR包。
採用AJAX後的MVC設計模式，如圖：
文件層次如下：
先來看View，視圖部分的代碼，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" onclick="userCheck()">
</form>
</body>
</html>
現在講解下採用AJAX的幾步驟：
1、 在瀏覽器客戶端創建對應的XMLHttpRequest
如上代碼中的：
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){}
}
}
}
根據不同的瀏覽器創建對應的XMLHttpRequest對象
2、 當用戶點擊按鈕提交請求後，通過內置的AJAX核心對象XMLHttpRequest以異步的方式發送請求，如上代碼中的：
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);
}
}
function sendRequest(url){
createXMLHttpRequest();
XMLHttpReq.open("GET",url,true);
XMLHttpReq.onreadystatechange = processResponse;
XMLHttpReq.send(null);
}
3、 在請求提交後爲AJAX核心對象的XMLHttpRequest指定好響應的函數後，該監聽器就開始監聽工作。
如上代碼中的：
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("你請求的頁面有異常");
}
}
}
其中
var res = XMLHttpReq.responseXML.getElementsByTagName("res")[0].firstChild.data;
用戶解析由服務器端返回的XML的格式。
DB.java代碼如下：
package classmate;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
public class DB {
Connection conn = null;
Statement stmt = null;
ResultSet rs = null;
public DB(){
try{
Class.forName("com.mysql.jdbc.Driver");
//System.out.println("classdb");
}catch(java.lang.ClassNotFoundException e){
e.printStackTrace();
}
}
public ResultSet executeQuery(String sql){
try{
conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/ajaxtest", "root", "888888");
//System.out.println("conn");
stmt = conn.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE, ResultSet.CONCUR_READ_ONLY);
//System.out.println("stmt");
rs = stmt.executeQuery(sql);
//System.out.println("rs");
}catch(SQLException e){
e.printStackTrace();
}
return rs;
}
public int executeUpdate(String sql){
int result = 0;
try{
conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/ajaxtest?useunicode=true&characterEncoding=GBK", "root", "888888");
stmt = conn.createStatement();
result = stmt.executeUpdate(sql);
}catch(SQLException e){
System.out.println(e.getMessage());
}
return result;
}
public void close(){
if(rs != null){
try{
rs.close();
}catch(Exception e1){
e1.printStackTrace();
}
}
if(stmt != null){
try{
stmt.close();
}catch(Exception e1){
e1.printStackTrace();
}
}
if(conn != null){
try{
conn.close();
}catch(Exception e1){
e1.printStackTrace();
}
}
}
}
LoginAction.java代碼如下：
package classmate;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.ResultSet;
import java.sql.SQLException;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class LoginAction extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// TODO Auto-generated method stub
req.setCharacterEncoding("UTF-8");
String uname = req.getParameter("uname");
String pwd = req.getParameter("pwd");
resp.setContentType("text/xml;charset=UTF-8");
resp.setHeader("Cache-Control", "no-cache");
PrintWriter out = resp.getWriter();
out.println("<response>");
DB db = new DB();
ResultSet rs;
String strSql = null;
strSql = "select * from classuser where username='" + uname + "' and password='"
+ pwd + "';";
rs = db.executeQuery(strSql);
try{
if(rs.next()){
out.println("<res>" + "熱烈歡迎" + "</res>");
}else{
out.println("<res>" + "登陸失敗" + "</res>");
}
}catch(SQLException e){
e.printStackTrace();
}
out.println("</response>");
out.close();
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// TODO Auto-generated method stub
super.doGet(req, resp);
}
@Override
public void init(ServletConfig config) throws ServletException {
// TODO Auto-generated method stub
}
}
web.xml代碼如下：
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
id="WebApp_ID"
version="2.5">
<display-name>ajaxtest</display-name>
<servlet>
<servlet-name>login</servlet-name>
<servlet-class>classmate.LoginAction</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>login</servlet-name>
<url-pattern>/login</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>login.jsp</welcome-file>
</welcome-file-list>
</web-app>
這樣就完成了AJAX實踐咯。
有聯繫請聯繫QQ：540528747，我也在學習AJAX，大家一起研究，歡迎各位朋友一起交流技術。
