ajax和json

1、json

一、 json是什麼

它是js提供的一種數據交換格式！

二、json的語法

   {}：是對象！

   屬性名必須使用雙引號括起來！單引不行！！！

   屬性值： null、數值、字符串、 數組：使用[]括起來、boolean值：true和false

eg：

var person = {"name":"zhangSan", "age":18, "sex":"male"};

三、json與xml比較

* 可讀性：XML勝出

* 解析難度：JSON自己就是JS對象（主場做戰），因此簡單不少

* 流行度：XML已經流行好多年，但在AJAX領域，JSON更受歡迎。

四、把java對象轉成json對象

* JSONObject --> Map

    > toString();

    > JSONObject map = JSONObject.fromObject(person)：把對象轉換成JSONObject對象

* JSONArray --> List

    > toString()

    > JSONArray jsonArray = JSONObject.fromObject(list)：把list轉換成JSONArray對象

2、ajax

一、ajax是什麼

異步請求，局部刷新

二、異步交互和同步交互

  * 同步：

    > 發一個請求，就要等待服務器的響應結束，而後才能發第二個請求！中間這段時間就是一個字「卡」

    > 刷新的是整個頁面！

  * 異步：

    > 發一個請求後，無需等待服務器的響應，而後就能夠發第二個請求！

    > 可使用js接收服務器的響應，而後使用js來局部刷新！

3. ajax應用場景

  * 百度的搜索框

  * 用戶註冊時（校驗用戶名是否被註冊過）

 

4. ajax的優缺點

  優勢：

  * 異步交互：加強了用戶的體驗！

  * 性能：由於服務器無需再響應整個頁面，只須要響應部分內容，因此服務器的壓力減輕了！

 

  缺點：

  * ajax不能應用在全部場景！

  * ajax無故的增多了對服務器的訪問次數，給服務器帶來了壓力！

 

五、ajax發送異步請求（四步操做）

 

第一步（獲得XMLHttpRequest）

  * ajax其實只須要學習一個對象：XMLHttpRequest，若是掌握了它，就掌握了ajax！！！

  * 獲得XMLHttpRequest

    > 大多數瀏覽器都支持：var xmlHttp = new XMLHttpRequest();

    > IE6.0：var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

    > IE5.5以更早版本的IE：var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

 

  * 編寫建立XMLHttpRequest對象的函數

  function createXMLHttpRequest() {

      try {

          return new XMLHttpRequest();

      } catch(e) {

          try {

          return new ActiveXObject("Msxml2.XMLHTTP");

      } catch(e) {

          try {

              return new ActiveXObject("Microsoft.XMLHTTP");

          } catch(e) {

              alert("哥們兒，你用的是什麼瀏覽器啊？");

              throw e;

          }

      }

      }

  }

 

2. 第二步（打開與服務器的鏈接）

  * xmlHttp.open()：用來打開與服務器的鏈接，它須要三個參數：

    > 請求方式：能夠是GET或POST

    > 請求的URL：指定服務器端資源，例如；/day23_1/AServlet

    > 請求是否爲異步：若是爲true表示發送異步請求，不然同步請求！

  * xmlHttp.open("GET", "/day23_1/AServlet", true);

 

3. 第三步（發送請求）

  * xmlHttp.send(null)：若是不給可能會形成部份瀏覽器沒法發送！

    > 參數：就是請求體內容！若是是GET請求，必須給出null。

 

4. 第四步（）

  * 在xmlHttp對象的一個事件上註冊監聽器：onreadystatechange

  * xmlHttp對象一共有5個狀態：

    > 0狀態：剛建立，尚未調用open()方法;

    > 1狀態：請求開始：調用了open()方法，但尚未調用send()方法

    > 2狀態：調用完了send()方法了；

    > 3狀態：服務器已經開始響應，但不表示響應結束了！

    > 4狀態：服務器響應結束！（一般咱們只關心這個狀態！！！）

  * 獲得xmlHttp對象的狀態：

    > var state = xmlHttp.readyState;//多是0、一、二、三、4

  * 獲得服務器響應的狀態碼

    > var status = xmlHttp.status;//例如爲200、40四、500

  * 獲得服務器響應的內容1

    > var content = xmlHttp.responseText;//獲得服務器的響應的文本格式的內容

    > var content = xmlHttp.responseXML;//獲得服務器的響應的xml響應的內容，它是Document對象了！

 

  xmlHttp.onreadystatechange = function() {//xmlHttp的5種狀態都會調用本方法

      if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {//雙重判斷：判斷是否爲4狀態，並且還要判斷是否爲200

          // 獲取服務器的響應內容

      var text = xmlHttp.responseText;

      }

  };