Explorer les requêtes AJAX : découvrez les différentes méthodes de requête AJAX

Exploration des requêtes AJAX : pour comprendre les différentes méthodes de requête AJAX, des exemples de code spécifiques sont nécessaires

Introduction :
Dans le développement Web moderne, AJAX (JavaScript asynchrone et XML) est largement utilisé pour réaliser la communication entre les pages Web et les serveurs asynchrones. l'échange de données permet aux utilisateurs d'obtenir les dernières données sans actualiser la page entière. Cet article présentera les principes de base d'AJAX et comment utiliser différentes méthodes de requête AJAX, tout en fournissant des exemples de code spécifiques.

1. Le principe de base d'AJAX
Le principe de base d'AJAX est d'échanger des données avec le serveur via l'objet XMLHttpRequest intégré au navigateur. Il envoie des requêtes et reçoit des réponses sur la page via JavaScript, puis utilise les opérations DOM pour insérer des données à l'emplacement correspondant sur la page afin d'obtenir une actualisation partielle de la page.

2. Méthodes courantes d'utilisation de la requête AJAX

1. GET :
   La requête GET est l'une des méthodes de requête AJAX les plus courantes, utilisée pour obtenir des données du serveur. Voici un exemple de requête GET implémentée à l'aide de JavaScript natif :

function getData(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url, true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      var data = JSON.parse(xhr.responseText);
      callback(data);
    }
  };
  xhr.send();
}

getData("https://api.example.com/data", function(data) {
  console.log(data);
});

2. Requête POST :
   La requête POST est utilisée pour envoyer des données au serveur, souvent utilisée dans des scénarios tels que la soumission de formulaire. Voici un exemple de requête POST utilisant jQuery :

$.ajax({
  url: "https://api.example.com/post",
  type: "POST",
  data: { username: "example", password: "123456" },
  success: function(response) {
    console.log(response);
  }
});

3. Requête PUT :
   La requête PUT est utilisée pour mettre à jour les données sur le serveur. Voici un exemple de requête PUT implémentée à l'aide de l'API fetch :

fetch("https://api.example.com/update", {
  method: "PUT",
  body: JSON.stringify({ id: 1, name: "example" }),
  headers: {
    "Content-Type": "application/json"
  }
})
.then(function(response) {
  return response.json();
})
.then(function(data) {
  console.log(data);
});

4. Demande DELETE :
   La requête DELETE est utilisée pour supprimer des données sur le serveur. Voici un exemple de requête DELETE implémentée à l'aide d'Axios :

axios.delete("https://api.example.com/delete", { params: { id: 1 } })
.then(function(response) {
  console.log(response.data);
})
.catch(function(error) {
  console.log(error);
});

3. Gestion des requêtes inter-domaines
En raison de la restriction de la politique de même origine, les requêtes AJAX ne peuvent être envoyées qu'à des serveurs sous le même nom de domaine par défaut. Afin de résoudre ce problème, vous pouvez utiliser JSONP, CORS, proxy, etc. Voici un exemple d'utilisation de JSONP pour implémenter des requêtes inter-domaines :

function getData(callback) {
  var script = document.createElement("script");
  script.src = "https://api.example.com/data?callback=" + callback;
  document.body.appendChild(script);
}

function handleData(data) {
  console.log(data);
}

getData("handleData");

4. Gestion des erreurs des requêtes AJAX
Lorsque vous effectuez des requêtes AJAX, vous devez gérer les erreurs possibles. Voici un exemple d'utilisation de l'API fetch pour implémenter la gestion des erreurs :

fetch("https://api.example.com/data")
.then(function(response) {
  if (response.ok) {
    return response.json();
  } else {
    throw new Error("请求失败，状态码：" + response.status);
  }
})
.then(function(data) {
  console.log(data);
})
.catch(function(error) {
  console.log("请求错误：" + error);
});

Conclusion :
Grâce à l'introduction de cet article, nous comprenons les principes de base d'AJAX et apprenons à utiliser différentes méthodes de requête AJAX. Nous espérons que ces exemples de code spécifiques pourront aider les lecteurs à mieux comprendre l'utilisation des requêtes AJAX, améliorant ainsi l'efficacité et l'expérience utilisateur du développement Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!