Beispielcode für die Ajax- und Server-Kommunikation (JSON).

Ajax- und Server-Kommunikation (JSON)

Das Wort Ajax bedeutet nichts. Es ist lediglich ein Begriff, der sich auf eine Reihe von Technologien bezieht, die die Kommunikation zwischen Client und Server erleichtern. Die Serverkommunikation ist der Kerninhalt der Ajax-Technologie. Ihr Ziel besteht darin, Informationen vom Client an den Server zu senden und die Rückmeldung von diesem zu akzeptieren, um dabei ein besseres Benutzererlebnis zu schaffen. Die gesamte Serverkommunikation vor Ajax erfolgte auf dem Server. Wenn Sie also einen Teil der Seite neu zeichnen wollten, verwendeten Sie entweder einen Iframe (veraltet) oder aktualisierten die gesamte Seite. Keiner der beiden Ansätze kann als gute Benutzererfahrung bezeichnet werden.

Ajax bietet zwei Arten von Serverkommunikationsmethoden: synchrone Kommunikation und asynchrone Kommunikation.

Asynchrone Kommunikation Ajax ist mit einer Nutzungshäufigkeit von etwa 98 % weitaus häufiger als synchrone Kommunikation. Asynchron bedeutet, dass solche Ajax-Aufrufe nicht gleichzeitig mit anderen Aufgaben ausgelöst werden, sondern dass dieses Kommunikationsverhalten im Hintergrund erfolgt, völlig unabhängig und von der Seite und der Webanwendung getrennt ist.

Durch die Verwendung asynchroner Aufrufe kann die blockierende Natur synchroner Aufrufe vermieden werden, und sie müssen nicht zusammen mit anderen HTTP-Anforderungen auf der Seite verarbeitet werden.

XMLHttpRequest-Objekt

Das XMLHttpRequest-Objekt ist der Kern aller Ajax-Aufrufe. Unser Ziel ist es, die Ajax-Technologie zu verwenden, um die Daten asynchron in JSON abzurufen und in einer geeigneten Form anzuzeigen:

//创建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;
 
}

Browserübergreifende Kompatibilität Problem: Microsoft Ie hat ursprünglich das XMLHttp-Objekt erfunden, was dazu führte, dass IE5 und IE6 nur ActiveXObject-Objekte unterstützten, sodass Kompatibilitätsprobleme damit berücksichtigt werden müssen.

Ajax-Aufruf erstellen

Zuerst habe ich die Datei Salad.json im lokalen Datenverzeichnis erstellt und darauf gewartet, dass das Ajax-Programm sie aufruft:

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

Dann müssen wir eine Anfrage an den Server senden und die zurückgegebenen Daten akzeptieren:

Nachdem wir das zurückgegebene Server-Kommunikationsobjekt „xhr“ erhalten haben, müssen wir Folgendes tun do next Der Zweck besteht darin, das Readystatechange-Ereignis zu verwenden, um den Ajax-Anforderungsstatus und den Serverstatus für das Kommunikationsobjekt „xhr“ auszuführen. Wenn die Readystate-Statusanforderung abgeschlossen ist und der Statusstatusserver normal ist, werden nachfolgende Kommunikationsarbeiten durchgeführt.

//输出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 wird auch über die GET- und POST-Methoden aufgerufen, sodass die POST-Methode weniger Verarbeitungsaufwand erfordert relativ sicher, aber seine Leistung ist nicht so gut wie GET. Als nächstes verwenden Sie die Methoden open() und send(), um Datendateien anzufordern bzw. Daten an den Server zu senden.

Normalerweise ist es in tatsächlichen Entwicklungsprojekten unmöglich, nur einen Ajax-Aufruf zu haben. Zur Wiederverwendung und Bequemlichkeit müssen wir dieses Ajax-Programm in eine wiederverwendbare Funktion kapseln. Hier übergebe ich einen OutputElement-Parameter, um den Benutzer zum Warten aufzufordern. Die Callback-Funktion stimmt mit den eingegebenen Schlüsselwörtern überein Geben Sie den Benutzer in das Suchfeld in der JSON-Datei ein und rendern Sie die entsprechenden Daten an den Speicherort der Seitenantwort:

//将其封装成一个供调用函数
 
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);
}

Dann rufen Sie ajaxCall() auf:

//调用程序，我们将使用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 += &#39;<p>&#39;+obj.name+&#39;<a href="mailto:" &#39;+obj.color+&#39;>&#39;+obj.color+&#39;</a></p>&#39;
            }
          }
        }
      })
    }
  };
  //事件监听器，监听鼠标单击事件后调用函数并请求JSON数据文件
  searchField.addEventListener("click",search.salad,false);
   
})();

Das HTML-Dokument, das Ajax entspricht:

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