初識AJAX

這幾天一直在看書,大致瞭解瞭AJAX技術,在這裡做一個小小的總結。
首先要明白:什麼是AJAX?
通過查閱維基百科我們可以看到這樣一段話:AJAX即“Asynchronous JavaScript and XML”(異步的JavaScript與XML技術),指的是一套綜合瞭多項技術的瀏覽器端網頁開發技術。
那麼,現在我們可以對它有一個大致的瞭解,AJAX=JavaScript+XML。而js和xml我們應該都不陌生
其次,AJAX有什麼用?
現在回顧我們的開發旅程,在原來開發Servlet+JSP+JavaBean的過程中,我們的Web應用允許用戶在網頁端填寫並提交表單(form),而發出表單時就向網頁服務器發送瞭一個請求(Request)。服務器接收該請求並處理傳來的表單,然後送回一個新的網頁,隨後展示在瀏覽器上,這樣就完成瞭一次用戶與服務器的交互。這種情況有一些很大的問題。
這種方法浪費瞭許多帶寬。現在看這樣一個例子:瀏覽器端展示瞭用戶登陸界面,當用戶輸入用戶名、密碼及驗證碼後,數據被發送到瞭服務器,假定我們在Servlet中處理請求後發現用戶名及密碼不匹配,我們接下來做瞭什麼?
我們重新將頁面連同錯誤信息發送給瞭瀏覽器端!而在前後兩個頁面中的大部分HTML代碼除瞭錯誤信息全都是相同的。
這種方法用戶體驗太差。假設用戶不小心輸入瞭錯誤的用戶名,就會出現在等待半天後頁面被刷新並提示用戶名錯誤,這樣用戶又得重新輸入一遍。在用戶的網速比較慢的情況下,這種模式的用戶體驗就更差瞭。
那麼有沒有什麼方法可以解決這種問題呢?
在XMLHttpRequest對象出現之前是沒有辦法的,但是在它出現之後,前輩們就想到瞭一種比較好的解決方法,即:使用XMLHttpRequest對象作為Agent來將請求發送給服務器,並用它來接收服務器返回的數據,這樣就可以不跳轉頁面完成數據的交互,而且隻需要傳輸少量必要數據,因此對網速的要求也變低瞭。
那麼剩下的兩個問題就是:
1.如何根據服務器端返回的數據動態更改頁面,以達到與用戶交互的作用?
2.如何規定服務器發送回來的數據格式,使它更通用,並且傳輸量盡可能的少呢?
對於1:前輩們選擇瞭使用JavaScript,個人理解這樣做的原因有兩個,第一,JavaScript足夠流行,幾乎所有的主流瀏覽器都對JavaScript提供瞭支持;第二,JavaScript可以通過DOM編程的方式來動態的改變網頁的內容。
對於2:前輩們選擇瞭XML,我想可能是因為它語法足夠嚴格、語義明確而且更加通用吧。但是我認為傳輸的數據格式對使用AJAX並沒有影響。例如,我們可以選擇傳輸Json來使傳輸的數據更加少,甚至可以選擇傳輸一段有意義的字符串,隻要服務器端與瀏覽器端開發者對格式進行瞭約定即可。
現在,我們就可以定義AJAX瞭:AJAX 是一種用於創建快速動態網頁的技術。通過在後臺與服務器進行少量數據交換,AJAX 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下,對網頁的某部分進行更新。
那麼,我們就知道瞭要解決傳統的資源浪費問題的思路,現在就來看一下,如何來實現吧!
關於AJAX的實現,可以去查看W3School關於AJAX的介紹
下面是我簡單總結的AJAX實現步驟:
1. 我們需要一個XMLHttpRequest對象。(我們都知道IE低版本瀏覽器的標準很坑爹,很多都與主流標準不兼容。很不幸,對於XMLHttpRequest對象也是一樣的….)
因此,一個XMLHttpRequest對象的獲取過程是這樣的:

    var httpXml = null;
    if(window.XMLHttpRequest){
        httpXml = new XMLHttpRequest();  //針對現代瀏覽器,IE7及以上版本
    }else if(window.ActiveXObject){
        httpXml = new ActiveXObject("Microsoft.XMLHTTP");  //針對IE5,IE6版本
    }

2.我們需要為這個XMLHttpRequest對象註冊它要進行的操作(通過回調),並根據返回的請求狀態與HTTP狀態碼來查看消息的狀態,並確定在何種情況下我們要進行何種操作。
這個過程是這樣的:

    //為XMLHttpRequest對象的onreadystatechange屬性註冊
    httpXml.onreadystatechange=function(){
        //  在回調函數中根據請求狀態與返回的HTTP狀態碼來選擇相應的操作處理數據
        if(httpXml.readyState==4&&httpXml.status==200){
            alert(httpXml.responseText);
        }
    };

XMLHttpRequest的重要屬性
3.我們需要進行請求發送的參數設置。
這個過程是這樣的:

    //函數原型:open(method,url,async,username,password)
    //method            --->請求方式:GET,POST或HEAD
    //url               --->請求的地址  GET提交方式可以在後面加上參數
    //async             --->請求是否異步執行,true---異步,false---同步   默認為true
    //username,password --->可選,為url所需的授權提供認證資格。如果不為空,會覆蓋掉url中指定的資格
    httpXml.open("GET","http://localhost:8080/aaa/MyServlet",true);

4.要真正的發送請求啦!

    //  參數為請求參數,POST提交內容格式為--->"username=taffy&password=666",GET為----->空
    //  註意:若為POST請求方式,還需設置一個http請求頭(應該位於open之後,send之前)
    // 即 setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");    標志form表單的enctype屬性
        httpXml.send(null);

open及send方法介紹
這樣,一個簡單的AJAX過程就完成瞭。
一些沒有用到的小知識點:

    //XMLHttpRequest屬性
    responseText   得到返回的文本信息
    responseXML    得到返回的XML信息
    //XMLHttpRequest的方法
    getResponseHeader()   得到指定頭部信息
    getAllResponseHeaders() 將 HTTP響應頭部作為未解析的字符串返回
    //XMLHttpRequest的控制方法
    abort()    取消當前響應,關閉連接,將readyState置0

下面是我做的一個完整的Demo:
register.html
MyServlet.java

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class MyServlet
 */
@WebServlet("/MyServlet")
public class MyServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
      public MyServlet() {
        super();
    }
    @override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        PrintWriter out = response.getWriter();
        String username = request.getParameter("user");
        if (username!=null&&!username.equals("")) {
            if (username.equals("admin")) {
                out.write("true");
            }else {
                out.write("false");
            }
        }else {
            out.write("false");
        }
        out.close();
    }
    @override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }
}

下面對AJAX的優缺點進行一下總結:
優點:
能在不更新整個頁面的前提下維護數據。這使得Web應用程序更為迅捷地回應用戶動作,並避免瞭在網絡上發送那些沒有改變的信息。
缺點:
1.它可能破壞瀏覽器的後退功能。在動態更新頁面的情況下,用戶無法回到前一個頁面狀態,這是因為瀏覽器僅能記下歷史記錄中的靜態頁面;
2.使用動態頁面更新使得用戶難於將某個特定的狀態保存到收藏夾中。

發佈留言