JavaScript
AJAX

소개

비고

GET 및 매개 변수 없음 사용

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
    if (xhttp.readyState === XMLHttpRequest.DONE && xhttp.status === 200) {
        //parse the response in xhttp.responseText;
    }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

fetch('/').then(response => response.text()).then(text => {
  console.log("The home page is " + text.length + " characters long.");
});

POST를 통한 JSON 데이터 송수신

const requestData = {
  method : 'getUsers'
};

const usersPromise = fetch('/api', {
  method : 'POST',
  body : JSON.stringify(requestData)
}).then(response => {
  if (!response.ok) {
    throw new Error("Got non-2XX response from API server.");
  }
  return response.json();
}).then(responseData => {
  return responseData.users;
});

usersPromise.then(users => {
  console.log("Known users: ", users);
}, error => {
  console.error("Failed to fetch users due to error: ", error);
});

Stack Overflow의 API에서 해당 달의 가장 중요한 JavaScript 질문 표시

우리는 Stack Exchange의 API 에 대한 AJAX 요청을 작성하여 그 달의 가장 중요한 JavaScript 질문 목록을 검색 한 다음이를 링크 목록으로 제시 할 수 있습니다. 요청이 실패하거나 API 오류를 반환하면 Google의 약속 오류 처리가 대신 오류를 표시합니다.

const url =
    'http://api.stackexchange.com/2.2/questions?site=stackoverflow' +
    '&tagged=javascript&sort=month&filter=unsafe&key=gik4BOCMC7J9doavgYteRw((';

fetch(url).then(response => response.json()).then(data => {
  if (data.error_message) {
    throw new Error(data.error_message);
  }

  const list = document.createElement('ol');
  document.body.appendChild(list);

  for (const {title, link} of data.items) {
    const entry = document.createElement('li');
    const hyperlink = document.createElement('a');
    entry.appendChild(hyperlink);
    list.appendChild(entry);

    hyperlink.textContent = title;
    hyperlink.href = link;
  }
}).then(null, error => {
  const message = document.createElement('pre');
  document.body.appendChild(message);
  message.style.color = 'red';

  message.textContent = String(error);
});

매개 변수로 GET 사용하기

이 함수는 GET을 사용하여 AJAX 호출을 실행하여 매개 변수 (객체)를 파일 (문자열)로 보내고 요청이 끝나면 콜백 (함수)을 시작합니다.

function ajax(file, params, callback) {

  var url = file + '?';

  // loop through object and assemble the url
  var notFirst = false;
  for (var key in params) {
    if (params.hasOwnProperty(key)) {
      url += (notFirst ? '&' : '') + key + "=" + params[key];
    }
    notFirst = true;
  }

  // create a AJAX call with url as parameter
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      callback(xmlhttp.responseText);
    }
  };
  xmlhttp.open('GET', url, true);
  xmlhttp.send();
}

사용 방법은 다음과 같습니다.

ajax('cars.php', {type:"Volvo", model:"300", color:"purple"}, function(response) {
  // add here the code to be executed when data comes back to this page      
  // for example console.log(response) will show the AJAX response in console
});

다음은 cars.php 에서 url 매개 변수를 검색하는 방법을 보여줍니다.

if(isset($_REQUEST['type'], $_REQUEST['model'], $_REQUEST['color'])) {
  // they are set, we can use them !
  $response = 'The color of your car is ' . $_REQUEST['color'] . '. ';
  $response .= 'It is a ' . $_REQUEST['type'] . ' model ' . $_REQUEST['model'] . '!';
  echo $response;
}

콜백 함수에 console.log(response) 가 있다면 console의 결과는 다음과 같습니다.

차 색깔은 자주색입니다. 볼보 모델 300입니다!

HEAD 요청을 통해 파일이 있는지 확인하십시오.

이 함수는 HEAD 메서드를 사용하여 AJAX 요청을 실행하여 인수로 주어진 디렉토리에 파일이 있는지 여부 를 확인할 수 있습니다 . 또한 각 사례 (성공, 실패)에 대한 콜백 을 시작할 수 있습니다.

function fileExists(dir, successCallback, errorCallback) {
    var xhttp = new XMLHttpRequest;

    /* Check the status code of the request */
    xhttp.onreadystatechange = function() {
        return (xhttp.status !== 404) ? successCallback : errorCallback;
    };

    /* Open and send the request */
    xhttp.open('head', dir, false);
    xhttp.send();
};

AJAX 프리 로더 추가

AJAX 호출이 실행되는 동안 GIF 프리 로더를 표시하는 방법은 다음과 같습니다. 프리 로더 기능을 추가하고 제거 할 준비를해야합니다.

function addPreloader() {
  // if the preloader doesn't already exist, add one to the page
  if(!document.querySelector('#preloader')) {
    var preloaderHTML = '<img id="preloader" src="https://goo.gl/cNhyvX" />';
    document.querySelector('body').innerHTML += preloaderHTML;
  }
}

function removePreloader() {
  // select the preloader element
  var preloader = document.querySelector('#preloader');
  // if it exists, remove it from the page
  if(preloader) {
    preloader.remove();
  }
}

이제 우리는이 기능들을 어디에서 사용할 지 살펴볼 것입니다.

var request = new XMLHttpRequest();

onreadystatechange 함수 안에는 조건이있는 if 문이 있어야합니다 : request.readyState == 4 && request.status == 200 .

true 인 경우 : 요청이 완료되고 응답이 준비되므로 removePreloader() 합니다.

그렇지 않은 경우 false : 요청이 아직 진행 중입니다.이 경우 addPreloader() 함수가 실행됩니다.

xmlhttp.onreadystatechange = function() {

  if(request.readyState == 4 && request.status == 200) {
    // the request has come to an end, remove the preloader
    removePreloader();
  } else {
    // the request isn't finished, add the preloader
    addPreloader()
  }

};

xmlhttp.open('GET', your_file.php, true);
xmlhttp.send();

글로벌 수준에서 AJAX 이벤트 듣기

// Store a reference to the native method
let open = XMLHttpRequest.prototype.open; 

// Overwrite the native method
XMLHttpRequest.prototype.open = function() {
    // Assign an event listener
    this.addEventListener("load", event => console.log(XHR), false);
    // Call the stored reference to the native method
    open.apply(this, arguments);
};