JavaScript est un langage de programmation largement utilisé, tandis que PHP est un langage de script utilisé côté serveur. Dans le processus de développement Web, nous devons souvent combiner ces deux langages. Cet article vous présentera en détail comment intégrer des scripts PHP dans JavaScript et ce à quoi vous devez prêter attention.
1. Pourquoi devons-nous intégrer des scripts PHP dans JavaScript ? Dans le développement Web, nous avons souvent besoin de mettre à jour dynamiquement le contenu de la page en fonction du comportement de l'utilisateur, comme par exemple calculer les résultats en temps réel en fonction des données saisies par l'utilisateur. l'utilisateur, ou en fonction des options sélectionnées par l'utilisateur, afficher dynamiquement différents contenus. Ces fonctions nécessitent généralement l'utilisation de JavaScript.
Côté serveur, nous utilisons souvent PHP pour gérer la génération et la sortie de données dynamiques. Par exemple, une fois que l'utilisateur a soumis les données du formulaire, nous devons envoyer les données au serveur, les traiter à l'aide de PHP et enfin renvoyer les résultats traités à l'utilisateur. De cette façon, nous devons intégrer des scripts PHP dans JavaScript pour atteindre l'objectif d'interaction des données entre le serveur et le client.
2. Utilisez la technologie ajax pour réaliser l'imbrication
La manière la plus courante d'imbriquer des scripts PHP dans JavaScript est d'utiliser la technologie Ajax.
Ajax est un ensemble de technologies permettant de créer des applications Web asynchrones, qui peuvent envoyer des requêtes asynchrones et mettre à jour des parties de la page sans actualiser la page entière. Habituellement, nous écrivons du code Ajax dans le JavaScript de la page, utilisons JavaScript pour envoyer la requête au serveur, le serveur renverra les données traitées, et enfin nous utilisons JavaScript pour mettre à jour les données sur la page.
Lorsque vous utilisez la technologie Ajax, vous devez d'abord créer un objet XMLHttpRequest, puis utiliser cet objet pour envoyer une requête au serveur. Ce qui suit est un code Ajax typique :
var xhr = new XMLHttpRequest();
xhr.open('POST', 'example.php', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.onload = function () {
//处理返回的数据
};
xhr.send('data=value');Dans ce code, nous créons d'abord un objet XMLHttpRequest et spécifions la méthode de requête (POST), l'URL cible et si elle est asynchrone via la méthode open. Ensuite, nous définissons l'en-tête de la requête via la méthode setRequestHeader pour indiquer au serveur que le type de données demandé est application/x-www-form-urlencoded. Ensuite, nous traitons les données renvoyées par le serveur dans la méthode onload. Enfin, nous utilisons la méthode send pour envoyer une requête au serveur et définir les données sur la valeur.
Dans les scripts PHP, nous pouvons utiliser le tableau $_POST pour obtenir les données soumises par le client. Voici un exemple PHP simple :
<?php $data = $_POST['data']; $result = doSomethingWithData($data); echo $result; ?>
Dans cet exemple, nous utilisons d'abord le tableau $_POST pour obtenir les données soumises par le client, puis utilisons la fonction doSomethingWithData pour traiter les données et afficher le résultat.
3. Traitement des requêtes inter-domaines
Lors de l'utilisation de la technologie Ajax, nous devons prêter attention à un problème, à savoir les limites des requêtes inter-domaines. Une requête inter-domaines fait référence à une requête qui envoie une requête à un autre nom de domaine ou port, comme l'envoi d'une requête de http://example.com à http://localhost:8080.
Les restrictions sur les requêtes inter-domaines sont appliquées par le navigateur. Par défaut, le navigateur n'autorise pas les requêtes inter-domaines et affichera un message d'erreur similaire à la console :
Access to XMLHttpRequest at 'http://localhost:8080/example.php' from origin 'http://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Pour résoudre les limitations des requêtes inter-domaines, nous pouvons ajouter des informations d'en-tête CORS (Cross-Origin Resource Sharing) sur côté serveur, ajoutez l'en-tête Access-Control-Allow-Origin à la réponse et définissez la liste des noms de domaine qui autorisent les requêtes inter-domaines. En PHP, les en-têtes CORS peuvent être ajoutés par :
header('Access-Control-Allow-Origin: http://example.com');Le code ci-dessus autorisera les requêtes inter-domaines depuis http://example.com.
En plus d'ajouter des en-têtes CORS, nous pouvons également utiliser JSONP (JSON with Padding) pour implémenter des requêtes inter-domaines. JSONP est une technologie qui utilise les caractéristiques de la balise
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
