Explication détaillée de la façon d'utiliser ajax-tutoriel php-php.cn

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

怪我咯

Libérer： 2023-03-13 20:54:01

original

2227 Les gens l'ont consulté

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

Copier après la connexion

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>

Copier après la connexion

Nom d'utilisateur :

<input type="text" name="" id="username">

xx.php

<?php
print_r($_GET);
?>

Copier après la connexion

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>

Copier après la connexion

Nom d'utilisateur :

<input type="text" name="" id="username">

xx.php

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

Copier après la connexion

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

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(&#39;username&#39;).onblur=function(){
    var name=document.getElementById(&#39;username&#39;).value;
    name=encodeURIComponent(name);  //编码
    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
  }
}

Copier après la connexion

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!