Ajax

AJAX

簡介

·AJAX 是Asynchronous JavaScript And XML 的簡稱。直譯爲，異步的JS和XML。

·AJAX的實際意義是，不發生頁面跳轉、異步載入內容並改寫頁面內容的技術。

·AJAX也可以簡單的理解爲通過JS向服務器發送請求。

 ·AJAX這門技術很早就被髮明，但是直到2005年被谷歌的大量使用，纔在市場中流行起來，可以說Google爲AJAX的推廣起到到推波助瀾的作用。

 異步處理：

 同步處理：

 AJAX出現之前，我們訪問互聯網時一般都是同步請求，也就是當我們通過一個頁面向服務器發送一個請求時，在服務器響應結束之前，我們的整個頁面是不能操作的，也就是直觀上來看他是卡主不動的。

 這就帶來了非常糟糕的用戶體驗。首先，同步請求時，用戶只能等待服務器的響應，而不能做任何操作。其次，如果請求時間過長可能會給用戶一個卡死的感覺。最後，同步請求的最大缺點就是即使整個頁面中只有一小部分內容發生改變我們也要刷新整個頁面。

 異步處理：

· 而異步處理指的是我們在瀏覽網頁的同時，通過AJAX向服務器發送請求，發送請求的過程中我們瀏覽網頁的行爲並不會收到任何影響，甚至主觀上感知不到在向服務器發送請求。當服務器正常響應請求後，響應信息會直接發送到AJAX中，AJAX可以根據服務器響應的內容做一些操作。

· 使用AJAX的異步請求基本上完美的解決了同步請求帶來的問題。首先，發送請求時不會影響到用戶的正常訪問。其次，即使請求時間過長，用戶不會有任何感知。最後，AJAX可以根據服務器的響應信息局部的修改頁面，而不需要整個頁面刷新。

請求對象

· 向服務器發送請求，毫無疑問需要使用Http協議，也就是我們需要通過JS來向服務器發送一個請求報文。這裏我們來回顧一下請求報文的格式：

請求首行

請求頭

空行

請求體

· 這是一個請求報文的格式，那我們如果手動的創建這麼一個報文格式來發送給服務器想必是非常麻煩呢，於是瀏覽器爲我們提供了一個XMLHttpRequest對象。

XMLHttpRequest

· XMLHttpRequest對象是AJAX中非常重要的對象，所有的AJAX操作都是基於該對象的。

· XMLHttpRequest對象用來封裝請求報文，我們向服務器發送的請求信息全部都需要封裝到該對象中。

· 這裏需要稍微注意一下，XMLHttpRequest對象並沒有成爲標準，但是現在的主流瀏覽器都支持該對象，而一些如IE6的老版本瀏覽器中的創建方式有一些區別，但是問題不大。

· 獲取XMLHttpRequest對象：

· 由於瀏覽器之間的差異，不同瀏覽器中獲取XMLHttpRequest的方式不同，但總的來說一共有三種方式：

·  var xhr = new XMLHttpRequest()

· 目前主流瀏覽器都支持

·  var xhr = newActiveXObject("Msxml2.XMLHTTP")

·  IE6支持的方式

·  var xhr = newActiveXObject("Microsoft.XMLHTTP")

·  IE5.5一下支持的方式

·  根據三種不同的方式編寫通用方法來獲取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)

·  open()用於設置請求的基本信息，接收三個參數。

1.        method

·  請求的方法：get或post

· 接收一個字符串

2.        url

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

3.        Assync

· 發送的請求是否爲異步請求，接收一個布爾值。

· true 是異步請求

· false 不是異步請求（同步請求）

· send(string)

· send()用於將請求發送給服務器，可以接收一個參數

1.        string參數

· 該參數只在發送post請求時需要。

· string參數用於設置請求體

· setRequestHeader(header,value)

· 用於設置請求頭

1.        header參數

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

2.        value參數

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

· XMLHttpRequest對象的屬性：

· readyState

· 描述XMLHttpRequest的狀態

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

· 0 ：請求尚未初始化，open()尚未被調用

· 1 ：服務器連接已建立，send()尚未被調用

· 2 ：請求已接收，服務器尚未響應

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

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

· status

· 請求的響應碼

· 200 響應成功

· 404 頁面未找到

· 500 服務器內部錯誤

… … … …

· onreadystatechange

· 該屬性需要指向一個函數

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

· responseText

·獲得字符串形式的響應數據。

·responseXML（用的比較少）

·獲得 XML 形式的響應數據。

示例代碼

·使用AJAX發送GET請求

//獲取xhr對象

var xhr = getXMLHttpRequest();

//設置請求信息

xhr.open("get","AjaxServlet?&t="+Math.random(),true);

//發送請求

xhr.send();

//監聽請求狀態

xhr.onreadystatechange = function(){

//當響應完成

    if(xhr.readyState == 4){

       //且狀態碼爲200時

       if(xhr.status == 200){

           //接收響應信息（文本形式）

           var text = xhr.responseText;

           //彈出消息

         alert(text);

       }

    };

};

·這是一個最簡單的AJAX代碼，向AjaxServlet發送了一個get請求，並且在頁面中輸出響應的內容

·使用AJAX發送POST請求

//獲取xhr對象

var xhr = getXMLHttpRequest();

//設置請求信息

xhr.open("post","2.jsp",true);

//設置請求頭

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

//發送請求

xhr.send("hello=123456");

//監聽請求狀態

xhr.onreadystatechange = function(){

//當響應完成

if(xhr.readyState == 4){

    //且狀態碼爲200時

    if(xhr.status == 200){

       //接收響應信息（文本形式）

       var text = xhr.responseText;

       //彈出消息

       alert(text);

    }

};

JSON

·上邊兩個示例返回都是一個字符串，那當我們需要返回一個複雜的數據時，比如說需要返回一個對象時，就需要定義一下數據的格式。

·AJAX一開始使用的時XML的數據格式，XML的數據格式非常簡單清晰，容易編寫，但是由於XML中包含了過多的標籤，以及十分複雜的結構，解析起來也相對複雜，所以目前來講，AJAX中已經幾乎不使用XML來發送數據了。取而代之的是一項新的技術JSON。

·JSON是JavaScriptObject Notation 的縮寫，是JS提供的一種數據交換格式。

·JSON對象本質上就是一個JS對象，但是這個對象比較特殊，它可以直接轉換爲字符串，在不同語言中進行傳遞，通過工具又可以轉換爲其他語言中的對象。

·例，有如下一個JSON對象：

·{“name”:”sunwukong” , ”age”:18, ”address”:”beijing” }

·這個對象中有三個屬性name、age和address

·如果將該對象使用單引號引起了，那麼他就變成了一個字符串

·‘{“name”:”sunwukong” , ”age”:18, ”address”:”beijing” }’

·變成字符串後有一個好處，就是可以在不同語言之間傳遞。

·比如，將JSON作爲一個字符串發送給Servlet，在Java中就可以把JSON字符串轉換爲一個Java對象。

·JSON通過6種數據類型來表示：

·字符串

·例子：”字符串”

·注意：不能使用單引號

·數字：

·例子：123.4

·布爾值：

·例子：true、false

· null值:

·例子：null

·對象

·例子：{“name”:”sunwukong”, ”age”:18}

·數組

·例子：[1,”str”,true]

·在JS中操作JSON

·創建JSON對象

·var json = {“name1”:”value1”,”name2”:”value2”, “name3”:[1,”str”,true]};

·var json =[{“name1”:”value1”},{“name2”:”value2”}];

·JSON對象轉換爲JSON字符串

·JSON.stringify(JSON對象)

·JSON字符串轉換爲JSON對象

·JSON.parse(JSON字符串)

·在Java中操作JSON

·在Java中可以從文件中讀取JSON字符串，也可以是客戶端發送的JSON字符串，所以第一個問題，我們先來看如何將一個JSON字符串轉換成一個Java對象。

·首先解析JSON字符串我們需要導入第三方的工具，目前主流的解析JSON的工具大概有三種json-lib、jackson、gson。三種解析工具相比較json-lib的使用複雜，且效率較差。而Jackson和gson解析效率較高。使用簡單，這裏我們以gson爲例講解。

·Gson是Google公司出品的解析JSON工具，使用簡單，解析性能好。

·Gson中解析JSON的核心是Gson的類，解析操作都是通過該類實例進行。

·廢話不多說直接上代碼。

·解析外部文本文件中的JSON：

1.        JSON字符串轉換爲對象

String json = "{\"name\":\"張三\",\"age\":18}";

Gson gson = new Gson();

//轉換爲集合

Map<String,Object> stuMap = gson.fromJson(json, Map.class);

//如果編寫了相應的類也可以轉換爲指定對象

Student fromJson = gson.fromJson(json, Student.class);

2．對象轉換爲JSON字符串

Student stu = new Student("李四", 23);

Gson gson = new Gson();

//{"name":"李四","age":23}

String json = gson.toJson(stu);

      

Map<String , Object> map = new HashMap<String, Object>();

map.put("name", "孫悟空");

map.put("age", 30);

//{"age":30,"name":"孫悟空"}

String json2 = gson.toJson(map);

      

List<Student> list = new ArrayList<Student>();

list.add(new Student("八戒", 18));

list.add(new Student("沙僧", 28));

list.add(new Student("唐僧", 38));

//[{"name":"八戒","age":18},{"name":"沙僧","age":28},{"name":"唐僧","age":38}]

String json3 = gson.toJson(list);