JavaScript
AJAX

Einführung

Bemerkungen

Verwenden Sie GET und keine Parameter

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

Senden und Empfangen von JSON-Daten per 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);
});

Anzeige der wichtigsten JavaScript-Fragen des Monats aus der Stack Overflow-API

Wir können eine AJAX-Anforderung an die API von Stack Exchange stellen , um eine Liste der wichtigsten JavaScript-Fragen für den Monat abzurufen, und diese dann als Linkliste präsentieren. Wenn die Anforderung eines API - Fehler fehlschlägt oder die Erträge, unsere Versprechen zeigt Fehlerbehandlung die Fehler statt.

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

Verwendung von GET mit Parametern

Diese Funktion führt einen AJAX-Aufruf mit GET aus, sodass wir Parameter (Objekt) an eine Datei (String) senden und einen Callback (Funktion) starten können, wenn die Anforderung beendet ist.

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

So verwenden wir es:

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

Und das Folgende zeigt, wie man die URL-Parameter in 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;
}

Wenn Sie console.log(response) in der Rückruffunktion hätten, wäre das Ergebnis in der Konsole console.log(response) gewesen:

Die Farbe Ihres Autos ist lila. Es ist ein Volvo-Modell 300!

Prüfen Sie, ob eine Datei über eine HEAD-Anforderung vorhanden ist

Diese Funktion führt eine AJAX-Anforderung unter Verwendung der HEAD-Methode aus, um zu prüfen, ob eine Datei in dem als Argument angegebenen Verzeichnis vorhanden ist . Außerdem können wir für jeden Fall einen Rückruf starten (Erfolg, Misserfolg).

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

Fügen Sie einen AJAX-Preloader hinzu

So zeigen Sie einen GIF-Preloader an, während ein AJAX-Aufruf ausgeführt wird. Wir müssen das Hinzufügen und Entfernen von Preloader-Funktionen vorbereiten:

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

Jetzt werden wir untersuchen, wo diese Funktionen verwendet werden können.

var request = new XMLHttpRequest();

Innerhalb der onreadystatechange Funktion sollten Sie eine if-Anweisung mit der folgenden Bedingung haben: request.readyState == 4 && request.status == 200 .

Wenn wahr : Die Anfrage ist abgeschlossen und die Antwort ist fertig. Dort verwenden wir removePreloader() .

Andernfalls false : Die Anforderung wird noch ausgeführt. In diesem Fall führen wir die Funktion 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-Events auf globaler Ebene anhören

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