JavaScript
AJAX

Invoering

Opmerkingen

GET gebruiken en geen parameters

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

JSON-gegevens verzenden en ontvangen via 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);
});

De belangrijkste JavaScript-vragen van de maand weergeven vanuit de API van Stack Overflow

We kunnen een AJAX-verzoek indienen bij de API van Stack Exchange om een lijst met de belangrijkste JavaScript-vragen voor de maand op te halen en deze vervolgens als een lijst met koppelingen te presenteren. Als de aanvraag mislukt of retourneert een API fout, onze belofte foutafhandeling geeft de fout plaats.

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 gebruiken met parameters

Deze functie voert een AJAX-aanroep uit met behulp van GET waarmee we parameters (object) naar een bestand (string) kunnen sturen en een callback (functie) kunnen starten wanneer het verzoek is beëindigd.

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

Dit is hoe we het gebruiken:

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

En het volgende laat zien hoe de url-parameters 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;
}

Als je console.log(response) in callback-functie had, zou het resultaat in console zijn:

De kleur van uw auto is paars. Het is een Volvo-model 300!

Controleer of er een bestand bestaat via een HEAD-verzoek

Deze functie voert een AJAX-verzoek uit met behulp van de HEAD-methode waarmee we kunnen controleren of er een bestand bestaat in de directory die als argument wordt opgegeven. Het stelt ons ook in staat om voor elk geval een callback te starten (succes, mislukking).

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

Voeg een AJAX-voorlader toe

Hier is een manier om een GIF-voorlader te tonen terwijl een AJAX-oproep wordt uitgevoerd. We moeten onze functies voor toevoegen en verwijderen van voorlader voorbereiden:

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

Nu gaan we kijken waar we deze functies kunnen gebruiken.

var request = new XMLHttpRequest();

Binnen de functie onreadystatechange zou u een if-statement moeten hebben met voorwaarde: request.readyState == 4 && request.status == 200 .

Indien waar : het verzoek is voltooid en het antwoord is gereed, dat is waar we removePreloader() zullen gebruiken.

Anders indien onwaar : het verzoek is nog in uitvoering, in dit geval voeren we de functie 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();

Luisteren naar AJAX-evenementen op mondiaal niveau

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