Partage de technologie

Qu’est-ce qu’AJAX ? Format de syntaxe natif ? Quelle est la différence entre jQuery fournissant un AJAX packagé ?

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

ajax nom et prénom JavaScript et XML asynchrones (asynchrone JavaScript et XML) 

AJAXIl s'agit d'une technologie de développement Web permettant de créer des applications Web interactives.La dépendance la plus fondamentale est l'objet XMLHttpRequest fourni par le navigateur. C'est cet objet qui permet au navigateur d'émettre. HTTP Demander et recevoir HTTP réponse. Obtenez une interaction avec le serveur sans actualiser la page.

Format de syntaxe AJAX natif :

  1. let xhr = new XMLHttpRequest();
  2. xhr.open('get','js/index.json',true);
  3. xhr.send();
  4. xhr.onreadystatechange = function() {
  5. if (xhr.readyState == 4 && xhr.status == 200) {
  6. let text = xhr.responseText;
  7. console.log(text);
  8. let data = JSON.parse(text);
  9. console.log(data);
  10. }
  11. };
Comment utiliser ajax :
1. Créer un objet XMLHttpRequest
2. Utilisez la méthode open pour spécifier l'adresse, le type et la méthode à demander.
3. Utilisez la méthode send pour envoyer la requête. Si vous devez transmettre des paramètres :
La méthode get nécessite de raccorder les paramètres à la fin de l'URL et de diviser les paramètres. Exemple : 'index.php?name=张三&age=18'
La méthode post peut mettre des paramètres dans send(). Exemple : send('name=张三&age=18')
4. Liez l'événement onreadystatechange pour déterminer l'état de readyState et l'état.
5. Recevez des données et utilisez-les via la conversion json.

 

jQuery fournit un AJAX packagé qui est plus rapide et adapté à une utilisation dans les projets de développement. L'AJAX natif est plus facile à comprendre et à comprendre.

Format de syntaxe jQuery :

  1. $.ajax({
  2. type: "GET",
  3. url: 'js/exercise.json',
  4. data: {},
  5. headers:'',
  6. datatype:'',
  7. async:'',
  8. success: function(result) {
  9. console.log(result);
  10. data = result;
  11. },
  12. Error: function(e) {
  13. console.log(e.status);
  14. console.log(e.responseText);
  15. },
  16. });