一、JS中的Ajax

ajax:非同步訪問/區域性重新整理

1.同步和非同步

2.Ajax的執行原理

頁面請求---->Ajax引擎----->提交給伺服器端

這段時間可以做任何事情

伺服器端響應------>Ajax引擎----->觸發設定好的事件，執行自定義的js邏輯程式碼,然後顯示頁面

js改變頁面，其原理是改變的是記憶體

3.ajax實現

• 建立ajax引擎
• 為ajax物件繫結監聽
• 繫結提交地址(get/post）
• 傳送請求

• 接受響應資料(在監聽物件裡面接收資料)

  js程式碼：

  var xmlhttp = new XMLHttpRequest();//1.建立引擎物件
      //2.繫結監聽
  xmlhttp.onreadystatechange = function(){
      if(xmlhttp.readeyState == 4&& xmlhttp.Status == 200){
              //5.接受響應資料-----接受伺服器響應的資料可以是json格式的資料
              var res = xmlhttp.responseText();
              alert(res);
      }
  }
  
  3.繫結提交地址
  xmlhttp.open("GET","${pageContext.request.contextPath}/AServlet",true);
  4.傳送請求
  xmlhttp.send();//裡面可以寫傳送請求的引數
   
  

  如果是POST請求的時候需要在繫結提交地址和傳送請求中間新增一個請求頭

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

總結：

所有的非同步訪問都是通過ajax引擎

二、JSON傳遞資料(重點)

1.JSON在ajax中資料傳遞格式

JSON傳遞資料的一種格式，當使用非同步傳輸的時候，
當伺服器響應資料的時候，需要使用一種格式在客戶端和服務端進行傳遞
當服務端響應給客服端的時候響應的是字串或者xml(ResponseText/ResponseXML),
如果響應一個物件給客戶端的時候就不能表示.
 

2.JSON格式

• JSON格式

  格式：物件格式:{"key1":obj,"key2":obj,"key3":obj,.....}
       集合/陣列格式：[obj,obj,obj,....]
      1)user物件，使用json來表示：
          {"username":"kevin","age":28,"hobby":"打遊戲"}
      2)List<User>使用Json來表示:
          [{"username":"cidy"},{"username":"tome","password":"123"}]
  注意：
      json裡面的key是字串，json裡面的value是Object
      這兩種形式可以相互巢狀，具體怎麼巢狀需要根據的自己的業務來
   
  

• 如何從JSON裡面取資料

  json是js原生的內容，在js裡面可以直接取出json裡面的資料
      比如在js程式碼裡面：
      1)物件形式：
          //person是json物件
          var person = {"username":"kevin","password":"123","age":28}
          //取age
          alert(person.age);//28
      2）集合形式
              var pesons = [
                            {"usranme":"kevin"},
                            {"username":"tome"},
                           ];
              //取tome
              alert(persons[1].username);//tome
      3）物件裡面巢狀集合
              var json = {"key":[{},{},{}]}
              var json = {
                          "username":[
                                      {"name":"kevin"},
                                      {"name":"lishi"},
                                      {"name":"wangwu"},  
                                  ]
                      }
              //取出lishi
            alert(json.username[1].name);//lishi
      4）物件裡面的多個key對應value是一個集合，集合裡面巢狀物件
              {
               "param1":[{key:value,key:value},{key:value,key:value}],
               "param2":[{key:value,key:value},{key:value,key:value}],
               "param3":[{key:value,key:value},{key:value,key:value}]
             }
      5）混合形式
          {
           "param1":"value1",
           "param2":{},
           "param3":[{key:value,key:value},{key:value,key:value}]
          }
      其實上面取資料也可以叫做物件導航，
      在EL表示式中，我們把資料儲存在javaben中的時候也可以像這種形式(物件導航來）取資料
      注意：
          在json裡面取資料，如果是集合的形式我們是通過下標來確定位置，然後像java中物件呼叫方法從而取到自己想要的資料
  

• json外掛

三、jQuery中的Ajax(重點)

    再實際開發中使用下面三種方式：
    $.post(url,[date],[callback],[type]);
    $.get(url,[date],[callback],[type]);
    $.ajax([options]);

1. $.post(url,[date],[callback],[type])和$.get(url,[date],[callback],[type])

   - url://請求路徑
   - date:把什麼資料傳遞給伺服器，可以是json格式（請求引數）
   - callback:服務端成功響應所觸發的事件，只有正常成功返回才能執行
   - type:返回的格式,一般我們寫json格式或者text格式，其實還有xml,html格式等
   

   思路分析：

   $.get(
           //提交的地址，相當於open裡面的其中一個url引數
           "${pageContext.request.contextPath}/ajaxServlet2",
   
           //傳遞引數，引數的形式可以寫成json形式
           {"name":"keivn","age":28},
   
           //服務端成功響應所觸發的事件，
           //在ajax中這裡相當於xmlhttp.onreadystatechange部分
           //函式裡面的引數date表示伺服器成功響應給客戶端的資料，
           //響應給客戶端的資料我們在伺服器端可以寫成字串形式的json格式
           //比如:"{\"name\":\"tome\",\"age\":\"29\"}",  
           //需要注意的是不能用單引號，只能用轉義字元，因為jquery在進行解析的時候
           //會呼叫jQuery.parseJSON(json)這個方法進行解析，如果用單引號會出現畸形的
           //json格式的字串,所謂畸形的json字串有以下兩種：
           //{test: 1} （ test 沒有包圍雙引號）
           //{'test': 1} （使用了單引號而不是雙引號）
           //另外，如果你什麼都不傳入，或者一個空字串、null或undefined，
           //parseJSON都會返回 null 。
           //這裡的名稱可以隨便取名字
           function (date){
               alert(date);
           }
   
           //type:返回的格式
           //如果伺服器端返回的是json格式的字串，這裡我們
           //用text型別進行解析，返回的是json格式的字串
           //如果使用json進行解析，返回的是json物件，那麼我們都可以用json物件導航
           //取出我們想要的資料
           "text"  //“json"
       );
   

   注意：post請求和get請求的寫法是一樣的，但是jquery中的post請求，他處理了中文問題，在伺服器端接受請求資料的時候，不必要寫request.setCharacterEncoding(“utf-8”)進行處理亂碼，而get請求的時候需要我們先解碼，在編碼進行處理亂碼問題

       String name = request.getParameter("name");
       name = new String (name.getBytes("iso-8859-1"),"utf-8");
   

2. $.ajax([options])