使用Ajax與伺服器（JSON）通訊執行個體_javascript技巧

 Ajax這個詞，不代表任何東西，它僅僅是稱呼一系列促進用戶端與伺服器通訊的技術時所用的一個術語。伺服器通訊時Ajax技術的核心內容，其目標就是從用戶端向伺服器發送資訊，並接受後者的回傳，以求在此過程中建立出更好地打使用者體驗來。

Ajax之前所有的伺服器通訊都是在伺服器上完成的，所以那是若想重繪頁面的一部分，要麼使用iframe（已淘汰），要麼重新整理整個頁面。這兩種方式都稱不上是良好的使用者體驗。

Ajax提供了兩類伺服器通訊手段：同步通訊和非同步通訊。

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

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

XMLHttpRequest對象

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

//建立ajax通訊伺服器對象function getHTTPObject(){  "use strict"; //注意使用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 Saladvar 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>

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。