Quelle est la différence entre la programmation côté client et la programmation côté serveur?
J'ai ce code:
<script type="text/javascript">
var foo = 'bar';
<?php
file_put_contents('foo.txt', ' + foo + ');
?>
var baz = <?php echo 42; ?>;
alert(baz);
</script>
Pourquoi cela n'écrit-il pas "bar" dans mon fichier texte, mais alerte "42"?
NB: Les précédentes versions de cette question concernaient explicitement PHP sur le serveur et JavaScript sur le client. La nature essentielle du problème et des solutions est la même pour toute paire de langues lorsque l’une s’exécute sur le client et l’autre sur le serveur (même si elles sont la même langue). Veuillez en tenir compte lorsque vous voyez des réponses parler de langues spécifiques.
Votre code est divisé en deux parties entièrement distinctes, le côté serveur et le côté client .
|
---------->
HTTP request
|
+--------------+ | +--------------+
| | | | |
| browser | | | web server |
| (JavaScript) | | | (PHP etc.) |
| | | | |
+--------------+ | +--------------+
|
client side | server side
|
<----------
HTML, CSS, JavaScript
|
Les deux parties communiquent via des requêtes et des réponses HTTP. PHP est exécuté sur le serveur et génère du code HTML et peut-être du code JavaScript envoyé en réponse au client où le code HTML est interprété et le code JavaScript exécuté. Une fois que PHP a fini de générer la réponse, le script se termine et rien ne se passera sur le serveur tant qu'une nouvelle requête HTTP n'aura pas été reçue.
L'exemple de code s'exécute comme ceci:
<script type="text/javascript">
var foo = 'bar';
<?php
file_put_contents('foo.txt', ' + foo + ');
?>
var baz = <?php echo 42; ?>;
alert(baz);
</script>
L'étape 1, PHP exécute tout le code entre les balises <?php ?>. Le résultat est le suivant:
<script type="text/javascript">
var foo = 'bar';
var baz = 42;
alert(baz);
</script>
L’appel file_put_contents n’a abouti à rien, il a juste écrit "+ foo +" dans un fichier. L’appel <?php echo 42; ?> a abouti à la sortie "42", qui se trouve maintenant à l’endroit où se trouvait ce code.
Le code HTML/JavaScript qui en résulte est maintenant envoyé au client, où il est évalué. L'appel alert fonctionne, tandis que la variable foo n'est utilisée nulle part.
Tout le code PHP est exécuté sur le serveur avant même que le client ne commence à exécuter du code JavaScript. Il ne reste plus dans la réponse de code PHP avec lequel JavaScript pourrait interagir.
Pour appeler du code PHP, le client devra envoyer une nouvelle requête HTTP au serveur. Cela peut se produire en utilisant l’une des trois méthodes possibles:
- Un lien qui amène le navigateur à charger une nouvelle page.
- Une soumission de formulaire, qui soumet des données au serveur et charge une nouvelle page.
- Une requête AJAX , qui est une technique Javascript permettant de faire une requête HTTP régulière au serveur (comme 1. et 2. will), mais sans quitter la page en cours.
Voici une question décrivant ces méthodes plus en détail
Vous pouvez également utiliser JavaScript pour que le navigateur ouvre une nouvelle page à l'aide de window.location ou soumette un formulaire en émulant les possibilités 1. et 2.
Pour déterminer pourquoi PHP le code ne fonctionne pas dans le code JavaScript , nous devons comprendre ce que côté client et côté serveur sont les langues et leur fonctionnement.
Langages côté serveur (PHP, etc.) : Ils récupèrent les enregistrements des bases de données, maintiennent l’état sur sans état HTTP connexion , et faire beaucoup de choses qui nécessitent une sécurité. Ils résident sur le serveur, ces programmes n'ont jamais leur code source exposé à l'utilisateur.
Ainsi, vous pouvez facilement voir que les langages côté serveur traitent les requêtes HTTP et les traitent, et, comme @deceze l’a dit, , PHP est exécuté sur le serveur et génère du code HTML, voire du code JavaScript, qui est envoyé comme suit: une réponse au client, où le code HTML est interprété et l'exécution de JavaScript.
D'autre part, les langages côté client (comme JavaScript) résident dans le navigateur et s'exécutent dans le navigateur. Les scripts côté client font généralement référence à la classe de programmes informatiques sur le Web exécutés côté client, par le navigateur Web de l'utilisateur, à la place de serveur. -côté.
Le code JavaScript est visible pour l'utilisateur et peut être facilement modifié. Par conséquent, pour des raisons de sécurité, nous ne devons pas compter sur JavaScript.
Ainsi, lorsque vous effectuez une demande HTTP sur le serveur, le serveur lit d'abord le fichier PHP avec soin pour voir si des tâches doivent être exécutées. et envoie une réponse au côté client. Comme @deceze l'a dit, * une fois que PHP a fini de produire la réponse, le script se termine et rien ne se passera sur le serveur tant qu'un nouveau HTTP demande entre en jeu. *
Alors maintenant, que puis-je faire si j'ai besoin d'appeler PHP? Cela dépend de la manière dont vous devez le faire: soit en rechargeant la page, soit en utilisant un appel AJAX.
- Vous pouvez le faire en rechargeant la page et en envoyant une demande HTTP
- Vous pouvez effectuer un appel AJAX avec JavaScript - cela ne nécessite pas de recharger la page.
Bonne lecture:
Votre Javascript sera exécuté sur le client, pas sur le serveur. Cela signifie que foo n'est pas évalué côté serveur et que, par conséquent, sa valeur ne peut pas être écrite dans un fichier sur le serveur.
La meilleure façon de penser à ce processus est comme si vous générez un fichier texte de manière dynamique. Le texte que vous générez ne devient un code exécutable que lorsque le navigateur l’a interprété. Seul ce que vous placez entre les balises <?php est évalué sur le serveur.
Soit dit en passant, prendre l'habitude d'intégrer des éléments aléatoires de la logique PHP en HTML ou en Javascript peut donner lieu à un code extrêmement complexe. Je parle d'expérience douloureuse.
Dans une application Web, chaque tâche est exécutée de manière à demander et à répondre.
La programmation côté client se fait avec du code html avec le script Java et ses frameworks, les bibliothèques s’exécutant dans les navigateurs Internet Explorer, Mozilla, chrome. Dans le Java scénario, les servlets de programmation côté serveur s'exécutent dans les répertoires Tomcat, Web-logic, j boss, WebSphere.
Je vais essayer de l'expliquer de manière simple.
Le côté client est ce que l’utilisateur voit/code qui est visible sur le navigateur.
La programmation côté client inclut HTML (HTML, HTML5, DHTML), CSS (CSS, CSS3) et JavaScript (JavaScript, ES5, ES6, ES7, TypeScript, JQuery, ReactJs, AngularJs, BackboneJs ou tout autre framework JavaScript Front-end).
La programmation côté client est axée sur "l'apparence de la page" et sur son comportement par rapport aux navigateurs.
- HTML est ce que nous voyons.
- CSS décide de sa conception (couleurs, images flottantes, rembourrage, etc.).
- Informations sur la page du moniteur JavaScript. Tous les appels d'API et la maintenance des données sur DOM sont effectués par JavaScript.
La programmation côté serveur inclut un code qui fournit des données au côté client. L'utilisateur n'est jamais capable de voir le côté serveur.
La programmation côté serveur implique un langage de programmation (Java, PHP, .Net, C #, C, C++, NodeJS, etc.), une base de données (SQL, Oracle, MySql, PostgreySql, No-Sql, MongoDB, etc.), une API tierce (Rest, Soap ), Logique d’entreprise.
La programmation côté serveur se concentre sur "comment rendre les données disponibles pour le côté client".
- Langage côté serveur est responsable de la communication entre différentes sources de données telles que base de données, API tierce, système de fichiers, chaîne de blocs, etc. Ces langages conservent certaines API avec lesquelles le côté client peut interagir.
- La base de données est responsable du stockage des informations.
- La logique applicative définit "comment utiliser les données et quoi faire avec les données".
Données de demande côté client ou demande de stockage de données, depuis le côté serveur via une API fournie par le côté serveur. Cette demande et cette réponse des données sont effectuées en suivant le protocole HTTP/FTP tel que REST API, SOAP API.