關於AJAX

AJAX = Asynchronous JavaScript and XML（非同步的 JavaScript 和 XML）。

Ajax作用：是用JavaScript向伺服器發送非同步請求，然後伺服器給出響應，然後以XML格式的文件返回給瀏覽器端！
　　非同步：當瀏覽器向伺服器發送請求的時候，不是整個頁面刷新，而是局部刷新[局部信息發送請求]！
　　同步：當瀏覽器向伺服器發送請求的時候，整個頁面都會刷新！

　　XML:一種文件格式，現在用XML這種返回格式的數據比較少了，XML解析性能較差，而且比較消耗帶寬[]，現在大多數都是在是使用JSON數據的返回格式！!

使原生js發送AJAX請求步驟：
　　1).創建XMLHttpRequest對象
　　2).給open方法設置請求參數[method,url]
　　3).發送請求(send()方法)
　　4.需要使用onreadystatechange回調函數監聽readyState這個屬性狀態變化！

案例Get請求：

　　servlet向jsp發送信息：

response.getWriter().println("hello world");

　　jsp頁面：

 1 　　<script type="text/javascript">
 2  　　   window.onload = function(){
 3  　　       var btn = document.getElementById("btn01");
 4  　　           btn.onclick=function(){
 5  　　           //1.創建XMLHttpRequest對象，我們使用這個對象完成Ajax請求！
 6  　　           var xhr = new XMLHttpRequest();
 7  　　           
 8 　　            //2.通過open方法設置請求參數
 9  　　           var method= "get";
10  　　           var url = "${pageContext.request.contextPath}/AServlet";
11  　　           xhr.open(method, url);
12  　　           
13  　　           //3.發送請求！
14  　　           xhr.send();
15   　　          //4.接收響應信息
16   　　          xhr.onreadystatechange= function(){
17   　　              if(xhr.readyState == 4 && xhr.status == 200 ){
18   　　                  var data = xhr.responseText;
19   　　                  alert(data);
20  　　               }
21   　　          }
22   　　      }
23   　　  }
24 　　</script>

案例POST請求：　　

 1　　 <script type="text/javascript">
 2　　     window.onload = function(){
 3 　　        var btn = document.getElementById("btn01");
 4 　　            btn.onclick=function(){
 5 　　            //1.創建XMLHttpRequest對象，我們使用這個對象完成Ajax請求！
 6  　　           var xhr = new XMLHttpRequest();
 7 　　            
 8 　　            //2.通過open方法設置請求參數
 9 　　            var method= "post";
10 　　            var url = "${pageContext.request.contextPath}/AServlet";
11 　　            xhr.open(method, url);
12 　　            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
13 　　            //3.發送請求！
14  　　           xhr.send("username=zhangsan&password=lisi");
15 　　            //4.接收響應信息
16 　　            xhr.onreadystatechange= function(){
17 　　                if(xhr.readyState == 4 && xhr.status == 200 ){
18  　　                   var data = xhr.responseText;
19 　　                    alert(data);
20 　　                }
21 　　            }
22  　　       }
23 　　    }
24 　　</script>

JSON：JavaScript 對象表示法（JavaScript Object Notation）
　　作用：JSON 是存儲和交換文本信息的語法
　　優勢：JSON 比 XML 更小、更快，更易解析。

　　json對象是用{}括起來的鍵值對結構：
　　　　1.鍵和值之間用:分隔
　　　　2.鍵值對之間用,分隔
　　　　3.鍵必須是字元串類型，也就是說必須用""[雙引號]引起來！不能使用單引號，也不能不用引號！
　　　　4.JSON值的數據類型：
　　　　　　數字（整數或浮點數）
　　　　　　字元串（在雙引號中）
　　　　　　邏輯值（true 或 false）
　　　　　　數組（在方括弧中）
　　　　　　對象（在花括弧中）
　　　　　　null
　　　　註意點：JSON對象是用{}括起來的，而數組是用【】括起來的！

　　JSON對象和JSON字元串之間的相互轉換：
　　　　JSON對象轉換為JSON字元串：
　　　　var jsonStr = JSON.stringify(json);
　　　　JSON字元串轉換為JSON對象：
　　　　var jsonObj = JSON.parse(jsonStr);

 1     //1將普通對象轉換為JSON字元串！
 2         Student  stu = new Student("張三",12);
 3         Gson gson = new Gson();
 4         
 5         String json = gson.toJson(stu);
 6         System.out.println(json);
 7         Student fromJson = gson.fromJson(json, Student.class);
 8         System.out.println(fromJson);
 9         
10         //2.把Map轉換成JSON字元串
11         Map<String,String> map = new HashMap();
12         map.put("hobby","籃球");
13         map.put("gender", "男");
14         String json2 = gson.toJson(map);
15         System.out.println(json2);
16         Map<String,String> fromJson = gson.fromJson(json2, Map.class);
17         System.out.println(fromJson);
18         
19         //3.將List轉換為JSON字元串
20         List<Student> list = new ArrayList<Student>();
21         list.add(new Student("劉德華", 53));
22         list.add(new Student("馮小剛",63));
23         
24         String json3 = gson.toJson(list);
25         
26         System.out.println(json3);
27         List<Map<String,Object>> fromJson = gson.fromJson(json3, List.class);
28         for(Map map:fromJson){
29             System.out.println(map.get("name"));
30         }    

通過jQuery實現AJAX
　　 使用get和getJSON都會有緩存問題，並且使用get方法不能傳送較多的數據。
　　post方法不會有緩存的問題，所以我們開發時使用post方法較多。

　　[1] post()方法
　　　　$.post(url, [data], [callback], [type])
　　　　參數：
　　　　　　url：發送AJAX的請求地址，字元串。
　　　　　　data：發送給伺服器的請求參數，JSON格式。
　　　　　　callback：當前需要獲取伺服器發送的響應時，我們可以通過該回調函數。
　　　　　　jQuery會將響應信息以回調函數的參數的形式返回
　　　　　　type：響應信息的類型，字元串。一般兩個常用值text、json

　　[2] get()方法
　　　　get方法和post方法使用方式基本一致。

　　[3] getJSON()方法
　　　　getJSON(url, [data], [callback])
　　　　getJSON方法和get方法類似，只不過該方法預設的響應類型為JSON，不需要再手動指定。