Français
Français
AJAX (Asynchronous JavaScript et XML) est une technologie utilisée pour créer des applications Web interactives. Avec AJAX, les développeurs peuvent interagir avec le serveur sans rafraîchir la page, afin que le contenu de la page Web puisse être mis à jour dynamiquement.
Dans PHP7.0, nous pouvons combiner l'Ajax pour réaliser l'interaction des données entre les pointes avant et arrière, améliorant ainsi l'expérience utilisateur et les performances de la page Web.
Avant d'utiliser AJAX, vous devez d'abord créer un objet XMLHTTPRequest qui est utilisé pour interagir avec le serveur pour les données.
var xhr = new XMLHttpRequest();L'objet XMLHTTPRequest est le cœur du développement AJAX et est responsable de la création de demandes HTTP et de l'échange de données avec le serveur.
L'envoi d'une demande AJAX implique généralement deux étapes: la définition des paramètres de demande et l'envoi de la demande.
Définir les paramètres de demande:
var url = "example.php";
var params = "name=John&age=25";
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");Envoyer une demande:
xhr.send(params);Dans le code ci-dessus, nous envoyons la demande via la méthode post et passons les paramètres de demande au serveur dans des paires de valeurs clés. Avant d'envoyer une demande, utilisez la méthode setRequestHeader () pour définir l'en-tête de demande et spécifiez le format de transmission de données.
Lorsque le serveur répond à la demande, nous devons le traiter. Écoutez l'état de la réponse en définissant la propriété OnReadyStateChange de l'objet XHR.
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
var response = xhr.responseText;
// Traiter les données renvoyées par le serveur
}
}
};Après le retour de la réponse du serveur, les données sont obtenues et traitées à l'aide de la propriété ResponseText de l'objet XHR.
Dans PHP7.0, les scripts PHP sont utilisés comme gestionnaire d'arrière-plan pour gérer les demandes AJAX. Créez d'abord un fichier PHP pour recevoir et traiter la demande.
<?php
$name = $_POST['name'];
$age = $_POST['age'];
// Effectuer un traitement des données
$response = "Hello, " . $name . "! You are " . $age . " years old.";
echo $response;
?>Dans ce code, nous obtenons les paramètres passés par le front-end via la variable globale $ _post, effectuons le traitement des données correspondant et les renvoyons au frontal.
Dans la page frontale, envoyez une demande Ajax via JavaScript.
function sendRequest() {
var xhr = new XMLHttpRequest();
var url = "example.php";
var name = document.getElementById("name").value;
var age = document.getElementById("age").value;
var params = "name=" + name + "&age=" + age;
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
var response = xhr.responseText;
document.getElementById("result").innerHTML = response;
}
}
};
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(params);
}Dans ce code, nous définissons la fonction SendRequest (), obtenons l'entrée de données par l'utilisateur via la méthode GetElementById () et l'envoyons au serveur en tant que paramètre. Ensuite, les données de réponse s'affichent sur la page via InnerHTML.
En combinant Ajax et PHP7.0, les développeurs peuvent obtenir une interaction efficace des données avec le serveur, mettant ainsi dynamiquement à la mise à jour de contenu de la page Web et à l'amélioration de l'interactivité et des performances de la page Web. Dans le développement réel, l'utilisation rationnelle de la technologie AJAX peut améliorer l'expérience utilisateur et optimiser la vitesse de réponse de la page Web.
