DIV CSS 佈局教程網

Ajax與服務器（JSON）通信

Ajax這個詞，不代表任何東西，它僅僅是稱呼一系列促進客戶端與服務器通信的技術時所用的一個術語。服務器通信時Ajax技術的核心內容，其目標就是從客戶端向服務器發送信息，並接受後者的回傳，以求在此過程中創建出更好地打用戶體驗來。Ajax之前所有的服務器通信都是在服務器上完成的，所以那是若想重繪頁面的一部分，要麼使用iframe（已淘汰），要麼刷新整個頁面。這兩種方式都稱不上是良好的用戶體驗。

Ajax提供了兩類服務器通信手段：同步通信和異步通信。

異步通信Ajax比同步通信要常見的多了，大概是98%的使用頻次。異步意味著此類Ajax調用並不和其他任務同時觸發，這種通信行為發生在後台，具備相當的獨立性，與頁面和web應用程序相互分離。

使用異步調用，可以避免同步調用的阻塞性，它不需要與頁面中的其他HTTP請求擠在一起處理。

XMLHttpRequest對象

XMLHttpRequest對象是所有Ajax調用的核心。我們的目的是使用Ajax技術異步獲取JSON中的數據，並以適當的形式將其展現出來：

//創建ajax通信服務器對象

function getHTTPObject(){

  "use strict"; //注意使用嚴格模式

  var xhr;

  //使用主流的XMLHttpRequest通信服務器對象

  if(window.XMLHttpRequest){

    xhr = new window.XMLHttpRequest();

  //如果是老版本ie，則只支持Active對象
  } else if(window.ActiveXObject){

    xhr = new window.ActiveXObject("Msxml2.XMLHTTP");
  }

  //將通信服務器對象返回
  return xhr;

}

跨浏覽器的兼容問題：微軟Ie起初發明了XMLHttp對象，那就導致了IE5、IE6只支持ActiveXObject對象，所以要考慮對它的兼容問題。

 創建Ajax調用

首先，我在本地的data目錄下創建好了Salad.json文件，等待Ajax程序去調用它：

//ajax JSON Salad
var ingredient = {
  "fruit":[
    {
      "name" : "apple",
      "color" : "green"
    },
    {
      "name" : "tomato",
      "color" : "red"
    },
    {
      "name" : "peach",
      "color" : "pink"
    },
    {
      "name" : "pitaya",
      "color" : "white"
    },
    {
      "name" : "lettuce",
      "color" : "green"
    }
  ]
};

然後要做的是向服務器發送請求和接受傳回的數據：

在接收到返回的服務器通信對象“xhr”後，我們緊接著要做的是使用readystatechange 事件對通信對象 “xhr”進行 Ajax請求狀態和服務器狀態，當readystate狀態請求完成和status狀態服務器正常時在進行之後 的通信工作。

//輸出ajax調用所返回的json數據

var request = getHTTPObject();

request.onreadystatechange = function(){

  "use strict";

    //當readyState全等於“4”狀態，status全等於“200”狀態 代表服務器狀態服務及客戶端請求正常，得以返回
  if(request.readyState ===4 || request.status ===200 ){
    
    //為了方便起見，將數據打印到浏覽器控制台（F12查看）
    console.log(request.responseText);
  }
  
  //使用GET方式請求.json數據文件，並且不向服務器發送任何信息
  request.open("GET","data/ingredient.json",true);
  request.send(null);
};

Ajax也通過GET和POST方法進行調用，GET方式會把數據暴露在URL之中，所以它的處理工作較少；POST相對較安全，但性能不如GET。   接下來分別使用 open()和 send()方法對服務器請求數據文件和發送數據。

通常在實際的開發項目中，不可能僅僅有一個Ajax調用。為了復用，為了方便起見，我們需要將這個Ajax程序封裝成復用函數，在這裡我傳入了一個outputElement參數，用於給用戶提示等待；還傳入了一個callback參數，用於傳入一個回調函數，根據用戶在搜索框鍵入的關鍵字在JSON文件中進行匹配，將合適的數據渲染到頁面響應的位置：

//將其封裝成一個供調用函數

function ajaxCall(dataUrl,outputElement,callback){
  "use strict";  //這是一段截取的js（ajax）代碼

  var request = getHTTPObject();
  //我想要提醒大家的是：當網頁的某個區域在向服務器發送http請求的過程中，要有一個標識提醒用戶正在加載...

  outputElement.innerHTML = "Loding..."; //也可以根據各位的需求添加一個循環小動畫

  request.onreadystatechange = function () {

    if(request.readyState ===4 || request.status ===200){

      //將request.responseText返回的數據轉化成JSON格式
      var contacts = JSON.parse(request.responseText);
      
      //如果回調函數是function類型，則使用callback函數處理返回的JSON數據
      if(callback === "function"){
        callback(contacts);
      }
    }
  };

  request.open("GET","data/ingredient.json",true);
  request.send(null);
}

然後調用 ajaxCall()：

//調用程序，我們將使用Ajax請求的JSON數據顯示到HTML文檔的某個區域中！
(function () {
  "use strict";

    //下面將給出DOM語句相對應的HTML代碼
  var searchForm = document.getElementById("search-form"),
    searchField = document.getElementById("q"),
    getAllButton = document.getElementById("get-all"),
    target = document.getElementById("output");

  var search = {

    salad : function(event){

      var output = document.getElementById("output");
        //請求的JSON數據文件名，輸出到HTML的區域，檢索數據文件的核心function語句

      ajaxCall('data/ingredient.json','output',function(data){

        //searchValue為搜索條目，准備循環檢索
        var searchValue = searchField.value,

          //找到食材條目（詳見JSON數據文件）
          fruit = data.fruit,

          //統計水果的數量
          count = fruit.length,
          i;

        //阻止默認行為
        event.preventDefault();

        //初始化
        target.innerHTML = "";

        if(count > 0 || searchValue !==""){
          for(i = 0;i < count;i++){
            
            var obj = fruit[i],
              //將name與searchvalue值相匹配，如果值不等於 -1，那麼就確定兩者相匹配

              inItfount = obj.name.indexOf(searchValue);

            //將JSON中匹配的數據規范的寫入到DOM
            if(isItfount != -1){
              target.innerHTML += '<p>'+obj.name+'<a href="mailto:" '+obj.color+'>'+obj.color+'</a></p>'
            }
          }
        }
      })
    }
  };
  //事件監聽器，監聽鼠標單擊事件後調用函數並請求JSON數據文件
  searchField.addEventListener("click",search.salad,false);
  
})();

Ajax 所對應的HTML文檔：

<h1>制作沙拉所需要的食材</h1>

  <form action="" method="get" id="search-form">

    <div class="section">

      <label for="q">搜索食材</label>
      <input id="q" name="q" required placeholder="type a name">
    </div>


    <div class="button-group">

      <button type="submit" id="btn-search">搜索</button>
      <button type="button" id="get-all">get all contacts</button>

    </div>

  </form>

  <div id="output"></div>

感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！