1、走進AJAX
Asynchronous
JavaScript
And
XML
- 使用XHTML和CSS的基於標準的表示技術
- 使用DOM進行動態顯示和交互
- 使用XML和XSLT進行數據交換和處理
- 使用XMLHttpRequest進行異步數據檢索
- 使用Javascript將以上技術融合在一起
(2)不需刷新頁面就可改變頁面內容，減少用戶等待時間 。
(3)按需獲取數據，每次只從服務器端獲取需要的數據 。
(4)讀取外部數據，進行數據處理整合 。
(5)異步與服務器進行交互，在交互過程中用戶無需等待，仍可繼續操作
2、AJAX思維方式
傳統請求方式：
AJAX方式：
我們就通過用戶名校驗這個簡單的例子來看看傳統Web應用和AJAX應用開發思維的不同之處。
需求：
這個最簡單的例子需求如下：用戶在頁面的文本框中輸入想註冊的用戶名，然後點擊校驗按鈕，如果輸入的用戶名爲“wangxingkui”，則提示用戶名已經存在，請重新輸入，否則提示用戶名尚未存在，可以使用此用戶名進行註冊。
問題分析(傳統方式)：
對於校驗用戶名的需求，我們需要一個html頁面和一個servlet程序。Html頁面中包含文本框和提交按鈕，他們位於一個form表單中，這個表單將請求提交給servlet程序，servlet程序判斷當前的用戶名是否是“wangxingkui”，並給出相應的提示，同時servlet中還生成一個鏈接，用於返回html頁面。
從這個例子我們可以看到，傳統Web開發思維模式的一個特點是通過form表單提交請求信息，然後轉向一個新的頁面處理請求，並顯示服務器端返回的信息。
你可以嘗試運行一下這些代碼，你會發現作爲用戶的你經歷了：
在瀏覽器中輸入用戶名->點擊按鈕提交用戶名給Servlet->瀏覽器轉向Servlet的頁面->等待Servlet處理->Servlet返回響應信息->瀏覽器中看到Servlet頁面的響應信息，當然這其中有幾個過程可能時間短暫到你沒有注意，但這些過程是確實存在。
AJAX方式：
對於校驗用戶名的需求，我們需要一個html頁面和一個servlet程序。
Html頁面中包含文本框和校驗按鈕，點擊提交按鈕以後，我需要通過javascript獲取文本框中的數據，然後通過XMLHttprequest發送數據給servlet，此外還需要準備用於接收響應的javascript函數，接收到servlet的提示信息後，我需要將這些信息動態的寫在頁面上。servlet程序判斷當前的用戶名是否是“wangxingkui”，並給出相應的提示。
注意，AJAX模式下問題分析的方式已經發生了變化：
servlet不需要返回html頁面的鏈接了，因爲我們不需要跳轉到servlet表示的頁面中，我們只需要獲得servlet頁面產生的結果
html頁面中我不用表單提交數據了，我的數據通過javascript來獲取，然後通過一個叫做XMLHttprequest的對象發送給servlet。而且我沒有做頁面跳轉
我需要一個接收servlet響應信息的javascript函數，我沒有進入servelt代表的頁面查看響應信息，而是把servlet的響應信息接收回來，再顯示在我當前的頁面上。
當你運行上面的程序，你會發現從用戶的角度來看，與傳統Web應用模式的流程相比，AJAX應用模式的流程是不同的。
AJAX應用的流程是：
在瀏覽器中輸入數據->點擊按鈕提交請求->用戶可以繼續做其他事情；Servlet在處理數據，併發回數據->瀏覽器收到響應->瀏覽器中的當前頁面顯示響應結果，這其中仍然有些過程由於時間短暫使你忽略了它的錯在，但實際上這些過程都是存在的。
兩個流程的對比讓我們看到的顯而易見的
差別：
- AJAX應用中沒有向新頁面跳轉
- 用戶不需要處於無事可做的等待中。
3、註冊實例的實現：
註冊用戶名是否有效：
html文件：
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2016-3-5
Time: 10:52
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title></title>
<script type="text/javascript" src="jslib/jquery-2.2.1.js"></script>
<script type="text/javascript" src="jslib/verify.js"></script>
</head>
<body>
請輸出用戶名：<br/>
<input type="text" id="username"/><span id="result"></span><br/>
<input type="button" value="檢測" οnclick="verify()"/>
</body>
</html>
最初版本的js：
/**
* 最初版本
*/
function verify(){
//1、獲得文本框內容
//document.getElementById("username); dom的方式
//Jquery的查找節點的方式，參數中#加上id屬性值可以找到一個節點。
//jquery的方法返回的都是jquery的對象，可以繼續在上面執行其他的jquery方法
var jqueryObj = $("#username");
//獲取節點的值
var username = jqueryObj.val();
//2、將文本框中的數據發送給服務器端的servlet
//使用jquery的XMLHTTPrequest對象get請求的封裝
$.get("AjaxServletDemo1?username=" + username,null,callback);
}
//回調函數
function callback(data){
//3、接收服務器返回端的數據
//4、強服務器端返回的數據動態的顯示在頁面上
//找到保存結果信息的節點
var jqueryObj = $("#result");
//動態的改變頁面中span節點中的內容
jqueryObj.html(data);
}servlet的文件：
package seu.xinci.servlet;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
/**
* Created by Administrator on 2016-3-5.
*/
@WebServlet(name = "AjaxServletDemo1", urlPatterns = {"/AjaxServletDemo1"})
public class AjaxServletDemo1 extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username = request.getParameter("username");
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
if (username == null || username.trim().equals("")){
out.write("用戶名不能爲空");
}else {
if (username.equals("aaa")){
out.write("該用戶已存在，不能進行註冊");
}else {
out.write("該用戶名可以註冊");
}
}
}
}
簡化後的js：
/**
* 簡化版本
*/
function verify(){
$.get("AjaxServletDemo1",{username:$("#username").val()}, function (data) {
$("#result").html(data)
});
}減少代碼量，提高運行效率。。。缺點是不利於調試！