Explication détaillée de la façon d'utiliser ajax

AJAX est une technologie permettant d'échanger des données avec un serveur pour mettre à jour une partie d'une page web sans recharger la page entière. 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. statut de préparation ajax et Code de statut

xmlHttp.onreadystatechange = function(){

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

Envoyer la demande

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

Le 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 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 des données via send()

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

3. La soumission de publication peut soumettre directement le chinois sans transcodage

4

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

5 En même temps que la soumission POST, vous pouvez effectuer la soumission GET

pour résoudre le problème

IE ne prend pas en charge le chinois =, & sont confondus avec les mots-clés de la chaîne demandée Problème Encodez simplement en js via encodeURIComponent().

1. req.responseText : Obtenez la chaîne renvoyée

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

2 req.responseXML : Obtenez les données renvoyées selon la structure DOM

.

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!