<b>Astuces-PC Index du Forum</b>
 FAQ Portail FAQFAQ   RechercherRechercher   MembresMembres   GroupesGroupes   <font color=red>S’enregistrer</font>>S’enregistrer 
 ProfilProfil   Se connecter pour vérifier ses messages privésSe connecter pour vérifier ses messages privés   ConnexionConnexion 

Notion AJAX (s4t4n)

 
Poster un nouveau sujet   Répondre au sujet    Astuces-PC Index du Forum » Programmation » C, C++, Développement web 2.0, etc
Sujet précédent :: Sujet suivant  
Auteur Message
s4t4n
Membre
Membre

Hors ligne

Inscrit le: 06 Jan 2008
Messages: 7
Point(s): 1
Moyenne de points: 0,14

MessagePosté le: Ven 1 Fév - 12:46 (2008)    Sujet du message: Notion AJAX (s4t4n) Répondre en citant

Bonjour a tous,

Voila j est fais un petit tuto pour vous montrez comment inserez du code PHP ou autre a la place d un texte dans votre page web, le tous avec AJAX et sans recharger la page. Mais avant rapel de quelques notion d objet javascript on va créer un objet avec des proprietés ,une methode, puis lui en rajouter une.Une connaissance minimum de programmation objet est necessaire.


<script type="text/javascript">

//objet javascript

function famille(nom, prenom, age){                         // la fonction qui va nous servir de
                                                                            //constructeur un peu comme __construct en PHP5
                                                                           //rapel: les class n existent pas en javascript.

this.nom = nom;                                                  // 'this' fais reference a l objet courant
this.prenom = prenom;
this.age = age;


this.affiche = function(){                                             // on crée une methode 'affiche' qui va nous permettre d
                                                                              //afficher toutes
                                                                             //les infos de chaque instances de 'famille' créer.

document.write('bonjour '+this.prenom+' '+this.nom+' age: '+this.age);
}
}

x = new famille("durand","marc", 26);                           // maintenant on peut créer autant d instance que l on veux.

x.affiche();                                                                // on affiche les info grace a notre methode

y = new famille("durand","boby", 35);                         // le frere de marc lol

y.affiche(); // pareil on affiche



//maintenant admettons que l on a besoin d une nouvelle proprieté qui pourrait etre la couleur des cheveux
//par exemple, on a deux facon de faire, soit on reecrit la function famille soit comme ca:



famille.prototype.couleur_cheveux;                                   // on rajoute la proprieté couleur_cheveux a l objet famille
                                                                                   // objet.prototype.proprieté


y.couleur_cheveux = "brun";                                          // on donne une valeur a la nouvelle propriété (important)

document.write('
');

document.write(y.couleur_cheveux);                                // et on affiche.

// maintenant chaque instance de famille créer aura aussi la proprieté couleur_cheveux .


// voila et a savoir qu on aurais tres bien pu faire des tableau.

// (-------------------------------------------------------------------------------------------------------------------------------------------------------------------)

Passons a AJAX:

<html>
<head>
<title>
requete avc AJAX
</title>
</head>
<body>
<script type="text/javascript">


function requete(url,block) {                                             // la fonction qui va nous simplifié la vie on verra a la fin pourquoi
var req = null;
if(window.XMLHttpRequest) {                                            // si le navigateur est Firefox ou autre

req = new XMLHttpRequest(); }                                      // on crée un nouveau objet XMLHttpRequest

else if(window.ActiveXObject){                                       // sinon si c est Internet Explorer

try {

req = new ActiveXObject("Msxml2.XMLHTTP");                   // on essaye de crée l activeX


} catch (e) { // si le premier foire

req = new ActiveXObject("Microsoft.XMLHTTP");                   // on essaye celui la. essayer toujour les deux

}
}
else {

alert("le navigateur veux rien savoir il est pourri ");           // si tous foire on explique que le navigateur du client est dauber

req = false; // et on stop

}

req.open("GET", url, true);                  // ici on met la variable url de la fonction et true pour asynchrone ou false pour synchrone

req.onreadystatechange = function()
{
if(req.readyState == 4)                                    // si l etat est a 4 c est a dire tous est ok
{
if(req.status == 200)                                            // idem si le code d erreur est bon
{

document.getElementById('votreBlock').innerHTML = req.responseText;                       // on place la reponse dans la page
}
else
{
document.getElementById('votreBlock').innerHTML="erreur";                                  // si ca foire on le dit aussi
}
}
}
req.send(null);                                                         // envoi des données a null dans ce cas la
}

</script>




Code:

<div id="votreBlock">
   Le texte qui va etre remplacer par le contenu de la page php
 </div> 




<a href="" onClick="requete('votrepage.php','votreBlock'); return (false);">ma page[/url] // apel de notre fonction qui prend en parametre le nom de la page et l id du block.
</body>
</html>


Voila j espere que vous aurez appris quelque chose, je ne suis pas rentrer dans les details car ajax c est tres puissant et c est pour ca que je dit "notion d Ajax".

" AJAX c est l avenir "

sinon une extension tres utile pour firefox permettant de debugger vos script et bien d autre chose qui se nomme firebug:

https://addons.mozilla.org/fr/firefox/addon/1843
_________________
Mon site perso: http://www.nap-security.13.fr


Publicité






MessagePosté le: Ven 1 Fév - 12:46 (2008)    Sujet du message: Publicité

PublicitéSupprimer les publicités ?
Montrer les messages depuis:   
Poster un nouveau sujet   Répondre au sujet    Astuces-PC Index du Forum » Programmation » C, C++, Développement web 2.0, etc Toutes les heures sont au format GMT + 1 Heure
Page 1 sur 1

 
Sauter vers:  
Retour en haut de la page

Index | creer un forum | Forum gratuit d’entraide | Annuaire des forums gratuits | Signaler une violation | Conditions générales d'utilisation
Powered by phpBB v2 © 2001, 2005 phpBB Group ¦ Theme: subSilver++
Traduction par : phpBB-fr.com
Personnalisation: Kevin-secure
Xooit.com :: Top Forums www.meilleurduweb.com : Annuaire des meilleurs sites Web. www.meilleurduweb.com : Classement des meilleurs sites Web. Pagerank de astuces-pc.xooit.fr