Comment faire AJAX Avec PHP et HTML

August 31

Comment faire AJAX Avec PHP et HTML


fonctions AJAX permettent des pages Web pour mettre à jour le contenu HTML sans que l'utilisateur d'avoir à actualiser la page ou recherchez une autre page. Le balisage HTML pour une page peut appeler une fonction JavaScript, ce qui à son tour peut appeler un script PHP. Le script PHP peut extraire des données supplémentaires, parfois à partir d'une base de données et formatée dans le balisage XML, renvoyant ce à la fonction JavaScript. Le code JavaScript peut alors écrire ces nouvelles données dans le code HTML, ce qui rend de nouvelles informations apparaissent comme l'utilisateur interagit avec la page Web.

Instructions

1 Créez un nouveau document HTML. Tapez le code suivant dans un fichier vierge dans votre éditeur de texte et de donner le fichier une extension ".html" lorsque vous enregistrez:

<Html>
<Head>
<Script type = "text / javascript">
fonctionner processData () {
// Chercher de nouvelles données
}
</ Script>
</ Head>
<Body>
<Div id = "update"> Certains contenus </ div>
<Input type = valeur "bouton" = "appuyez sur moi" onclick = "processData ()" />
</ Body>
</ Html>

Lorsque l'utilisateur clique sur le bouton affiché sur cette page, le navigateur appelle la fonction JavaScript dans la section de la tête de la page.

2 Créer un objet XMLHttpRequest. Ajoutez le code suivant dans la fonction JavaScript:

XMLHTTP var;
if (window.XMLHttpRequest) {XMLHTTP = new XMLHttpRequest (); }
else {XMLHTTP = new ActiveXObject ( "Microsoft.XMLHTTP"); }

Cela permet à la page Web pour gérer les différents navigateurs.

3 Envoyez votre demande de données à un script PHP. Ajoutez le code suivant dans la fonction JavaScript, en laissant un espace pour le code avant qu'il:

xmlHTTP.open ( "GET", "get_data.php", true);
xmlHTTP.send ();

Cela indique au navigateur de demander des informations supplémentaires à partir du script PHP spécifié.

4 Créer votre script PHP. Ouvrez un nouveau fichier dans un éditeur de texte et l'enregistrer comme "get_data.php" pour correspondre au paramètre à la méthode d'envoi que vous avez utilisé dans votre code JavaScript. Tapez le code exemple suivant:

<? Php
echo "nouvelles données";
?>

Ceci est un exemple simple pour la démonstration, mais vous pouvez ajouter tout traitement de PHP vous avez besoin, y compris les requêtes de base de données. Vous pouvez également créer votre texte de réponse dans le balisage XML si cela convient à votre site.

5 Manipuler la réponse de votre script PHP. Dans votre fonction JavaScript, avant la ligne dans laquelle vous ouvrez l'objet XMLHttpRequest, ajoutez le code suivant:

xmlHTTP.onreadystatechange = function () {
if (xmlHTTP.readyState == == 4 && xmlHTTP.status 200) {
// Gérer les données de réponse
}}

Lorsque JavaScript reçoit une réponse du script PHP, ce code sera exécutée. Le code vérifie que la réponse est valide. Dans cette instruction conditionnelle, vous pouvez ajouter du code à écrire les nouvelles données dans votre page HTML.

6 Mettre à jour le contenu de votre page. Dans l'instruction conditionnelle de réponse JavaScript, ajoutez le code suivant:

document.getElementById ( "mettre à jour") innerHTML = xmlHTTP.responseText.

Ce code identifie l'élément div dans la page, puis écrit le texte à partir du code PHP de réponse en elle.

7 Sauvegardez vos fichiers et les télécharger sur votre serveur. Accédez à la page et cliquez sur le bouton pour vérifier que la fonction fonctionne. Vous devriez voir le contenu de la modification de l'élément div.

Conseils et avertissements

  • Vous pouvez transmettre des données à partir de la fonction JavaScript pour le script PHP, ainsi que de recevoir des données.
  • scripts AJAX rencontrent parfois des problèmes avec le cache du navigateur. Pour contourner ce problème, vous pouvez ajouter une variable de nombres aléatoires pour le code JavaScript à la fin de la chaîne d'URL de script PHP.

          

Post a comment: