begin process at 2010 03 17 08:03:06
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Divers

 > AJAX EN MOINS DE 50 LIGNES

AJAX EN MOINS DE 50 LIGNES


 Information sur la source

Note :
7 / 10 - par 1 personne
7,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Divers Classé sous :ajax, simple, binding, httprequest, xmlhttprequest Niveau :Débutant Date de création :28/04/2008 Date de mise à jour :28/04/2008 21:18:07 Vu :6 520

Auteur : Kimjoa

Ecrire un message privé
Commentaire sur cette source (4)
Ajouter un commentaire et/ou une note

 Description

class ajax super réduite pour les noob :) , pas de gestion d'erreur ni de formulaire, mais reconnaissance du type de format de retour .

exemple: oublier pas le serveur sinon ca marche po :(
<script type="text/javascript" src="js/ajax.js"></script>
<script>
monObj={
    maPropriete:'moi',
    maFonctionAjax : function(){
        ObjAJAX = new Ajax({
            url          : "test.txt",
            returnFormat : "txt",
            method       : "POST",
            data         : {
                test  : "'''''",
                test1 : "4",
                test2 : "555"
            },
            asynchronus  : true,
            onComplete   :this.maFonctionDeRetour.bind(this)
        });
    },
    maFonctionDeRetour : function(response){
        alert(response+'+'+this.maPropriete)
    }
};
monObj.maFonctionAjax();
</script>

Source

  • // permet de referencer l objet lors de l apel d une fonction
  • Function.prototype.bind = function(object) {
  • var __method = this;
  • return function() {
  • return __method.apply(object, arguments);
  • }
  • }
  • function Ajax(property){
  • // ini des variables
  • var url = property.url;
  • var data = '';
  • for (j in property.data)
  • data += "&" + j + "=" + escape(property.data[j]);
  • var method = property.method || 'GET';
  • var asyn = property.asyn ;
  • var onComplete = property.onComplete;
  • var returnFormat = property.returnFormat || "txt";
  • // construit l objet requeteur
  • if (window.XMLHttpRequest)
  • this.obj = new XMLHttpRequest();
  • else if (window.ActiveXObject)
  • this.obj = new ActiveXObject("Microsoft.XMLHTTP");
  • //envoie la requete et appel le callback
  • this.obj.open(method,url,asyn);
  • if (method == "POST")
  • this.obj.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  • if (asyn){
  • this.obj.onreadystatechange = function () {
  • if (this.obj.readyState == 4 && this.obj.status == 200)
  • if (returnFormat != "txt")
  • response = this.obj.responseXML;
  • else response = this.obj.responseText;
  • onComplete(response);
  • }.bind(this)
  • this.obj.send(data);
  • }else{
  • this.obj.send(data);
  • if (this.obj.status == "200"){
  • if (returnFormat != "txt")
  • response = this.obj.responseXML;
  • else response = this.obj.responseText;
  • onComplete(response);
  • }
  • }
  • }
// permet de referencer l objet lors de l apel d une fonction
Function.prototype.bind = function(object) {
	var __method = this;
	return function() {
		return __method.apply(object, arguments);
	}
}
function Ajax(property){
// ini des variables
    var url = property.url;
	var data = '';
	for (j in property.data)
        data += "&" + j + "=" + escape(property.data[j]);
	var method = property.method || 'GET';
	var asyn = property.asyn ;
	var onComplete = property.onComplete;
	var returnFormat = property.returnFormat || "txt";
// construit l objet requeteur
	if (window.XMLHttpRequest)
       this.obj = new XMLHttpRequest();
    else if (window.ActiveXObject)
         this.obj = new ActiveXObject("Microsoft.XMLHTTP");
 //envoie la requete et appel le callback
    this.obj.open(method,url,asyn);
    if (method == "POST")
       this.obj.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    if (asyn){
        this.obj.onreadystatechange = function () {
            if (this.obj.readyState == 4 && this.obj.status == 200)
                if (returnFormat != "txt")
                    response = this.obj.responseXML;
                else response = this.obj.responseText;
            onComplete(response);
        }.bind(this)
        this.obj.send(data);
    }else{
        this.obj.send(data);
        if (this.obj.status == "200"){
            if (returnFormat != "txt")
                response = this.obj.responseXML;
            else response = this.obj.responseText;
            onComplete(response);
        }
    }
}



 Historique

28 avril 2008 17:21:47 :
j avais oublier le bind dans la fonction de retour
28 avril 2008 21:18:07 :
modifier grace au commentaire de ralecul

 Sources du même auteur

Source avec Zip Source avec une capture UID - FRAMEWORK JAVASCRIPT
Source avec Zip DOMBUILDER
Source avec Zip GETELEMENTSBYREG
Source avec Zip OPTIMISER VOS BOUCLES !!
Source avec Zip POSITION, OFFSETLEFT, CLIENTLEFT CROSSBROWSER

 Sources de la même categorie

Source avec Zip Source avec une capture SÉQUENCEUR par jdmcreator
Source avec Zip COMPRESSION DE TEXTE CÔTÉ CLIENT EN JS VIA ALGORYTHME LZW par niamor36
Source avec Zip VIRTUAL IPHONE (V.2) par loicseg
Source avec Zip MOOTABLEAU par Miky76
Source avec Zip CALCULER VOTRE IMC par lesnouesremy

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture MOTEUR DE RECHERCHE SANS PHP par jdmcreator
Source avec Zip Source avec une capture CLASSE AJAX : PROTOTYPE ROCKS ! par ralecul
Source avec Zip [GAG] GESTION AJAX GÉNÉRALISÉE par bultez
Source avec Zip Source avec une capture CLASSE AJAX par casper
SIMPLEJS : LIBRAIRIE AJAX COMBINÉE À DES EFFETS VISUELS. par DyoChris

Commentaires et avis

Commentaire de ralecul le 28/04/2008 18:54:39 7/10

Salut,

Bel effort ! Mais je vais rester sur la version de prototype...
Au contraire de ce que tu avances dans ta description, cette version est plus complexe à utiliser pour un noob.

Exemple :
---------
onComplete   :this.maFonctionDeRetour.bind(this)
Je suis pas sur que ça soit très explicite comme méthode d'utilisation ...

Il manque pas mal de truc indispensable fournit de base avec la version de prototype:
- evalScript
- Ajax.Updater, Ajax.Request, Ajax.PeriodicalUpdater
- Gestion des erreurs...

En parlant d'erreurs : je n'ai pas testé ton code mais je pense qu'il doit y avoir quelques erreurs :
- this.asyn = property.asyn || true; //toujours égal à true
- boucle de test des ActiveXObject //je pense que this.obj doit rester égal à la dernière version testé (pas sur)
- trop de variable publique : "this.maVariable" remplaçable par "var maVariable"
- response qui est global
- onComplete non facultatif, ...

Je suis tout de même content de voir une tentative de clone de prototype.Ajax.
La réalisation est au-dessus des scripts standards que l'on trouve tout le temps avec des fonctions et variables globales...
Il ne manque plus qu'une véritable séparation entre les variables membres et publiques.

Bonne continuation !

Commentaire de Kimjoa le 28/04/2008 20:38:11

salut ralecul, merci pour ton commentaire :).
Pour ce ki concerne le bind dans la fonction de retour, celui ci permet d identifier l objet sur lequel on applique la fonction , et non pas l objet ajax, j aurais pu faire un exemple sans blinding, mais j ai pensé que ca serait interressant pour un novice de connaitre cette fonction indispensable des que l on commence a faire de l objet, fonction tiré de la bibliotheque prototype !!!

"Il manque pas mal de truc indispensable fournit de base avec la version de prototype:"
Justement c est un script fait uniquement pour des besoins très limiter, je n ai pas voulu copier prototype, seulement faire une source ajax la plus simple possible, et pour eviter de charger le presque 100ko de prototype

concernant les erreurs , this.asyn peut etre egal a false , cela veux dire que l on ne continue par l analyse du script avant le retour de la requete , cette option peut etre utile dans certain cas.
Tu as raison concernant les variables globales, et le onComplete .

vais allé voir tes source a+ :)

Commentaire de ralecul le 28/04/2008 21:02:58

Je sais bien que this.asyn = false signifie que l'on est en mode synchrone.
Je pense juste qu'il y a une erreur au niveau de ton test : this.asyn = property.asyn || true;
Car quel que soit la valeur de property.asyn, this.asyn vaudra toujours true (false || true = true !)

PS : mes sources datent un petit peu, j'ai vraiment changé de façon de coder en javascript, je te conseille plutôt de jeter un coup d'½il aux sources disponibles sur mon site perso...

Commentaire de mahlaoui le 17/11/2008 11:27:26

Many Thanks

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Rechargement d'objet "AJAX" [ par benjiman2 ] Bonjour !Voila, je commence tout juste a programmer en AJAX ...et voila mon probleme ...Je voudrai que chaque 2 secondes, la page se rafraichisse dans AJAX - XMLHttpRequest - il ne veux pas afficher [ par jnbdzjnbdz ] Bonjour je viens de commencer avec ajax. Et je suis déjà entrain de développer une petite application web. Si vous aller ici:<a target="_blank" hr Ajax et IE7 [ par arnaultp ] Bonjour à tous!Je viens de me mettre à l'AJAX, et en reprenant un tutorial j'ai une erreur (voire 2 d'ailleurs) qui apparaît et que je n'arrive pas à Ajax : variable de réponse [ par chapata ] Bonjour à tous,(j'espère avoir posté dans le bon endroit ...)voilà je suis débutant en Ajax, je me suis inspiré des différentes méthodes sur le forum. Ajax - Impossible d'appeler ma page [ par darude94 ] Bonjour,Voici mon soucis, en cliquant sur le lien supprimer je voudrais supprimer l'element sans rafraichir le probleme et que je ne parviens pas jusq certain caractère non transmis avec POST [ par supers03 ] Bonjour,Lorsque j'envoi  des données via ajax et la méthode POST, le caractère '+' n'est pas transmis, il est remplacé par un espace. J'imagine que c' Formulaire tout simple avec envoi en JAVASCRIPT ! NO PHP [ par putainnn ] Bonjour,voila ma question est simple je voudrais que mon formulaire envoi ce que contient&lt;input type="nom"&gt;&lt;input type="pseudo"&gt;a mon emai HTTPS [ par MasterCent ] Bonjour,Je dois développer une application autour de Ajax, XMLHttpRequest,...L'url est en réalité un HTTPS. Comment puis-je m'authentifier ? Contexte [AJAX]Tableau et Liste déroulante [ par Ssayan ] Bonjour a tous,J'ai un petit problemen, je suis désoler mais je n'est pas encor éffectuer le code mais c'est assez simple a imaginer ^^Alors j'ai une Problème actualisation auto Ajax [ par misterdod ] Bonsoir,bon j'ai un souci, je souhaiterais qu'une div de ma page affiche un message suivant une donnée précise dans une table sql.J'utilise setInterva


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

Photothèque

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,484 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales