使用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;

}

//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调用所返回的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);
};

//将其封装成一个供调用函数

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请求的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);
  
})();

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