begin process at 2012 02 14 04:12:16
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
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 :7 648
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 SYSTÈME DE REQUÊTE SUR DES DONNÉES JSON
Source avec Zip Source avec une capture MENU ANIMER HORIZONTALE OU VERTICAL , ACCÈSSIBLE SANS JS (SA...
Source avec Zip MARQUEE VERSION2 COMPATIBLE MOOTOOLS, JQUERY, PROTOTYPE ET S...
Source avec Zip Source avec une capture UID - FRAMEWORK JAVASCRIPT
Source avec Zip DOMBUILDER
Toutes les sources de Kimjoa

 Sources de la même categorie

COLONNES ADAPTABLES EN HAUTEUR par dronoide
Source avec Zip VECTEURS ET MATRICES: OUTILS GRAPHIQUES UTILES par william voirol
Source avec Zip Source avec une capture HTML5 PLAYER par kazma
Source avec Zip Source avec une capture SCROLLBAR PERSONNALISABLE par kazma
Source avec Zip INFO BULLE par RudiRatlos
Toutes les sources de la catégorie Divers

 Sources en rapport avec celle ci

Source avec Zip SIMULER UN SERVEUR COMET (EN PUSH) EN PHP ET JS par sebcap26
Source avec Zip Source avec une capture MOTEUR DE RECHERCHE SANS PHP par jdmcreator
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 probleme internet explorer et ajax [ par momo11985 ] Bonjour J'ai réaliser une application d'autocompletion en ajax.Cette application marche très bien avec firefox mais ne fonctionne pas sous internet Jquerry Jgrowl et Ajax [ par monoski ] Jgrowl est un plugin de Jquery permettant d'afficher des message inobstrusif de notification à la façon de Growl de Mac (pour situer le problème). Ce angles arrondis et navigation ajax [ par clavz40 ] Bonjour tout le monde, Je créai actuellement un site web et rencontre un petit souci. Je vous explique, j’ai arrondi les angles de mes div via le s Execution d'un JS appelé par AJAX [ par soularix ] Bonjour, Je suis débutant (plutôt amateur) et je n'arrive pas [^^sad1] exécuter un JS appelé par un AJAX. Voici un exemple simplifié de ce que je veu Simple fonction de calcul [ par jebalialaeddinecpp ] Bojour, Pour un mini-projet en Mathématique j'ai besoin de faire un petit code en JS pour calculer la somme de plusieurs inputs... J'ai trouvé ce code


Nos sponsors


Sondage...

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

Photo Happy Bright Landscape WIth ButterfliesPhoto Monument Valley Utah known as The Mittens
Photo drapeau corse 

Visiter la 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,874 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)