Ajaxとサーバー(JSON)通信サンプルコード

Ajax からサーバー (JSON) 通信

Ajax という言葉には特別な意味はなく、クライアントとサーバー間の通信を容易にする一連のテクノロジーを指すために使用される用語にすぎません。サーバー通信は、Ajax テクノロジーの中核となるコンテンツであり、その目的は、プロセスにおけるユーザー エクスペリエンスを向上させるために、クライアントからサーバーに情報を送信し、サーバーからの戻りを受け入れることです。 Ajax が登場する以前のサーバー通信はすべてサーバー上で行われていたため、ページの一部を再描画したい場合は、iframe (廃止) を使用するか、ページ全体を更新する必要がありました。どちらのアプローチも優れたユーザー エクスペリエンスとは言えません。

Ajaxでは、同期通信と非同期通信の2種類のサーバー通信方式を提供しています。

非同期通信 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;
 
}

ブラウザ間の互換性の問題: Microsoft Ie はもともと XMLHttp オブジェクトを発明し、その結果、IE5 と IE6 のみが使用されました。は ActiveXObject オブジェクトをサポートしているため、それらとの互換性の問題を考慮する必要があります。

Ajax 呼び出しを作成する

まず、ローカル データ ディレクトリに Salad.json ファイルを作成し、Ajax プログラムがそれを呼び出すのを待ちました。返されたデータ:

返されたサーバー通信オブジェクト "xhr" を受信した後、次に行う必要があるのは、readystatechange イベントを使用して、通信オブジェクト "xhr" の Ajax リクエスト ステータスとサーバー ステータスを実行することです。 Readystate ステータス要求が完了し、ステータス ステータス サーバが正常であれば、その後の通信作業を実行します。

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

Ajax は GET および POST メソッドを通じても呼び出されます。GET メソッドは URL 内のデータを公開するため、必要な処理作業は比較的少なくなりますが、パフォーマンスは GET ほど良くありません。次に、open() メソッドと send() メソッドを使用して、それぞれデータ ファイルを要求し、データをサーバーに送信します。

通常、実際の開発プロジェクトでは、Ajax 呼び出しを 1 つだけ行うことは不可能です。再利用と便宜のために、この Ajax プログラムを再利用可能な関数にカプセル化する必要があります。ここでは、ユーザーに待機を促すために、コールバック パラメーターも渡します。コールバック関数は、入力されたキーワードと一致します。 JSON ファイルの検索ボックスにユーザーを入力し、ページの応答場所に適切なデータをレンダリングします:

//输出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);
};

次に、ajaxCall() を呼び出します:

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

Ajax に対応する HTML ドキュメント:

//调用程序，我们将使用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);
   
})();