ajax主要用於與服務器進行異步交互數據（當然技術上也能做同步處理）。

因為傳統的非ajax的web交互，是整個瀏覽器將數據傳到後臺處理，而後臺處理時，用戶只能等待，這樣就非常效率低下。而且服務器會返回整個html頁面，用戶還得等待整個頁面加載。這樣是非常浪費資源。

ajax就可以做到在用戶觸發ajax請求的同時，任然能夠進行操作，並且服務處理且返回數據時不進行頁面重新加載，而用戶也可以得到想要的數據。

以下直接通過代碼和相應註釋解釋ajax請求過程

 1 function buttonOnClick() {
 2     // 頁面數據
 3     var info = ‘content=‘ + document.getElementById(‘contentId‘).value;
 
 4     // xhr對象
 5     var xhr;
 6     /*
 7      * XMLHttpRequest 對象提供了對 HTTP 協議的完全的訪問，包括做出 POST 和 HEAD 請求以及普通的 GET 請求的能力。
 8      * XMLHttpRequest 可以同步或異步地返回 Web 服務器的響應，並且能夠以文本或者一個 DOM 文檔的形式返回內容。
 9      * XMLHttpRequest 得到了所有現代瀏覽器較好的支持。唯一的瀏覽器依賴性涉及 XMLHttpRequest 對象的創建。 在 IE 5 和
10      * IE 6 中，必須使用特定於 IE 的 ActiveXObject() 構造函數 以上說明來自W3school
 
11      */
12     if (window.XMLHttpRequest) {
13         xhr = new XMLHttpRequest();
14     } else {
15         xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);
16     }
17     xhr.onreadystatechange = function() {
18         /*
19          * 0 Uninitialized 初始化狀態。XMLHttpRequest 對象已創建或已被 abort() 方法重置。 1 Open
 
20          * open() 方法已調用，但是 send() 方法未調用。請求還沒有被發送。 2 Sent Send() 方法已調用，HTTP
21          * 請求已發送到 Web 服務器。未接收到響應。 3 Receiving 所有響應頭部都已經接收到。響應體開始接收但未完成。 4 Loaded
22          * HTTP 響應已經完全接收。 readyState 的值不會遞減
23          */
24         if (xhr.readyState == 4) {
25             // status為http狀態碼，內容過多，不詳細展開，大體分為五類
26             /*
27              * 1XX 100-101 信息提示 2XX 200-206 成功 3XX 300-305 重定向 4XX 400-415 客戶端錯誤
28              * 5XX 500-505 服務器錯誤
29              */
30             if (xhr.status == 200) {//表示成功
31                 /*
32                  * responseText 響應內容作為文本
33                  * 
34                  * responseXML 響應內容作為xml文檔
35                  */
36                 return ajaxsuccess(xhr.responseText);
37             }
38         }
39     }
40     /*
41      * 第一個參數為發送請求方式，常用POST/GET，不區分大小寫，但是通常大寫。
42      * ‘GET’用於常規請求，它適用於URL完全指定的資源。當請求對服務器沒有任何副作用是可緩存的情況下，
43      * ‘POST’常用於含有額外的數據的請求
44      * 
45      * 第二個參數為url
46      * 
47      * 第三個參數為是否異步請求，默認為true，異步請求
48      */
49     xhr.open(‘POST‘, ‘/WebDemo/ServletDemoA‘, true);
50 
51     /*
52      * Http Header裏的Content-Type一般有這三種：
53      * 
54      * application/x-www-form-urlencoded：數據被編碼為名稱/值對。這是標準的編碼格式。
55      * 
56      * multipart/form-data： 數據被編碼為一條消息，頁上的每個控件對應消息中的一個部分。 text/plain：
57      * 
58      * 數據以純文本形式(text/json/xml/html)進行編碼，其中不含任何控件或格式字符。postman軟件裏標的是RAW。
59      * 
60      * form的enctype屬性為編碼方式，常用有兩種：application/x-www-form-urlencoded和multipart/form-data，默認為application/x-www-form-urlencoded。
61      * 
62      * 上傳文件時。
63      * 也就是有type=file控件，要用multipart/form-data了，指定傳輸數據為二進制類型
64      * 
65      * 當action為post且Content-Type類型是multipart/form-data，瀏覽器會把整個表單以控件為單位分割，
66      * 並為每個部分加上Content-Disposition(form-data或者file),Content-Type(默認為text/plain),name(控件name)等信息，並加上分割符(boundary)。
67      * 
68      * 當action為get時候，瀏覽器用x-www-form-urlencoded的編碼方式把form數據轉換成一個字串（name1=value1&name2=value2...），然後把這個字串追加到url後面，用?分割，加載這個新的url。
69      * 
70      * 當action為post時候，瀏覽器把form數據封裝到http body中，然後發送到server。
71      * 因為url長度有限所以get請求的數據是有限的，而post無限
72      */
73     // Content-type詳細內容見Content-type對照表
74     xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
75     xhr.send(info);
76 }
77 
78 function ajaxsuccess(resTxt) {
79     console.log(‘成功‘);
80     console.log(resTxt);
81 }

簡單且常用的原生ajax過程

以下是servlet代碼

 1 /**
 2      * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
 3      *      response)
 4      */
 5     protected void doPost(HttpServletRequest request, HttpServletResponse response)
 6             throws ServletException, IOException {
 7         /*
 8          * 本例中
 9          * 分號之前
10          *‘/‘之前 媒體格式，常見text application
11          * text/plain 為普通文本
12          * 
13          *‘/‘之後 常用的有
14          * html html代碼
15          * xml xml
16          * javascript js
17          * json json對象
18          * 詳細見content-Type對照表
19          * 
20          * utf-8 為編碼格式，不詳細展開，都懂。。。。
21          */
22         response.setContentType("text/plain;charset=utf-8");
23         // 傳輸的數據到前臺
24         // response.getWriter().write("success");
25         // 完成操作的對象為java.io.PrintWriter，通過io輸出流傳遞數據
26         PrintWriter writer = response.getWriter();
27         writer.write("success");
28     }

補充說明

contentType是向服務器說明輸出的數據是什麽。

而在jqeury中的ajax有一個屬性dataType，是用於說明要接受的數據類型，並強制轉換，並且可能導致失敗。

當dataType沒指定時，將會自動推斷並將返回數據轉型，特別是contentType中指明數據類型時。

要是dataType有指定，則無論contentType內容，都將返回的數據轉換為dataType指定類型。

原生ajax及其與服務器交互（java）學習筆記