4 étapes pour vous apprendre à utiliser AJAX

AJAX signifie « Asynchronous Javascript And XML » (Asynchronous JavaScript and XML), qui fait référence à une technologie de développement Web permettant de créer des applications Web interactives.

AJAX = JavaScript asynchrone et XML (un sous-ensemble du langage de balisage universel standard).

AJAX est une technologie permettant de créer des pages Web rapides et dynamiques.

AJAX est une technologie qui permet de mettre à jour des parties d'une page Web sans recharger la page entière. [1]

En échangeant une petite quantité de données avec le serveur en arrière-plan, AJAX peut permettre des mises à jour asynchrones des pages Web. Cela signifie que certaines parties d'une page Web peuvent être mises à jour sans recharger la page entière.

Les pages Web traditionnelles (n'utilisant pas AJAX) doivent recharger la page Web entière si le contenu doit être mis à jour.

Cet article présente principalement les connaissances pertinentes sur l'utilisation d'AJAX.

AJAX est une transmission asynchrone, le rafraîchissement partiel est très pratique et a de nombreuses utilisations !

Tout d'abord, il y a 4 étapes pour utiliser AJAX :

1 Créer un objet AJAX

var xmlHttp = new XMLHttpRequest();

<.>2. Établir une connexion (« Méthode de soumission », « Adresse URL »)

xmlHttp.open('get','./AJAX_XML.xml');

3. Déterminer l'état de préparation ajax et le code d'état

xmlHttp.onreadystatechange = function(){

    if (xmlHttp.readyState==4 && xmlHttp.status==200) {
  }
}

4. Envoyer une demande

xmlHttp.send(null);    //get方式参数为null,post方式，参数为提交的参数

Ce qui suit soumet le nom de l'utilisateur de manière asynchrone (après avoir entré le nom d'utilisateur, l'arrière-plan sera jugé de manière asynchrone et la réception vous demandera immédiatement s'il a été enregistré. Il sera jugé lorsqu'il n'est pas nécessaire de soumettre !)

Envoyer par la méthode GET

xx.html

<script type="text/javascript">
window.onload=function(){
  document.getElementById(&#39;username&#39;).onblur=function(){
    var name=document.getElementById(&#39;username&#39;).value;
    var req=new XMLHttpRequest();
    req.open(&#39;get&#39;,&#39;4-demo.php?name=&#39;+name);
    req.onreadystatechange=function(){
      if(req.readyState==4 && req.status==200){
        alert(req.responseText);
      }
    }
    req.send(null);  //如果send()方法中没有数据，要写null
  }
}
</script>

Nom d'utilisateur :

5a4b8d0a5ff6b1d7cda32164f687201c

xx.php

<?php
print_r($_GET);
?>　

1. IE ne prend pas en charge le chinois

2 , =, & sont confondus avec les mots-clés de la chaîne demandée.

Soumission POST

xx.html

<script type="text/javascript">
window.onload=function(){
  document.getElementById(&#39;username&#39;).onblur=function(){
    var name=document.getElementById(&#39;username&#39;).value;
    name=encodeURIComponent(name);
    var req=new XMLHttpRequest();
    req.open(&#39;post&#39;,&#39;5-demo.php?age=&#39;+20);
    req.onreadystatechange=function(){
      if(req.readyState==4 && req.status==200){
        alert(req.responseText);
      }
    }
  req.setRequestHeader(&#39;Content-Type&#39;,&#39;application/x-www-form-urlencoded&#39;);
    req.send(&#39;name=&#39;+name);  
  }
}
</script>

Nom d'utilisateur :

5a4b8d0a5ff6b1d7cda32164f687201c

xx.php

<?php
print_r($_POST);
print_r($_GET);
?>

1. Envoyer les données via send()

2. SetRequestHeader() doit être défini pour convertir les paramètres transmis au format XML

3. Soumettez le chinois directement sans transcodage

4. Les caractères de la demande de publication seront également confondus avec les caractères & et = de l'URL, il est donc recommandé d'utiliser l'encodage encodeURIComponent()

5. , en même temps que la soumission POST, la soumission GET peut être effectuée

Résoudre

IE ne prend pas en charge le chinois = et est confondu avec les mots-clés de la chaîne demandée Problème

Encodez simplement en js via encodeURIComponent().

window.onload=function(){
  document.getElementById('username').onblur=function(){
    var name=document.getElementById('username').value;
    name=encodeURIComponent(name);  //编码
    var req=new XMLHttpRequest();
    req.open('get','4-demo.php?name='+name);
    req.onreadystatechange=function(){
      if(req.readyState==4 && req.status==200){
        alert(req.responseText);
      }
    }
    req.send(null);  //如果send()方法中没有数据，要写null
  }
}

1. req.responseText : récupère la chaîne renvoyée

2 req.responseXML : récupère la chaîne renvoyée selon le. Données de structure DOM

Faites attention à la différence entre les méthodes de soumission post/get !

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!