Web基礎瞭解版11-Ajax-JSON

Ajax

 AJAX即「Asynchronous Javascript And XML」：是，不發生頁面跳轉、異步請求載入內容並改寫局部頁面內容的技術。

 也能夠簡單的理解爲經過JS向服務器發送請求。

 同步處理：

 就是當咱們經過一個頁面向服務器發送一個請求時，在服務器響應結束以前，咱們的整個頁面是不能操做的，而且即便整個頁面中只有一小部份內容發生改變咱們也要刷新整個頁面。

異步處理：

 經過AJAX向服務器發送請求，當服務器正常響應請求後，響應信息會直接發送到AJAX中，AJAX能夠根據服務器響應的內容作一些操做。並可局部的修改頁面，而不須要整個頁面刷新。

請求對象：XMLHttpRequest

•  XMLHttpRequest對象用來封裝請求報文，咱們向服務器發送的請求信息所有都須要封裝到該對象中。

獲取XMLHttpRequest對象，不一樣瀏覽器之間有差別

//獲取XMLHttpRequest的通用方法
function getXMLHttpRequest(){
    var xhr;
    try{
        //大部分瀏覽器都支持
        xhr = new XMLHttpRequest();
    }catch(e){
        try{
            //若是不支持，在這裏捕獲異常而且採用IE6支持的方式
            xhr = new ActiveXObject("Msxml2.XMLHTTP");
        }catch(e){
            //若是還不支持，在這裏捕獲異常並採用IE5支持的方式
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return xhr;
}

 

XMLHttpRequest對象的方法

• open(method,url,async)：用於設置請求的基本信息，接收三個參數。

  • 參數一：method

    接收一個字符串，代表請求的方法：get或post

  • 參數二：url

    請求的地址，接收一個字符串

  • 參數三：Assync

    發送的請求是否爲異步請求，接收一個布爾值。① true 是異步請求 ② false 不是異步請求（同步請求）

• send(string)：用於將請求發送給服務器，能夠接收一個參數

  • string參數

    該參數只在發送post請求時須要。用於設置請求體

• setRequestHeader(header,value)：用於設置請求頭

  • 參數一：header參數

    字符串類型，要設置的請求頭的名字

  • 參數二：value參數

    字符串類型，要設置的請求頭的值

XMLHttpRequest對象的屬性

• readyState

  • 描述XMLHttpRequest的狀態

  • 一共有五種狀態分別對應了五個數字：

    • 0 ：請求還沒有初始化，open()還沒有被調用

    • 1 ：服務器鏈接已創建，send()還沒有被調用

    • 2 ：請求已接收，服務器還沒有響應

    • 3 ：請求已處理，正在接收服務器發送的響應

    • 4 ：請求已處理完畢，且響應已就緒。

• status

  • 請求的響應碼

    • 200 響應成功

    • 404 頁面爲找到

    • 500 服務器內部錯誤

      ......

• onreadystatechange

  • 該屬性須要指向一個函數

  • 該函數會在readyState屬性發生改變時被調用

• responseText

  • 得到字符串形式的響應數據。

• responseXML（用的比較少）

  • 得到 XML 形式的響應數據。

JQuery的Ajax請求

四個Ajax請求方法

• $.ajax方法

• $.get方法

• $.post方法

• $.getJSON方法

一個表單序列化方法：serialize()表單序列化方法

$.ajax請求

• url： 請求的地址
• type : 請求的方式 get或post
• data : 請求的參數 string或json
• success: 成功的回調函數
• dataType: 返回的數據類型 經常使用json或text

$.get和$.post請求

• url:請求的URL地址
• data:待發送 Key/value 參數。
• callback:載入成功時回調函數。
• type:返回內容格式，xml, html, script, json, text。

$.getJSON請求

• url:待載入頁面的URL地址
• data:待發送 Key/value 參數。
• callback:載入成功時回調函數。

表單的序列化

• serialize() 方法能夠把一個form表單中全部的表單項。都以字符串name=value&name=value的形式進行拼接

$.ajax({
    url : "ajaxServlet", 　　　　// 請求地址
    error:function(){   　　　 　// 請求失敗回調
        alert("請求失敗");
    },
    success:function(data){ 　　 // 請求成功回調
        alert( data );
    },
    type:"POST",                // 請求的方式
    dataType:"json",            // 返回的數據類型爲json對象
    data:{                      // 請求的參數
         action:"jqueryAjax",
         a:12,
         date: new Date()
     }
 });

 

JSON

JSON是JavaScript Object Notation 的縮寫，是JS提供的一種輕量級的數據交換格式， 易於人閱讀和編寫。同時也易於機器解析和生成。

JSON對象本質上就是一個JS對象，可是這個對象比較特殊，它能夠直接轉換爲字符串，在不一樣語言中進行傳遞，經過工具又能夠轉換爲其餘語言中的對象。

在標準的json格式中，json對象由大括號括起來，對象中的屬性也就是json的key是一個字符串，因此必定要使用雙引號引發來。每組key之間使用逗號進行分隔。

JSON 6種數據類型

• 字符串           //注意：不能使用單引號

• 數字

• 布爾值

• null值

• 對象

  • 例子：{「name」:」sunwukong」, 」age」:18}

• 數組

  • 例子：[1,」str」,true]

JSON對象的訪問

key就是對象的屬性。咱們要訪問一個對象的屬性，只須要使用【對象名.屬性名】的方式訪問便可。

JSON對象和字符串對象的互轉

• JSON.stringify( json )：此方法能夠把一個json對象轉換成爲json字符串

• JSON.parse( jsonString )： 此方法能夠把一個json字符串轉換成爲json對象

JSON在Java中的使用

Gson 提供了用來在 Java 對象和 JSON 數據之間進行映射的 Java 類庫，能夠將一個 JSON 字符串轉成一個 Java 對象，或者反過來。

• java對象和json的轉換

• java對象list集合和json的轉換

• map對象和json的轉換

 // json操做，必定要先new一個gson對象。
Gson gson = new Gson();

// 一、把對象轉成爲json字符串
String personjson = gson.toJson(person);
// 把json字符串轉換成爲java對象
Person p = gson.fromJson(personjson, Person.class);    

//二、java對象list集合和json的轉換
String jsonListString = gson.toJson(list);
// 把json數組轉換成爲List對象
List<Person> ps = gson.fromJson(jsonListString, new PersonType().getType());

// 三、map對象和json的轉換
String jsonMapString = gson.toJson(mapPerson);
// 經過使用匿名內部類的方式
Map<String, Person> map = gson.fromJson(jsonMapString,new TypeToken<HashMap<String, Person>>() {}.getType());