// ouvreture d une communication avec le serveur en mode POST TEXT MonAjax.open('POST',"MonCode.php",true);

Dimension: px

Commencer à balayer dès la page:

Download "// ouvreture d une communication avec le serveur en mode POST TEXT MonAjax.open('POST',"MonCode.php",true);"

Véronique Albert
il y a 8 ans
Total affichages :

1 <?php session_start(); // à placer en début de code?> <!DOCTYPE html> <html> <head> <meta charset="utf-8" />  <meta http-equiv="content-language" content="fr" /> <title>clientserver_client_js_html</title> <script type="text/javascript"> function Ajax_SendPOST(action,unParametre) { var MonAjax; // pointeur de référence // détection de la présence de ActiveX if (window.xmlhttprequest) { MonAjax = new XMLHttpRequest(); // Mozilla, Safari,... else if (window.activexobject){ MonAjax = new ActiveXObject('Microsoft.XMLHTTP'); // IE else { alert("votre navigateur n'est pas adapté pour faire des requêtes AJAX..."); MonAjax = false; // ouvreture d une communication avec le serveur en mode POST TEXT MonAjax.open('POST',"MonCode.php",true); MonAjax.onreadystatechange = function() { /* onreadystatechange alerte le JavaScript qu'une réponse est arrivée du serveur */ // schéma proposé : si l'action specifiée est "fait" alors remplace la balise "MonAjaxBablisex" par la réponse de PHP if (MonAjax.readyState == 4 && MonAjax.status == 200){ if(action=="fait1") { document.getelementbyid('monajaxbablise1').innerhtml = MonAjax.responseText; if(action=="fait2") { document.getelementbyid('monajaxbablise2').innerhtml = MonAjax.responseText;

$type="text/javascript"> function Ajax_SendPOST(action,unParametre) { var MonAjax; // pointeur de référence // détection de la présence de ActiveX if (window.$

2 else{// exemple de code //document.getelementbyid('monajaxbablise2').style.visibility="hidden"; // emission de la requête vers le serveur MonAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded'); MonAjax.send('unParametre='+unParametre+'&action='+action); function Ajax_SendGET() { var MonX_Ajax; // pointeur de référence if (window.xmlhttprequest) { MonX_Ajax = new XMLHttpRequest(); // Mozilla, Safari,... else if (window.activexobject){ MonX_Ajax = new ActiveXObject('Microsoft.XMLHTTP'); // IE else { alert("votre navigateur n'est pas adapté pour faire des requêtes AJAX..."); MonX_Ajax = false; // ouvreture d une communication avec le serveur en mode POST XML MonX_Ajax.open('GET',"Monfichier.xml",true); MonX_Ajax.onreadystatechange = function() { /* onreadystatechange alerte le JavaScript qu'une réponse est arrivée du serveur */ if (MonX_Ajax.readyState == 4 && MonX_Ajax.status == 200){ MyXMLResponse = MonX_Ajax.responseXML.documentElement; /* Récupérer la liste des items donc la liste des DVD */ var items = MyXMLResponse.getElementsByTagName("item"); var html = ''; // Présentation HTML de la liste des DVD count = items.length; // Nombre de DVD html += '<p>'; for(i = 0; i < count; i++) { // POUR CHAQUE item

$send('unParametre='+unParametre+'&action='+action); function Ajax_SendGET() { var MonX_Ajax; // pointeur de référence if (window.$

3 html += items[i].getelementsbytagname("title")[0].firstchild.nodevalue ; html += ' Réalisateur : '; html += items[i].getelementsbytagname("director")[0].firstchild.nodevalue ; html += ' Prix : '; html += items[i].getelementsbytagname("price")[0].firstchild.nodevalue + ' </br>'; html += '</p>'; document.getelementbyid('content').innerhtml += html; // emission de la requête vers le serveur MonX_Ajax.send(null); // code utilisé pour gérer les checkbox function Init() { var checkbox = document.getelementbyid ("trigger_iframe_send"); if (checkbox.addeventlistener) { checkbox.addeventlistener ("CheckboxStateChange", trigger_iframe_send_onchange, false); var checkbox = document.getelementbyid ("trigger_locate_send"); if (checkbox.addeventlistener) { checkbox.addeventlistener ("CheckboxStateChange", trigger_locate_send_onchange, false); var checkbox = document.getelementbyid ("trigger_ajax_send"); if (checkbox.addeventlistener) { checkbox.addeventlistener ("CheckboxStateChange", trigger_ajax_send_onchange, false);

$send(null); // code utilisé pour gérer les checkbox function Init() { var checkbox = document.getelementbyid ("trigger_iframe_send"); if (checkbox.addeventlistener) { checkbox.$

4 var checkbox = document.getelementbyid ("trigger_ajax_send1"); if (checkbox.addeventlistener) { checkbox.addeventlistener ("CheckboxStateChange", trigger_ajax_send_onchange1, false); var checkbox = document.getelementbyid ("trigger_ajax_sendx"); if (checkbox.addeventlistener) { checkbox.addeventlistener ("CheckboxStateChange", trigger_ajax_send_onchangex, false); // javscript remplace une balinse par un line html var javastring = " bonjour_ceci_est_une_variable_js "; document.getelementbyid("javascriptline").innerhtml ='<input name="js_vers_php" TYPE="hidden" VALUE=' + javastring + '>'; function trigger_ajax_send_onchange (event) { if (checkbox.checked) { Ajax_SendPOST("fait1","aaa"); console.log("the check box is checked."); // alert ("The check box is checked."); else {console.log("the check box is not checked."); //alert ("The check box is not checked."); function trigger_ajax_send_onchange1 (event) { if (checkbox.checked) { Ajax_SendPOST("fait2","bbb"); else {console.log("the check box is not checked."); function trigger_ajax_send_onchangex (event) { if (checkbox.checked) { Ajax_SendGET(); else {console.log("the check box is not checked.");

$getelementbyid("javascriptline").innerhtml ='<input name="js_vers_php" TYPE="hidden" VALUE=' + javastring + '>'; function trigger_ajax_send_onchange (event) { if (checkbox.$

5 function trigger_locate_send_onchange (event) { if (checkbox.checked) {window.location.assign('moncode.php?variable1=locate1&variable2=ccc'); else {console.log("the check box is not checked."); function trigger_iframe_send_onchange (event) { if (checkbox.checked) { console.log("the check box is checked."); var variablejs = 'toto'; /* variable JavaScript */ //document.write ("<iframe src='moncode.php?variable1="+variablejs+"' scrolling='no' frameborder='10' width='10' height='10' ><iframe>"); document.write ("<iframe src='moncode.php?variable1="+variablejs+"' ><iframe>"); </script> else {console.log("the check box is not checked."); </head> <body onload="init()"> <h2 class="_inline"> Echange de varaibles du client vers le serveur.</h2> <strong>rappel:</strong><br> Du côté du client : Toute la série d'outil basé sur javascript, ainsi que le html s'executent localement.<br>

write ("<iframe src='moncode.php?variable1="+variablejs+"' scrolling='no' frameborder='10' width='10' height='10' ><iframe>"); document.write ("<iframe src='moncode.php?variable1="+variablejs+"' ><iframe>"); </script> else {console.

6 Du coté du serveur: Le language php s'execute localement.<br><br> Il y a plusieures techniques pour que le code client (html,javascript) transmette des informations vers le serveur.<br> La plus simple : <br> - Ajouter des paramètres à l'url <a style="font-style:italic;font-size::50%"> Dans le serveur l'array $_GET recevra les variables <a style="font-style:italic;font-size::50%">rlz=1c1gfr343 et q=siteduzero </a><br> Quelques possibiltés différentes sont testées dans cette page.<br><br><br> <form method="post" action="moncode.php"> Iframe<br> <input id="trigger_iframe_send" type="checkbox" name="t_rigger" /> <label for="t_rigger" >exemple requête via iframe:</label> <br> <br>locate<br> <input id="trigger_locate_send" type="checkbox" name="t_rigger" /> <label for="t_rigger" >exemple de requête via locate:</label> <br> <br>ajax<br> <input id="trigger_ajax_send" type="checkbox" name="t_rigger" /> <label for="t_rigger" >exemple de requête via ajax text:</label> <br> <input id="trigger_ajax_send1" type="checkbox" name="t_rigger" /> <label for="t_rigger" >exemple1 de requête via ajax text:</label> <br> <input id="trigger_ajax_sendx" type="checkbox" name="t_rigger" /> <label for="t_rigger" >exemple1 de requête via ajax XML:</label> <br> <br>form call<br> <input target="_blank" type="submit" name="formsubmit" value="go"/> <label for="formsubmit" >exemple de requête via form: </label> <br><br>javascript to Form call<br> <input target="_blank" type="submit" name="formsubmit" value="go1"/> <label for="formsubmit" >exemple de requête via form input préparée par javascript: </label> <a id="javascriptline"></a>  </form> <br><br>

rlz=1c1gfr343&q=siteduzero</a><br> Dans le serveur l'array $_GET recevra les variables <a style="font-style:italic;font-size::50%">rlz=1c1gfr343 et q=siteduzero </a><br> Quelques possibiltés

7 REM : <a target="_blank" href=" web info</a> : <br> Les codes Sources : le code client (html Javascript)<a target="_blank" href="clientserver_client.pdf"> <strong>ici</strong> </a> Le code Serveur (PHP) <a target="_blank" href="clientserver_server.pdf"> <strong>ici</strong> </a><br> <?php echo '<br><br> Ici est affiché les infomrations reçue dans le serveur sur requête du client.<br>'; echo '<br><br> ces informations sont enregistrées dans le serveur dans l\'un des deux arrays $_GET et $_POST.<br>'; echo ' état des ces arrays avant le test. <br>'; echo ' ================================================ <br>'; if (isset($_get)) { echo 'Get array : '; print_r($_get); echo '<br>'; if (isset($_post)) { echo 'post array :'; print_r($_post); echo '<br>'; echo ' ================================================ <br>';?> <p> les reponses de PHP : informations reçues le serveur et gérés par : MonCode.php</p> <p id="content"> liste des DVD </p> <p id="monajaxbablise1">le MonAjaxBablise1 </p> <p id="monajaxbablise2">le MonAjaxBablise2 </p> </body> </html>

Javascript)<a target="_blank" href="clientserver_client.pdf"> <strong>ici</strong> </a> Le code Serveur (PHP) <a target="_blank" href="clientserver_server.pdf"> <strong>ici</strong> </a><br> <?

Documents pareils

TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012

TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012 FORMULAIRE DE CONTACT POUR PORTFOLIO PRINCIPE GENERAL Nous souhaitons réaliser un formulaire de contact comprenant les champs suivants : NOM PRENOM ADRESSE MAIL MESSAGE