AJAX入門（一）

本人小白一隻，有幸跟着研究生一起做項目，需要學習AJAX的相關知識。所以寫個教程和大家一起學習和進步。因爲是剛開始接觸，所以肯定會有紕漏之處，請不吝指教。

1.什麼是AJAX

AJAX即“Asynchronous Javascript And XML”（異步JavaScript和XML），是指一種創建交互式網頁應用的網頁開發技術。
AJAX能在不刷新網頁的情況下，更新網頁的信息，可用來創建快速動態網頁。
有很多使用 AJAX 的應用程序案例：新浪微博、Google 地圖、開心網等等。

2.XMLHttpRequest

首先先學會創建XMLHttpRequest對象

var xhr;
//檢測瀏覽器是否支持創建XMLHttpRequest 對象
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼
    xtr=new XMLHttpRequest();
}
else
{
    // IE6, IE5 瀏覽器執行代碼
    xtr=new ActiveXObject("Microsoft.XMLHTTP");
}

2.向服務器發送消息

首先先發送消息
使用.open(method,url,async)方法
裏面幾個參數的意思分別是：

method(String)
根據自己的需要可以選擇POST或者GET

url(string)
文件在服務器上的位置

async(bool)
true 或者false true代表允許異步

你也可以使用.setRequestHeader()方法添加請求頭，和python挺像的。
以上說的均爲XMLHttpRequest這個類的方法。

3.細說async=true的情況

當使用async=true的時候，你可以用.onreadystatechange函數來獲取返回內容，下面是一段示例代碼

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

另外，你可以把代碼中的.responseText換成.responseXML來獲取XML格式的響應數據。

下面是關於onreadystatechange詳細介紹，每次readyState改變了，均會調用這個函數。

readyState共有以下這些值：
存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。
0: 請求未初始化
1: 服務器連接已建立
2: 請求已接收
3: 請求處理中
4: 請求已完成，且響應已就緒

status(string)的值爲200時，代表訪問正常。

另外附上常用的status返回值：
100——客戶必須繼續發出請求
101——客戶要求服務器根據請求轉換HTTP協議版本
200——成功
201——提示知道新文件的URL
202——接受和處理、但處理未完成
203——返回信息不確定或不完整
204——請求收到，但返回信息爲空
205——服務器完成了請求，用戶代理必須復位當前已經瀏覽過的文件
206——服務器已經完成了部分用戶的GET請求
300——請求的資源可在多處得到
301——刪除請求數據
302——在其他地址發現了請求數據
303——建議客戶訪問其他URL或訪問方式
304——客戶端已經執行了GET，但文件未變化
305——請求的資源必須從服務器指定的地址得到
306——前一版本HTTP中使用的代碼，現行版本中不再使用
307——申明請求的資源臨時性刪除
400——錯誤請求，如語法錯誤
401——請求授權失敗
402——保留有效ChargeTo頭響應
403——請求不允許
404——沒有發現文件、查詢或URl
405——用戶在Request-Line字段定義的方法不允許
406——根據用戶發送的Accept拖，請求資源不可訪問
407——類似401，用戶必須首先在代理服務器上得到授權
408——客戶端沒有在用戶指定的餓時間內完成請求
409——對當前資源狀態，請求不能完成
410——服務器上不再有此資源且無進一步的參考地址
411——服務器拒絕用戶定義的Content-Length屬性請求
412——一個或多個請求頭字段在當前請求中錯誤
413——請求的資源大於服務器允許的大小
414——請求的資源URL長於服務器允許的長度
415——請求資源不支持請求項目格式
416——請求中包含Range請求頭字段，在當前請求資源範圍內沒有range指示值，請求也不包含If-Range請求頭字段
417——服務器不滿足請求Expect頭字段指定的期望值，如果是代理服務器，可能是下一級服務器不能滿足請求
500——服務器產生內部錯誤
501——服務器不支持請求的函數
502——服務器暫時不可用，有時是爲了防止發生系統過載
503——服務器過載或暫停維修
504——關口過載，服務器使用另一個關口或服務來響應用戶，等待時間設定值較長
505——服務器不支持或拒絕支請求頭中指定的HTTP版本

一個簡單的ajax示例

發送方：

xmlHttp = new XMLHttpRequest();
var url = "ISBN?ISBN="+input_ISBN_string;
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange = send_success;
xmlHttp.send(null);

這裏的send_success是成功後的回調函數，這裏就不在給出定義

接收方：

private void processRequest(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws IOException {
		//設置一些response的屬性，這裏指定的不緩存數據
        httpServletResponse.setContentType("text/html;charset=UTF-8");
        httpServletResponse.setHeader("Pragma","no-cache");
        httpServletResponse.setDateHeader("Expires",0);
        httpServletResponse.setHeader("Cache-Control", "no-store");
        //設置了一個用於向迴應寫數據的PrintWriter
        PrintWriter out = httpServletResponse.getWriter();
        //這裏獲取傳遞的ISBN參數
        String ISBN = httpServletRequest.getParameter("ISBN");
        out.write(ISBN);
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        processRequest(req,resp);
    }

這裏因爲發送方只用了get方法，所以我只重寫了doGet方法。
這個作用是把網頁傳過來的ISBN重新返回給網頁。