Recherche…


Introduction

AJAX signifie "Asynchronous JavaScript and XML". Bien que le nom inclut XML, JSON est plus souvent utilisé en raison de son formatage simplifié et de sa redondance réduite. AJAX permet à l'utilisateur de communiquer avec des ressources externes sans recharger la page Web.

Remarques

AJAX signifie A synchrone J avascript un e X ML. Néanmoins, vous pouvez réellement utiliser d'autres types de données et, dans le cas de basculer vers le mode synchrone obsolète.

AJAX permet aux pages Web d'envoyer des requêtes HTTP au serveur et de recevoir une réponse sans avoir à recharger la page entière.

Utiliser GET et pas de paramètres

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

La fetch API est une nouvelle base promesse moyen de faire des requêtes HTTP asynchrones.

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

Envoi et réception de données JSON via POST

6

Les promesses de demande d'extraction renvoient initialement les objets de réponse. Celles-ci fourniront des informations d'en-tête de réponse, mais elles n'incluent pas directement le corps de la réponse, qui n'a peut-être même pas encore été chargé. Les méthodes de l'objet Response, telles que .json() permettent d'attendre le chargement du corps de la réponse, puis de l'analyser.

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

Affichage des principales questions JavaScript du mois à partir de l'API Stack Overflow

Nous pouvons faire une demande AJAX à l'API de Stack Exchange pour récupérer une liste des principales questions JavaScript pour le mois, puis les présenter comme une liste de liens. Si la requête échoue ou si une erreur API est renvoyée, la gestion des erreurs de notre promesse affiche l'erreur à la place.

6
Voir les résultats en direct sur HyperWeb .
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);
});

Utiliser GET avec des paramètres

Cette fonction exécute un appel AJAX en utilisant GET nous permettant d'envoyer des paramètres (objet) à un fichier (string) et de lancer un callback (fonction) à la fin de la requête.

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

Voici comment nous l'utilisons:

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

Et ce qui suit montre comment récupérer les paramètres url dans 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;
}

Si vous aviez console.log(response) dans la fonction de rappel, le résultat dans la console aurait été:

La couleur de votre voiture est violette. C'est un modèle 300 de Volvo!

Vérifier si un fichier existe via une requête HEAD

Cette fonction exécute une requête AJAX en utilisant la méthode HEAD nous permettant de vérifier si un fichier existe dans le répertoire donné en argument. Cela nous permet également de lancer un rappel pour chaque cas (réussite, échec).

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

Ajouter un préchargeur AJAX

Voici un moyen d’afficher un préchargeur GIF pendant l’exécution d’un appel AJAX. Nous devons préparer nos fonctions de préchargement add et remove:

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

Maintenant, nous allons voir où utiliser ces fonctions.

var request = new XMLHttpRequest();

Dans la fonction onreadystatechange , vous devez avoir une instruction if avec la condition suivante: request.readyState == 4 && request.status == 200 .

Si true : la requête est terminée et la réponse est prête, c'est là que nous utiliserons removePreloader() .

Sinon si false : la requête est toujours en cours, dans ce cas nous allons lancer la fonction 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();

Écouter les événements AJAX au niveau mondial

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


Modified text is an extract of the original Stack Overflow Documentation
Sous licence CC BY-SA 3.0
Non affilié à Stack Overflow