Exercice 16 : Créer des objets Javascript sur appel Jquery Ajax.

Introduction :

Dans cet exercice, je crée deux objets Javascripts, EMPLOYE et EMPLOYEUR, qui ont des sous fonctions qui permettent de les imprimer à l’écran (Très basiquement, pour faire court pour l’instant..)

L’acquisition des variables est soumise à un critère ID, puis se fait sur un fichier JSON qui aura été généré au préalable à l’aide d’une requête SQL, puis affiché à l’aide d’un langage quelconque (Php en l’occurence, mais ça aurait pu être du JAVA ou fait avec NODE.JS.).

L’acquisition et le parsing des variables du fichier JSON est faite à l’aide de la fameuse fonction Jquery $.ajax. cela se passe dans la fonction success: (de rappel ).

Ordonnancement :

Appel AJAX ->
Requête SQL ->
Conversion en JSON ->
Récupération et Parsing des Variables ->

Injection dans les objets Javascript ->
Affichage des objets Javascript.

Le code :

Index.html : Ne sert qu’à charger la lib jquery ;

<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
<head>
<!-- -----------------------------------------------DEBUT DU CHARGEMENTDES LIBRAIRIES------------------------ -->
		<!--	APPEL LIB JQUERY -->
		<script	 type="text/javascript" src="librairies/jquery.js"></script>

		<!--	CSS DU PROGRAMME -->
		<link rel="stylesheet" type="text/css" href="style.css" />
		
		<!-- Fonction Machine-->
		<script src="fonctionsMachines.js" language="javascript"></script>

<!-- ----------------------------------------------FIN DU CHARGEMENT DES LIBRAIRIES------------------------ -->
</head>
<html> 
<body>

</body>
</html>

fonctionsMachines.js : Le moteur qui va chercher les données JSON puis les injecter dans les objets …


/* CONSTRUCTEUR DE L'OBJET "EMPLOYE" */
function Employe(txtNom,txtPrenom,txtAge,txtDateNaissance,txtEmploi,txtSalaire,objEmployeur){
	this.nom=txtNom;
	this.prenom=txtPrenom;
	this.age=txtAge;
	this.datenaissance=txtDateNaissance;
	this.emploi=txtEmploi;
	this.salaire=txtSalaire;
	this.print=affEmploye;
	this.employeur=objEmployeur;
}

/* Fonction additionnelle de l'objet EMPLOYE qui affiche  les données */
function affEmploye(){
	document.write("Cet employé s'appelle ",this.prenom," ",this.nom," Il a  ",this.age," ans, son emploi :  ",this.emploi," son salaire est :",this.salaire," son employeur est :  <br/>");
	this.employeur.print();
}

/* CONSTRUCTEUR DUN OBJET SECONDAIRE  : EMPLOYEUR; CELUI-CI SERA IMBRIQUE AU PREMIER*/
function Employeur(txtNom,txtAdresse){
	this.nom=txtNom;
	this.adresse=txtAdresse;
	this.print=affEmployeur;
}
function affEmployeur(){
	document.write(this.nom," est a l'adresse ",this.adresse,".<br/>");
}

/* var id = 2; FACULTATIF Cet Id sera récupéré par le biais d'un formulaire ... */

/* CREATION DOBJET JAVASCRIPTS A PARTIR DE FICHIERS JSON */
/* PHASE 1 LECTURE EN BDD ET RECUPERATION DE VARIABLES AU FORMAT JSON */
$.ajax({
    type: "POST",
    url: "lectureBdd.php",
   /*  data: 'id=' + userid,  On peut transmettre l'id au fichier PHP pour choisir la personne appropriée dans la BDD... */
    dataType: "json", // Set the data type so jQuery can parse it for you
    success: function (data) {
							
							/* PHASE 2 CREATION DOBJETS JAVASCRIPT AVEC LES VAR PROVENANT DU FICHIER JSON */
							var employeur1 = new Employeur(data[7],data[8]);
							var employe1= new Employe(data[0],data[1],data[2],data[3],data[4],data[5],employeur1); 
							
							/* PHASE 3  AFFICHAGE DOBJETS AVEC LA METHODE PRINT DE LOBJET EMPLOYE */
							employe1.print();
							
							/*  document.getElementById("nom").innerHTML = data[0]; Autre solution pour remplir directement la page en HTML. */
    }
});




/* FACULTATIF : EXEMPLE DE CREATION DOBJETS IMBRIQUES MANUELLE REMARQUER LOBJET SECONDAIRE CITE EN DERNIERE POSITION   */
/* var employeur1 = new Employeur("BP","12 rue de Lilas 75016 Paris");
var employeur2 = new Employeur("Shell","44 Avenue de Picpus 75015 Paris");
var employe1= new Employe("Dupont","Nicolas","35","03021980","ingenieur","350000",employeur1);
var employe2= new Employe("Durant","philbert","40","03021976","employé","320000",employeur2);  */


lectureBdd.php qui retourne un tableau qui sera converti au format JSON, je n’ai pas mis la requête SQL cela ne sert à rien …

<?php
// Ce tableau est censé être le résultat d'une requête SQL ** sur deux tables différentes** :
$employe = array();
$employe[0] = "Dupont";
$employe[1] = "Pierre";
$employe[2] = "42";
$employe[3] = "03021973";
$employe[4] = "Ingenieur";
$employe[5] = "42003";
$employe[6] = "employeur1";
$employe[7] = "BP";
$employe[8] = "12 rue de Lilas 75016 Paris";

// On encode en JSON,le format compréhensible par Javascript et par d'autres langages...
echo json_encode($employe);
exit();


// Autre méthode de création de tableaux possible ...
/* 'nom'=>"Dupont",
'prenom'=>"Pierre" */

lectureBdd.php retourne les données Json suivantes directement à l’écran:

["Dupont","Pierre","42","03021973","Ingenieur","42003","employeur1","BP","12 rue de Lilas 75016 Paris"]

Finalement, l’aspect HTML du résultat est celui-ci :

Cet employé s'appelle Pierre Dupont Il a 42 ans, son emploi : Ingenieur son salaire est :42003 son employeur est :
BP est a l'adresse 12 rue de Lilas 75016 Paris.
Publicités