一、AJAX簡介

 AJAX即“Asynchronous JavaScript and XML”（非同步JavaScript和XML)，是指一種建立互動式網頁應用的網頁開發技術。AJAX不是一種新的程式設計語言，而是一種用於建立更好更快以及互動性更強的 Web 應用程式的技術。

   AJAX使用Javascript向伺服器提出請求並處理響應而不阻塞使用者！核心物件是XMLHTTPRequest。通過這個物件，您的 JavaScript 可在不過載頁面的情況與Web伺服器交換資料。AJAX 在瀏覽器與 Web 伺服器之間使用非同步資料傳輸（HTTP 請求），這樣就可使網頁從伺服器請求少量的資訊，而不是整個頁面。

  AJAX 是一種獨立於 Web 伺服器軟體的瀏覽器技術。　AJAX 基於下列 Web 標準：

JavaScriptXMLHTMLCSS在 AJAX 中使用的 Web 標準已被良好定義，具體表現為：

  使用DOM（Document Object Model）進行動態顯示及互動；

  使用 XML 和XSLT進行資料交換及相關操作；

  使用 XMLHttpRequest 進行非同步資料查詢、檢索；

  使用 JavaScript 將所有的東西繫結在一起。

同時AJAX 並被所有的主流瀏覽器支援。所以可以說AJAX 應用程式獨立於瀏覽器和平臺。

  傳統的web應用允許使用者填寫表單(form），

   與此不同，AJAX應用可以僅向伺服器傳送並取回必需的資料，它使用SOAP或其它一些基於XML的web service介面，並在客戶端採用JavaScript處理來自伺服器的響應。因此在伺服器和瀏覽器之間交換的資料大量減少，結果我們就能看到響應更快的應用。同時很多的處理工作可以在發出請求的客戶端機器上完成，所以Web

使用Ajax的最大優點，就是能在不更新整個頁面的前提下維護資料。這使得Web應用程式更為迅捷地迴應使用者動作，並避免了在網路上傳送那些沒有改變過的資訊。

二、原生態AJAX使用介

目前幾乎都用jquery來建立XMLHttpRequest物件了，這裡就稍微介紹下原始的Js呼叫ajax的使用：

//1.建立XMLHttpRequest物件

var xmlhttp;

if(window.XMLHttpRequest){

    //針對火狐 Mozillar Opera IE7 IE8

    xmlhttp=new XMLHttpRequsest();

    //針對某些特定的版本mosillar瀏覽器BUG進行修正

   if(xmlhttp.overrideMimeType){

        xmlhttp.overrideMimeType("text/xml");

     }

   }

  else if(window.ActiveXObject){

     //針對IE6以下

    //兩個可以建立XMLHTTPRequest物件的控制元件名稱，儲存在一個js數組裡，前者版本新

    var activexName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];

    for(var i=0;i<activexName.lenghth;i++){

  try{

       xmlhttp=new ActiveXObject(activexName[i]);

        break;

     }catch(e){}

    }

   }

       if(!xmlhttp){

            alert("XMLHttpRequest物件建立失敗");

            return;

       } else{

            alert(xmlhttp);

         }

2.註冊回撥函式

  //註冊回撥函式時，需要函式名，不要加括號

  //我們需要將函式註冊 如果加上括號 就會把函式的返回值註冊上 錯誤

xmlhttp.onreadystatechange=callback;

3.設定連線資訊

xmlhttp.open("GET","Servlet?name="+name,true);

//第一個引數表示http請求方式 GET/POST

//第二個是請求的url地址 get方式請求的引數也在Url中

//第三個引數表示採用非同步還是同步方式互動 true 表示非同步,/同步方式下 send這句話會在伺服器端資料回來後才執行完   //非同步方式下，send這句話會立即執行 預設非同步

//POST方式

    xmlhttp.open("post","Server",true);

    //post需要自己設定HTTP的請求頭

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

    //post 方式傳送資料

    xmlhttp.send("name="+name);

4 傳送資料

//回撥函式、

function callback(data){data即返回的資料

5.接收相應資料

//判斷物件的狀態是否互動完成

if(xmlhttp.readyState==4){

//判斷http互動是否成功

readyState的取值如下：0（未初始化） 1（正在裝載） 2（裝載完畢） 3（互動中） 4（完成）

if(xmlhttp.status==200){

//獲取伺服器端的返回資料

//獲取伺服器端輸出的純文字資料

var responseText=xmlhttp.responseText;

//獲取伺服器端輸出的XML格式資料

var domObj= xmlhttp.responseXML;

//後臺需要httpResponse.setCnontextType("text/xml;charset=utf-8");返回格式：<mess>xxx</mess>

var messNode=domObj.getElementsByTagName("mess");

var textNode=messNode[0].firstChild;

var resMess=textNode.nodeValue;

//資料顯示到頁面

//

}

}

}

三、Jquery+AJAX的結合使用

1  呼叫方式    

$.ajax(

       {

          type: "POST",

          url: "serverlet",

     //data："username="+username,

          data: {" uid": str}, // uid為引數的名稱，str為值；多個引數寫法："{'引數1':'值1','引數2'：'值2',.....}"

          contentType: "application/json;charset=utf-8",

          dataType: "json",//告訴jquery的返回資料格式。          success: function (msg) {

        //成功返回資料msg(格式為dataType設定的格式),並進行相應的頁面重新整理操作

}

附：jquery還有兩種呼叫方式，這裡就不介紹了：

$.get(servlet,data,callback);  $.post(servlet,data,callback);

2  引數介紹

附：

1、返回XML格式資料

        前臺需設定dataType為xml，同時後臺需要httpResponse.setCnontextType("text/xml;charset=utf-8");

例如返回格式：<div><span>ss</span></div>

由於xml類似於DOM節點，所以使用操作DOM節點的方法可以取出XML資料

var jqueryObj=$(msg);

var text=jqueryObj.children();

var msgtext=text.text();

msgtext== <span>ss</span>

2、返回json格式資料

 注意：經過經驗教訓，如果返回json格式資料，而且後臺要接受前臺傳來的資料，則前臺不要設定 contentType。

前臺設定dataType=”json”，如果不設定的話，返回字串格式的json資料，需要使用eval進行轉換：var jsonBack=eval("("+dataBack+")");如果已經設定為json格式，則不需要進行轉換，jquery會幫你轉換，然後可以進行對json格式資料的獲取：

如：

dataBack={

{"id":2,"name":"p1","birthDay":"Jan 15, 2014 2:09:00 PM"},

{"id":3,"name":"p2","birthDay":"Jan 15, 2014 2:09:00 PM"}

};

$.each(dataBack,function(i,n){

     var id=data[i].id;

     var name=data[i].name;

     alert(“第”+i+”個人，id為”+id+”;名字為：”+name);               

}

)

3  AJAX快取問題  

   使用時間戳，給url地址增加時間戳，騙過瀏覽器，不讀取快取，（IE下認為如果url是一樣的 就讀快取的資料）

//獲取時間戳

var timestamp=(new Date()).valueOf();

//時間戳拼接到url上，

//url=serverlet

if(url.indexOf("?")>=0){

url=url+"&t="+timestamp;

}else{

url=url+"?t="+timestamp;

}

4  亂碼問題

(1)前臺：將傳送的中文 encodeURI("中文")  (IE解決方案)

   後臺:name1=new String(name.getBytes("iso8859-1","UTF-8"));

(2)前臺發出的資料作兩次encodeURI

encodeURI(encodeURI("中文"))；

後臺：name1=URLDecoder.decode(name,"UTF-8")

5  使用Gson處理Json資料

   Gson（又稱Google Gson）是Google公司釋出的一個開放原始碼的Java庫，主要用途為序列化Java物件為JSON字串(toJson()方法)，或反序列化JSON字串成Java物件(fromJson()方法)。使用起來十分方便。

   為了測試，前臺傳到後臺的是json字串，所以使用JSON.stringify()方法將json物件轉化為json格式的字串，需要使引入json2.js，同時後臺引入gson-2.2.4.jar包。

5.1前臺傳入後臺資料：

$.ajax(

       {

          type: "POST",

          url: "serverlet",

     //data："username="+username,

          data: {“uid”: str }", // uid為引數的名稱，str為值；多個引數寫法："{'引數1':'值1','引數2'：'值2',.....}"

          contentType: "application/json;charset=utf-8",

          dataType: "json",//告訴jquery的返回資料格式。          success: function (msg) {

        //成功返回資料msg(格式為dataType設定的格式),並進行相應的頁面重新整理操作

}

l 單資料格式：

data:"num="+num或者data:{"num":$("#num").val()}

l Json格式的資料字串:

var data={};

data.id=$("#num").val();//11

data.name=$("#num1").val();//宋健

var myData=JSON.stringify(data);//通過stringify()方法將js物件轉換為json格式字串{“id”:”1”,”name”:”宋健”}

data:myData

   這裡主要介紹經常用的json格式資料的互動，測試案例為：前臺兩個輸入框，用於輸入id和姓名，點選按鈕後在下方顯示id,姓名,生日；後臺有一個javaBeand物件Student,擁有三個屬性 id name birthDay，通過ServletInputStream接收輸入框的資料，使用Gson的toJson()將此資料轉換為Student物件，同時設定物件的生日屬性為此刻時間，最後通過Gson的toJson()方法將物件以List或者HashMap的形式轉為為json格式字串傳給前臺。

5.2接收處理前臺傳入的資料：

1、單個數據  // String num1=request.getParameter("num");           

2、Json格式的單個數據如：{“num”:11}

     // String num1=request.getParameter("num");  

3、Json 格式資料字串

l 通過ServletInputStream獲取POST的資料即接收輸入框的資料

BufferedReader br=newBufferedReader(new InputStreamReader( (ServletInputStream) request.getInputStream())); 

            String line = null; 

            StringBuilder jsonRec= new StringBuilder(); //用於接收返回的json字串

            while ((line = br.readLine()) != null) { 

                jsonRec.append(line); 

            } 

得到的json字串：jsonRec={"id":"11","name":"宋健"}

l 將json字串轉化為對應的javaBean物件（）：

 Gson gson = new Gson(); // 例項化Gson物件

//如果要對輸出的json格式的字串進行指定格式 可以使用以下例項化：

 Gson gson = new GsonBuilder().setDateFormat("yyyy-MM-dd HH:mm:ss").create();

//將json格式字串轉化為對應的javaBean物件，如果物件的某一屬性在此字串中找不到對應名字的值，則物件的此屬性置根據型別為初始值如int 為0 ,string null

Student student= gson.fromJson(jsonRec.toString(), Student.class); 

輸出結果：Student==[birthDay=null, id=1, name=宋健]

l 設定物件的生日為此刻時間

 student.setBirthDay(new Date());

l 轉換物件為json格式串返回前臺

1、以單獨一個物件返回

  String s = gson.toJson(student);  

輸出結果：s==={"id":1,"name":"宋健","birthDay":"2014-01-16 10:55:28"}

2、以List封裝物件返回

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

list.add(student);  

String s = gson.toJson(student);

輸出結果：s===[{"id":1,"name":"宋健","birthDay":"2014-01-16 10:55:28"}]

3、以HashMap封裝物件返回

HashMap<Integer,Student> map= new HashMap<Integer,Student>();

map.put(student.getId(), student);

String s = gson.toJson(student);

輸出結果：s==={"1":{"id":1,"name":"宋健","birthDay":"2014-01-16 11:18:59"}}