目錄：（Ctrl+F進行檢索）
1.javascript中底層的ajax異步請求後臺操作的方法與實例。
2.jquery對ajax的操作方法
3.ajax詳解
4.json詳解
5.java中對json的處理。
6.java將json數據傳值前臺。
7.jsp前臺對json進行處理。
8.ajax異步獲取到後臺的json並進行處理。
--------------------------------------------
1.傳統的 ajax異步請求後臺操作的方法。
特點：局部刷新，異步交互。
引入javascript.js：
<script type="text/javascript" src="http://libs.cdnjs.net/jquery/3.2.1/jquery.js"></script>
這是前端公共庫CDN加速的遠程倉庫，當然也可以下載相關js文件然後引入，但必須是1.4以上的版本。以前的版本幾乎沒人用了。

傳統的寫法：

 1 <script type="text/javascript">
 2     function createXMLHttpRequest() {//為了應對所有的現代瀏覽器，包括 IE5 和 IE6，請檢查瀏覽器是否支持 XMLHttpRequest 對象。
 3         //如果支持，則創建 XMLHttpRequest 對象。如果不支持，則創建 ActiveXObject ：
 4         //第一步創建XMLHttpRequest()
 5         try {
 6             xmlHttp = new XMLHttpRequest();
 7
 
         } catch (tryMS) {
 8             try {
 9                 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
10             } catch (otherMS) {
11                 try {
12                     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
13                 } catch (failed) {
14                     xmlHttp = null
 
;
15                     // 這裏可以報一個錯誤，無法獲得 XMLHttpRequest對象    
16                 }
17             }
18         }
19         return xmlHttp;
20     }
21     window.onload = function() {
22         document.getElementById("b1").onclick = function() {
23             //調用AJAX發送請求
24             /**
25              * 1.創建xmlHttpRequest對象
26              * 2.綁定回調函數
27              * 3.與服務器建立連接
28              * 4.發送數據
29              * 5.回調函數處理相應的數據
30              */
31             //第一步：創建XMLHttpRequest對象，往上看怎麽驗證瀏覽器支持的↑
32             var xmlHttp = createXMLHttpRequest();
33 
34             //第二步：綁定回調函數
35 
36             xmlHttp.onreadystatechange = function() {
37                 if (xmlHttp.readyState == 4) {
38                     //表示readyState的狀態已經在第四步，數據接收完畢,此時可以通過通過responseBody和responseText獲取完整的回應數據，
39                     //ajax readyState的五種狀態詳解請看這篇：http://www.jb51.net/article/16966.htm
40                     if (xmlHttp.status == 200) {//http狀態碼為200表示正常交互完成。
41                         //兩步都驗證過了則可以設置回調函數
42                         var callback = xmlHttp.responseText;
43                         //如需獲得來自服務器的響應，請使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。
44                         //responseText是獲得字符串形式的響應數據。responseXML則獲得 XML 形式的響應數據。
45                         document.getElementById("myDiv").innerHTML = callback;//這裏就可以預設值對回調函數的處理。比如這裏把回調函數展示到 id為myDiv的標簽中。
46                     }
47                 }
48             }
49             //第三步：與服務器建立連接
50             xmlHttp.open("POST", "../servlet/AjaxServlet", true);
51             //第一個參數是請求的類型，get或者post，但是get會取得緩存的數據，get攜帶數據量有限，get對大量未知字符輸入時不穩定，有以上三點障礙時，請選擇POST;
52             //第二個參數是請求的地址url，這個 地址可以請求任何類型的文件如.txt .xml 或者是.js ，為了防止虛擬路徑問題，建議使用el表達式動態獲取地址，把url修改為：“${pageContext.request.contextPath}/servlet/AjaxServlet”。再者，如果擔心get請求取得了緩存數據，可以讓地址每次都不一樣就獲取不到緩存了，比如這樣寫：“${pageContext.request.contextPath}/servlet/AjaxServlet？t=”+Math.random()。
53             //第三個參數是設置async 參數，true為異步請求，false為同步請求，false請求時會導致瀏覽器鎖住，等數據處理完才能操作頁面。而且，當您使用 async=false 時，請不要編寫 onreadystatechange 函數，把代碼放到 send() 語句後面即可。就是說上面的document.getElementById("myDiv").innerHTML=callback;把這一段放到send後面。
54             //第四步：向服務器發送請求
55             xmlHttp.setRequestHeader("CONTENT-TYPE",
56                     "application/x-www-form-urlencoded");//向請求添加 HTTP 頭。可以添加多個。自行百度。
57             xmlHttp.send("name=張三");//send中的string是在請求正文裏，只在post的時候用，get的話就空著，因為例子是post請求的數據，所以這裏寫了一個例子。
58         }
59     }
60 </script>

底層ajax案例：
1.底層ajax用get獲取.txt文件
txt文件放在WebRoot文件夾內，.txt內容為：

1 <p id="txt1" style="color:red">woshi yiduan txt wenben !</p>
2 <p id="txt2">woshi dier duan txt wenben !</p>

js代碼：

 1 <script type="text/javascript">
 2     function createXMLHttpRequest() {
 3         try {
 4             xmlHttp = new XMLHttpRequest();
 5         } catch (tryMS) {
 6             try {
 7                 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
 8             } catch (otherMS) {
 9                 try {
10                     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
11                 } catch (failed) {
12                     xmlHttp = null;
13                     // 這裏可以報一個錯誤，無法獲得 XMLHttpRequest對象    
14                 }
15             }
16         }
17         return xmlHttp;
18     }
19     window.onload = function() {
20         document.getElementById("bt1").onclick = function() {
21             var xmlHttp = createXMLHttpRequest();
22             xmlHttp.onreadystatechange = function() {
23                 if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
24                     document.getElementById("myDiv").innerHTML = xmlHttp.responseText;
25                 }
26             }
27 
28             xmlHttp.open("GET",
29                     "${pageContext.request.contextPath}/test/test.txt?t="
30                             + Math.random(), true);
31 
32             xmlHttp.setRequestHeader("CONTENT-TYPE",
33                     "application/x-www-form-urlencoded");
34             xmlHttp.send();
35         }
36     }
37 </script>
38 
39 
40 </head>
41 
42 <body>
43 
44     <div id="myDiv">
45         <h2>通過 AJAX 改變文本</h2>
46     </div>
47     <button id="bt1">改變內容</button>
48 
49 </body>

展示結果：

說明：這裏怎麽會有顏色變化呢？因為，我們的xmlHttp.responseText是可以自動轉化標簽，

---------------------------------
2.json
說明:JSON是一種數據交互的格式.
數據的交互格式：
1.xml
1.標簽時成對出現的
2.xml中的格式對對固定,不允許修改.
如果對於數據要求較為嚴格時,首選xml(報文)
2.JSON
1.JSON是一種輕量級的數據交互格式.
在傳輸過程中,只需要傳遞有效信息.
對於數據要求相對寬松,並且傳遞速度較快時.
JSON格式說明：
array數組格式：
["value1","value2","value3"]

Object對象格式：
{"id":"1","name":"tom"}

復雜格式：
A:["value1","value2",{"id":1,"name":"tom"}]
B:[{id:"1",name:"tom"},{id:2,name:"jerry"},{id:3,name:"herry"}]
語法：如果value值是數字。可以不加""號，如果value值是字符，必須加""號，對於key而言，（註意是key！就是對象格式！），加不加""號都可以。
以上JSON格式要牢記！牢記！牢記！重要的事情說三遍。實在記不住，就都加上引號！
-------------------------
3.java中轉json的各種方法
第一種：String類型，要按著json格式寫出一個字符串，就像上面的一樣。
如：String str = {"book1":[{"yema":"12","neirong":"文縐縐"},{"頁碼":"22","neirong":"俠客片段"}],"book2":[{"頁碼":"1","內容":"愛情片段"},{"頁碼":"5","neirong":"恐怖片段"}]};
但是！直接這樣寫在java裏是不行的，因為""會編譯錯誤，需要用\號對每個“號進行轉義，這裏有一個網站可以快速轉義，地址，http://www.sojson.com/yasuo.html
在轉義後是這樣的
String str ="{\"book1\":[{\"yema\":\"12\",\"neirong\":\"文縐縐\"},{\"頁碼\":\"22\",\"neirong\":\"俠客片段\"}],\"book2\":[{\"頁碼\":\"1\",\"內容\":\"愛情片段\"},{\"頁碼\":\"5\",\"neirong\":\"恐怖片段\"}]}";
看。這一段放在java中就沒問題了。

ajax與json實戰