Ajax와 서버(JSON) 통신 예제 코드

Ajax와 서버(JSON) 통신

Ajax라는 단어는 아무 의미도 없습니다. 클라이언트와 서버 간의 통신을 용이하게 하는 일련의 기술을 가리키는 용어일 뿐입니다. 서버 통신은 Ajax 기술의 핵심 콘텐츠이며, 그 목표는 프로세스에서 더 나은 사용자 경험을 만들기 위해 클라이언트에서 서버로 정보를 보내고 후자의 반환을 받아들이는 것입니다. Ajax 이전의 모든 서버 통신은 서버에서 이루어졌으므로 페이지의 일부를 다시 그리려면 iframe(구식)을 사용하거나 전체 페이지를 새로 고쳤습니다. 두 접근 방식 모두 좋은 사용자 경험이라고 할 수 없습니다.

Ajax는 동기 통신과 비동기 통신이라는 두 가지 서버 통신 방식을 제공합니다.

비동기 통신 Ajax는 동기 통신보다 훨씬 일반적이며 약 98%의 사용 빈도를 보입니다. 비동기는 이러한 Ajax 호출이 다른 작업과 동시에 트리거되지 않는다는 것을 의미합니다. 이 통신 동작은 백그라운드에서 발생하고 매우 독립적이며 페이지 및 웹 애플리케이션과 분리됩니다.

비동기 호출을 사용하면 동기 호출의 차단 특성을 피할 수 있으며 페이지의 다른 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 즉, 처음에는 XMLHttp 개체를 발명했는데 이로 인해 IE5와 IE6은 ActiveXObject 개체만 지원하게 되므로 호환성 문제를 고려해야 합니다.

Ajax 호출 생성

먼저 로컬 데이터 디렉터리에 Salad.json 파일을 생성하고 Ajax 프로그램이 이를 호출할 때까지 기다렸습니다.

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

그런 다음 우리가 해야 할 일은 서버에 요청을 보내고 반환된 데이터를 수락하는 것입니다.

반환된 서버 통신 개체 "xhr"을 받은 후 우리가 해야 할 일은 무엇입니까? do next 통신 객체 "xhr"에 대해 Ajax 요청 상태 및 서버 상태를 수행하기 위해 Readystatechange 이벤트를 사용하는 것이 목적이다. Readystate 상태 요청이 완료되고 상태 서버가 정상이면 후속 통신 작업이 수행된다.

//输出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 매개변수를 전달합니다. 콜백 함수는 다음에서 입력한 키워드와 일치합니다. 사용자를 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 += &#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);
   
})();

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>