AJAX隨筆1

來源:互聯網
上載者:User

標籤:函數   對象   ons   form   如何   不能   同步   gen   手動   

[1] AJAX簡介
    > 全稱: Asynchronous JavaScript And XML
    > 非同步JavaScript和XML
    > AJAX就是通過JavaScript向伺服器發送請求,並接收響應,然後我們在通過DOM來修改頁面。
    > XML指的是伺服器響應的資料的格式。
    > 目前AJAX已經很少使用XML作為響應的格式。因為XML的解析效能及傳輸效能較差。
  
 [2] 同步和非同步
    >  同步:
       當我們通過瀏覽器向伺服器發送一個請求時,瀏覽器會重新整理整個頁面。
    > 非同步:
       當我們向伺服器發送請求時,不是重新整理整個網頁,而是只重新整理網頁的一部分。
 
 [3] XMLHttpRequest對象
    > 我們AJAX的所有操作都是圍繞著XMLHttpRequest對象進行。
    > 在XMLHttpRequest對象中封裝發送給伺服器請求報文,同時在伺服器發迴響應時,響應資訊也會在對象中封裝。
    > 如何擷取XMLHttpRequest對象
        - var xhr = new XMLHttpRequest();
 
 [4] 使用步驟
    1.建立XMLHttpRequest對象
       大部分比較新的瀏覽器都支援的方式(IE7以上)
          var xhr = new XMLHttpRequest();
       IE6以下的
          var xhr = new ActiveXObject("Msxml2.XMLHTTP");
       IE5.5以下的
          var xhr = new ActiveXObject("Microsoft.XMLHTTP");
    
       通用的擷取XMLHttpRequest對象的方法:
   

   //寫一個擷取XHR的方法   function getXMLHttpRequest(){    try{     //大部分瀏覽器都支援的方式     return new XMLHttpRequest();    }catch(e){     try{      //IE6以下瀏覽器支援的方式      return new ActiveXObject("Msxml2.XMLHTTP");     }catch(e){      try{       //IE5以下的瀏覽器       return new ActiveXObject("Microsoft.XMLHTTP");      }catch(e){       alert("你的瀏覽器不支援AJAX!");      }     }    }   }



    2.佈建要求資訊(請求地址,請求方式,請求參數)
       xhr.open(請求方式,請求地址);
       在發送post請求時,還需要設定一個要求標頭,如下:
          xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  
    3.發送請求
       xhr.send(請求體);
       get請求沒有請求體,所以send中可以傳null或什麼都不傳。
       post請求需要通過send來佈建要求參數。
   
  
      4.接收響應資訊

  //xhr綁定一個onreadystatechange響應函數,這個函數會在readyState屬性發生改變時調用   xhr.onreadystatechange = function(){    //判斷當前readyState是否為4 , 且響應狀態代碼為200    if(xhr.readyState==4 && xhr.status==200){     //讀取響應資訊,做相關操作。          //如果資訊為純文字     xhr.responseText          //如果資訊為XML     xhr.responseXML    }   };



 [5] 響應資料的格式
    - 響應一個XML
    - 當我們想通過servlet給ajax返回一個比較大量的資訊,返回一個對象。
    - 返回 User :username:sunwukong  age:18 gender:男
       username:sunwukgon,age:18,gender:男
    - 我們可以通過一個XML格式來返回一個大量的資訊
        <user>
        <name></name>
        <age></age>
        <gender></gender>
        </user>
   
    - 響應一個JSON對象
   
2.JSON
   [1] JSON簡介
      > JSON全稱 JavaScript Object Notation
      > 類似於JS中對象的建立的方法
      > JSON和XML一樣,都是一種表示資料的格式
      > 但是JSON比XML的儲存和解析效能要高的多,JSON要比XML高個30%左右。
          <user>
          <name>sunwukong</name>
          <age>18</age>
          <gender>男</gender>
          </user>
   
         {"name":"孫悟空","age":8,"gender":男}
  
   [2] JSON的格式
      > JSON字串不方便閱讀,但是傳輸效能好
      > XML方便閱讀,但是傳輸效能差
      > JSON的格式和JS物件類型,但是要求屬性名稱必須使用雙引號。不能使用單引號,也不能不寫引號!
  
  
      > JSON對象中實際就是一組一組的索引值對的結構,
         鍵和值使用:串連,多個索引值對之間使用,分開,注意如果是最後一組索引值對,則千萬不要在加,.
      > {
         "屬性名稱1":屬性值1,
         "屬性名稱2":屬性值2,
         "屬性名稱3":屬性值3,
         "屬性名稱4":屬性值4
        }
  
      > JSON運行屬性值的類型:
         1.字串  2.數字  3.布爾   4.對象  5.數組  6.null
   
      > 數組:
         [屬性1,屬性2,屬性3,屬性4]
 
   [3] JS中使用JSON 
      JSON對象 --> JSON字串
       JSON.stringify(對象)
      JSON字串 --> JSON對象
       JSON.parse(JSON字串)
 
   [4] Java中使用JSON
      > 目前Java中用的比較多的JSON解析工具:
         json-lib -->  使用麻煩,解析效能最差
         Jackson --> 使用較麻煩,解析效能最好
         Gson --> 使用簡單,解析效能中能
            - Gson是Google出的一款JSON解析工具,使用簡單,且效能較好。
               Java對象 --> JSON字串
               JSON字串 --> Java對象
  
3.通過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,不需要再手動指定。

AJAX隨筆1

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.