Ajax to Server (JSON) Communication

The word Ajax does not mean anything, it is just a term used to refer to a series of technologies that facilitate communication between client and server. Server communication is the core content of Ajax technology. Its goal is to send information from the client to the server and accept the return from the latter, in order to create a better user experience in the process. All server communication before Ajax was done on the server, so if you wanted to redraw part of the page, you either used an iframe (obsolete) or refreshed the entire page. Neither approach can be called a good user experience.

Ajax provides two types of server communication methods: synchronous communication and asynchronous communication.

Asynchronous communication Ajax is much more common than synchronous communication, with about 98% usage frequency. Asynchronous means that such Ajax calls are not triggered at the same time as other tasks. This communication behavior occurs in the background, is quite independent, and is separated from the page and web application.

Using asynchronous calls can avoid the blocking nature of synchronous calls, and it does not need to be processed together with other HTTP requests in the page.

XMLHttpRequest Object

The XMLHttpRequest object is the core of all Ajax calls. Our purpose is to use Ajax technology to asynchronously obtain the data in JSON and display it in an appropriate form:

//創(chuàng)建ajax通信服務(wù)器對(duì)象
 
function getHTTPObject(){
 
  "use strict"; //注意使用嚴(yán)格模式
 
  var xhr;
 
  //使用主流的XMLHttpRequest通信服務(wù)器對(duì)象
 
  if(window.XMLHttpRequest){
 
    xhr = new window.XMLHttpRequest();
 
  //如果是老版本ie，則只支持Active對(duì)象
  } else if(window.ActiveXObject){
 
    xhr = new window.ActiveXObject("Msxml2.XMLHTTP");
  }
 
  //將通信服務(wù)器對(duì)象返回
  return xhr;
 
}

Cross-browser compatibility issues: Microsoft Ie originally invented the XMLHttp object, which resulted in IE5 and IE6 only support ActiveXObject objects, so compatibility issues with them must be considered.

Create Ajax call

First, I created the Salad.json file in the local data directory and waited for the Ajax program to call it:

//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"
    }
  ]
};

Then what I have to do is send a request to the server and accept the transfer Returned data:

After receiving the returned server communication object "xhr", what we need to do next is to use the readystatechange event to perform the Ajax request status and server status on the communication object "xhr". When the readystate status request is completed and status When the status server is normal, it will carry out subsequent communication work.

//輸出ajax調(diào)用所返回的json數(shù)據(jù)
 
var request = getHTTPObject();
 
request.onreadystatechange = function(){
 
  "use strict";
 
    //當(dāng)readyState全等于“4”狀態(tài)，status全等于“200”狀態(tài) 代表服務(wù)器狀態(tài)服務(wù)及客戶端請(qǐng)求正常，得以返回
  if(request.readyState ===4 || request.status ===200 ){
     
    //為了方便起見，將數(shù)據(jù)打印到瀏覽器控制臺(tái)（F12查看）
    console.log(request.responseText);
  }
   
  //使用GET方式請(qǐng)求.json數(shù)據(jù)文件，并且不向服務(wù)器發(fā)送任何信息
  request.open("GET","data/ingredient.json",true);
  request.send(null);
};

Ajax is also called through the GET and POST methods. The GET method exposes the data in the URL, so it requires less processing work; POST is relatively safe, but its performance is not as good as GET. Next, use the open() and send() methods to request data files and send data to the server respectively.

Usually in actual development projects, it is impossible to have just one Ajax call. For reuse and convenience, we need to encapsulate this Ajax program into a reusable function. Here I pass in an outputElement parameter to prompt the user to wait; I also pass in a callback parameter to pass in a The callback function matches the keywords typed by the user in the search box in the JSON file and renders the appropriate data to the page response location:

//將其封裝成一個(gè)供調(diào)用函數(shù)
 
function ajaxCall(dataUrl,outputElement,callback){
  "use strict";  //這是一段截取的js（ajax）代碼
 
  var request = getHTTPObject();
  //我想要提醒大家的是：當(dāng)網(wǎng)頁的某個(gè)區(qū)域在向服務(wù)器發(fā)送http請(qǐng)求的過程中，要有一個(gè)標(biāo)識(shí)提醒用戶正在加載...
 
  outputElement.innerHTML = "Loding..."; //也可以根據(jù)各位的需求添加一個(gè)循環(huán)小動(dòng)畫
 
  request.onreadystatechange = function () {
 
    if(request.readyState ===4 || request.status ===200){
 
      //將request.responseText返回的數(shù)據(jù)轉(zhuǎn)化成JSON格式
      var contacts = JSON.parse(request.responseText);
       
      //如果回調(diào)函數(shù)是function類型，則使用callback函數(shù)處理返回的JSON數(shù)據(jù)
      if(callback === "function"){
        callback(contacts);
      }
    }
  };
 
  request.open("GET","data/ingredient.json",true);
  request.send(null);
}

Then calls ajaxCall():

//調(diào)用程序，我們將使用Ajax請(qǐng)求的JSON數(shù)據(jù)顯示到HTML文檔的某個(gè)區(qū)域中！
(function () {
  "use strict";
 
    //下面將給出DOM語句相對(duì)應(yīng)的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");
        //請(qǐng)求的JSON數(shù)據(jù)文件名，輸出到HTML的區(qū)域，檢索數(shù)據(jù)文件的核心function語句
 
      ajaxCall('data/ingredient.json','output',function(data){
 
        //searchValue為搜索條目，準(zhǔn)備循環(huán)檢索
        var searchValue = searchField.value,
 
          //找到食材條目（詳見JSON數(shù)據(jù)文件）
          fruit = data.fruit,
 
          //統(tǒng)計(jì)水果的數(shù)量
          count = fruit.length,
          i;
 
        //阻止默認(rèn)行為
        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中匹配的數(shù)據(jù)規(guī)范的寫入到DOM
            if(isItfount != -1){
              target.innerHTML += &#39;<p>&#39;+obj.name+&#39;<a href="mailto:" &#39;+obj.color+&#39;>&#39;+obj.color+&#39;</a></p>&#39;
            }
          }
        }
      })
    }
  };
  //事件監(jiān)聽器，監(jiān)聽鼠標(biāo)單擊事件后調(diào)用函數(shù)并請(qǐng)求JSON數(shù)據(jù)文件
  searchField.addEventListener("click",search.salad,false);
   
})();

HTML document corresponding to Ajax:

<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>