Exercice 14 : Comparaison AJAX Jquery VS AJAX Xhr de base + framework Jquery UI de base

Introduction :

C’est la comparaison entre une requête Ajax XHR et une requête Ajax Jquery.
les deux requêtes sont identiques, et lancent un appel(query) à afficher.php, avec une fonction(une action) de retour qui affiche le résultat dans la Div concernée.
Le resultat de afficher.php est un var_dump() d’un tableau.

Le tout dans un framework Jquery UI de base.

Pour le tester, voici le lien :
http://nicolash.org/exercice14/

Le code :

Index.html :
Appel aux librairies + affichage ou pas des DIVS


<!-- 		DEBUT DU CHARGEMENT DES LIBRAIRIES -->

<!--	APPEL LIB GOOGGLE -->
<!--  <script type='text/javascript' src='https://www.google.com/jsapi'></script>  --> <!--	LA FONCTION XHR POUR LES APPELS AJAX--><script src="fonctionsAjax.js" type="text/javascript"></script>

<!--	APPEL LIB JQUERY -->
<script src="librairies/jquery.js" type="text/javascript"></script><!--	APPEL LIB JQUERY UI ( look sympa du programme) --> <!--		<link href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" /> --><script src="librairies/jquery-ui.js" type="text/javascript"></script>
<script src="librairies/jquery.dialogextend.js" type="text/javascript"></script><!--   APPEL LIB DATATABLE --><script src="librairies/jquery.dataTables.js" type="text/javascript"></script>

<!--	APPEL LIB JQPLOT -->
<script src="librairies/jquery.jqplot.js" type="text/javascript"></script><!-- 	Plug ins --><script src="librairies/plugins/jqplot.barRenderer.min.js" type="text/javascript"></script>
<script src="librairies/plugins/jqplot.pieRenderer.min.js" type="text/javascript"></script><script src="librairies/plugins/jqplot.categoryAxisRenderer.min.js" type="text/javascript"></script>
<script src="librairies/plugins/jqplot.pointLabels.min.js" type="text/javascript"></script><script src="librairies/plugins/jqplot.json2.min.js" type="text/javascript"></script>

<!--	APPEL LIB DROPZONE -->
<script src="librairies/dropzone.js"></script><!-- Chargement de jQuery-Validation-Engine (fichier de langue + script) --><script src="librairies/validation-engine/js/languages/jquery.validationEngine-fr.js" type="text/javascript" charset="utf-8"></script>
<script src="librairies/validation-engine/js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script><!-- Chargement du CSS de jQuery-Validation-Engine --> <!--	FONCTIONS AJAX DU PROGRAMME --><script src="fonctionsMachine.js" type="text/javascript"></script>

<!--	CSS DU PROGRAMME -->

<!-- 		FIN DU CHARGEMENT DES LIBRAIRIES -->

Exercice 14

<img src="COMMANDIS.jpg" alt="" width="150px" height="30px" />

<!-- PAGE PRINCIPALE -->
<div id="page">
<div id="info">Les données vont apparaitre ici</div>
<!-- ICONES -->
<h3 id="draggable" class="icone" style="width: 130px; background: tan; border: 4px outset black; border-radius: 5px; left: 400px; top: 200px;"><img src="photoscommandis/historique.png" alt="" width="100px" height="100px" />Requetes</h3>
<!-- FENETRES -->
<div id="dialog2" title="Lancer 1 lecture jquery ajax"><!--zone du petit gif animé AJAX-->
<img id="charge" src="chargeur.gif" alt="" width="50px" />
<input id="button" name="button" type="button" value="Requete Xhr Ajax" />


<button id="tbutton" class="submit" type="submit">Requête Jquery Ajax</button></div>
</div>
<!-- FIN DE PAGE -->


fonctionMachine.js contient le code Javascript qui lance les appels sur afficher.php, on voit que la fonction jquery est bien plus simple que l’ancienne fonction Xhr, et encore y’a pas le serialise des variables… qui est l’avantage Majeur de Jquery, puisque cela permet de répupérer toutes les variables provenant d’un formulaire dans la vue php, sans rien écrire en javascript:


// JavaScript Document

// --------------------------------------------------- RECEPTION DES REQUETES AJAX ------------------------------------------------------


/* ANCIENNE METHODE AVEC XHR*/

 function afficher() {   
	 /*-----------------------------Config et envoi de la requete ASYNCHRONE : */
	 objetXHR = creationXHR();//création d'un objet XHR multi-navigateurs 	 
	// acquisition des variables JAVASCRIPT provenant du formulaire 
/* 	var categorie = document.getElementById('scategorie').selectedIndex; */
	temps = new Date().getTime();//création d'une variable temps pour l'anti-cache
	// transmission des variables acquises avec javascript au fichier PHP
	objetXHR.open("get",'afficher.php', true); //Config. objet XHR
/* 	objetXHR.open("get",'afficher.php?categorie='+categorie+'&primal='+primal+'&marque='+marque+'&anticache='+temps, true); //Config. objet XHR */
	objetXHR.onreadystatechange = actualiserPage;//désignation de la fonction de rappel
	//gestion du bouton et du chargeur
	document.getElementById("button").disabled= true;
	 document.getElementById("charge").style.visibility="visible";
	objetXHR.send(null);//envoi de la requete
	 /*---------------------------------------- */
 }
  
  function actualiserPage() {
	if (objetXHR.readyState == 4) {//test si le résultat est disponible
	 if (objetXHR.status == 200) {
	 var reponsePhp = objetXHR.responseText;//recup du résulat renvoyé par le serveur 
       //actualisation du résultat
	  document.getElementById("info").innerHTML=reponsePhp;
	  //affiche la zone info
	 document.getElementById("info").style.visibility="visible"; 
	  //gestion du bouton et du chargeur
	   document.getElementById("button").disabled= false;
	   document.getElementById("charge").style.visibility="hidden";
	 }
	else{
	   //message d'erreur serveur
	   var erreurServeur="Erreur serveur : "+objetXHR.status+" – "+ objetXHR.statusText;
	   remplacerContenu("info", erreurServeur);

	   //gestion du bouton et du chargeur
	  document.getElementById("button").disabled= false; 
	   document.getElementById("charge").style.visibility="hidden";
	   //annule la requete en cours
	   objetXHR.abort();
	   objetXHR=null;
	   }
	 }
  }

  
/* NOUVELLE METHODE AVEC JQUERY */
 $(function() {
     $("#tbutton").click(function(){
	//gestion du bouton et du gif animé chargeur Ajax
	document.getElementById("tbutton").disabled= true;
	document.getElementById("charge").style.visibility="visible";

	$.ajax({
            url: 'afficher.php',
            type: "GET",
			 data: "",
				success: function(data) {
				/* 	//code to execute */
				document.getElementById("info").innerHTML=data;
				//affiche la zone info
				document.getElementById("info").style.visibility="visible"; 
				alert('Requete ajax Jquery ok');
				/* 	Fait disparaitre l'image du chargeur Ajax et réactive le button ! */
				document.getElementById("tbutton").disabled= false;
				document.getElementById("charge").style.visibility="hidden";
				}
            });	
		
		});
 });


/*  ----------------------------------------GENERATION DE TABLES ------------------------------------------------------------ */
 
/*   ---------------------------------PLUGS IN DE FORMULAIRES --------------------------------------------------------------- */
 
/*  --------------------------------------FENETRAGE et ICONES-----------------------------------------------------------------------------  */
  
 
  // Ouvre les fenetres sur clic d'icone
$(function() {
$('#clickMe2').click(function(event) {
   /*  var mytext = $('#myText').val(); */

/* ligne dorigine tres inteeressante qui affiche une var supplemenaire dans la page (mytext)
   $('<div id="dialog2">'+mytext+'</div>').appendTo('body');   
 */


  $('<div id="dialog2"></div>').appendTo('body');    	
	event.preventDefault();

		 var dialog2Opts = {width:400, height:400, maxWidth: 800, maxHeight: 800, minWidth: 300, minHeight: 200,left: 100, top:10 ,autoOpen: true};
		 $( "#dialog2" ).dialog(dialog2Opts).dialogExtend({
        "closable" : true,
        "maximizable" : true,
        "minimizable" : true,
        "collapsable" : true,
        "dblclick" : "collapse",
  
        "minimizeLocation" : "right",
        
		
		
      });
    }); //close click
});
 

$(function() {
var dialogOpts = {width:400, height:400, maxWidth: 800, maxHeight: 800, minWidth: 300, minHeight: 200,left: 100, top:10 , autoOpen: false} ;
$( "#dialog2" ).dialog(dialogOpts).dialogExtend({
        "closable" : true,
        "maximizable" : true,
        "minimizable" : true,
        "collapsable" : true,
        "dblclick" : "collapse",
  
        "minimizeLocation" : "right",
        
      });
  });
   
   
   
   // Rends draggable les icones avec JQUERY
$(function() {
$( "#clickMe2" ).draggable();
});

En plus, les anciennes fonctions utilisant XHR ont besoin de ce fichier supplémentaire fonctionAjax.js pour fonctionner avec l’objet Xhr:

// JavaScript Document
 function creationXHR() {
   var resultat=null;
   try {//test pour les navigateurs : Mozilla, Opéra, ...
	    resultat= new XMLHttpRequest();
     } 
     catch (Error) {
     try {//test pour les navigateurs Internet Explorer > 5.0
     resultat= new ActiveXObject("Msxml2.XMLHTTP");
     }
     catch (Error) {
         try {//test pour le navigateur Internet Explorer 5.0
         resultat= new ActiveXObject("Microsoft.XMLHTTP");
         }
         catch (Error) {
            resultat= null;
         }
     }
  }
return resultat;
}

afficher.php est la « vue » qui lit la requête SQL grâce à PHP :


<?php
 error_reporting(0);
 require 'jsonwrapper.php';
include('connexionSql.php');
//indique que le type de la réponse renvoyée au client sera du Texte
header("Content-Type: text/plain");
//anti Cache pour HTTP/1.1
header("Cache-Control: no-cache , private");
//anti Cache pour HTTP/1.0
header("Pragma: no-cache");
//simulation du  temps d'attente du serveur (2 secondes)
sleep(1);


connexionSql();

$lectureSql="select * from livraison;";

$lecture = mysql_query($lectureSql) or die(mysql_error());
while ($col=mysql_fetch_array($lecture))
	{

	// possiblite de création du tableau avec les données de la BDD, dans l'ordre de la requête SQL
	/* $tab=array(
	"Primaire"=>$col[primal.nom],
	"Categorie"=>$col[1],
	"Marque"=>$col[2],
	"Prix"=>$col[prix],
	"Nombre"=>$col[nombre],
	"date"=>$col[date]
	); */
	
	$tab=array(
	$col[id],
	$col[1],
	$col[2],
	$col[3],
	$col[reference],
	$col[prix],
	$col[nombre],
	$col[coutlivraison],
	$col[heure],
	$col[date], 
	$col[dateperime],
	$col[fichier1]
	
	); 

	

	}
var_dump($tab);
	

?>

style.css est le fichier de css de l’exercice 14 :


@charset "utf-8";
/* CSS Document */
body, h1, h2, p { font-size: 1em; margin: 0; padding: 0; }
body {
  font-family: Verdana, Geneva, Arial, sans-serif;
  text-align: center;
}

#page {
   position: relative;
   margin: 0 auto;
   width:1200px;
   height:700px;
   border-top: medium solid grey;
   border-bottom: medium solid grey;
   border-left: medium solid grey;
   border-right: medium solid grey;
   	background-color:wheat;
   
}
#info {
	position: absolute;
  
  
	visibility:hidden;
	background-color:white;
	color:black;
	border:4px;
	   border-top: medium solid grey;
   border-bottom: medium solid grey;
   border-left: medium solid grey;
   border-right: medium solid grey;
 
	background-color:white;
}
#resultat {   
	font-weight:bold;
	   border-top: medium solid grey;
   border-bottom: medium solid grey;
 
}
#formulaire {
    position: absolute;
    left: 10px;
    top: 20px;
	width:200px;
	background-color:white;
	height:900px;
	 left: 10px;
	 	    border-top: medium solid grey;
   border-bottom: medium solid grey;
   border-left: medium solid grey;
   border-right: medium solid grey;
   
}
#stock {
    position: absolute;
    left: 700px;
    top: 50px;
	width:200px;
	background-color:white;
	height:400px;
		     border-top: medium solid grey;
   border-bottom: medium solid grey;
   border-left: medium solid grey;
   border-right: medium solid grey;
}



#charge {
    position: absolute;
    left: 10px;
    top: 10px;
	visibility:hidden
}

#dialog2{
	   font-size: 0.8em;
	 top: 30px;
left:10px;
}	

#display{
visibility:hidden;
}

	
#draggable { width: 130px; height: 50px; padding: 0.5em; background:white;}
	 
	 
#icone {width:130px;background:white;}

Prototype

Cette librairie permet de  de créer un OS dans le navigateur, de créer des fenêtres à la volée, de les réduire…

http://prototype-window.xilinus.com