JavaScript
AJAX

Wprowadzenie

Uwagi

Za pomocą GET i bez parametrów

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.");
});

Wysyłanie i odbieranie danych JSON przez POST

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);
});

Wyświetlanie najpopularniejszych pytań JavaScript w miesiącu z interfejsu API Stack Overflow

Możemy złożyć żądanie AJAX do interfejsu API Stack Exchange, aby pobrać listę najważniejszych pytań JavaScript w danym miesiącu, a następnie przedstawić je jako listę linków. Jeśli żądanie zakończy się niepowodzeniem lub zwróci błąd API, zamiast tego wyświetli się nasza obsługa błędów obietnicy .

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);
});

Używanie GET z parametrami

Ta funkcja uruchamia wywołanie AJAX za pomocą GET, co pozwala nam wysłać parametry (obiekt) do pliku (ciąg) i uruchomić wywołanie zwrotne (funkcja) po zakończeniu żądania.

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

Oto jak go używamy:

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
});

A poniżej pokazano, jak cars.php parametry cars.php URL w cars.php :

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

Gdybyś miał console.log(response) w funkcji zwrotnej, wynik w konsoli byłby:

Kolor twojego samochodu jest fioletowy. To model Volvo 300!

Sprawdź, czy plik istnieje za pośrednictwem żądania HEAD

Ta funkcja wykonuje żądanie AJAX przy użyciu metody HEAD, co pozwala nam sprawdzić, czy plik istnieje w katalogu podanym jako argument. Umożliwia nam także uruchomienie oddzwaniania dla każdej sprawy (sukces, porażka).

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

Dodaj moduł wstępnego ładowania AJAX

Oto sposób na pokazanie preloadera GIF podczas wykonywania połączenia AJAX. Musimy przygotować nasze funkcje dodawania i usuwania modułu wstępnego ładowania:

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

Teraz przyjrzymy się, gdzie korzystać z tych funkcji.

var request = new XMLHttpRequest();

Wewnątrz funkcji onreadystatechange powinna onreadystatechange się instrukcja if z warunkiem: request.readyState == 4 && request.status == 200 .

Jeśli prawda : żądanie jest zakończone i odpowiedź jest gotowa, w tym miejscu użyjemy removePreloader() .

W przeciwnym razie false : żądanie jest nadal w toku, w tym przypadku uruchomimy funkcję 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();

Słuchanie wydarzeń AJAX na poziomie globalnym

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