Alternative a XML_HTTP_REQUEST - Forum Javascript / DOM / Ajax

La Communauté Webmaster

  Forum-webmaster
  Technique - programmation
  Javascript / DOM / Ajax (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  Alternative a XML_HTTP_REQUEST

« Précédent Suivant »

Pages: [1]

Auteur

Sujet: Alternative a XML_HTTP_REQUEST (Lu 2066 fois)

Alternative a XML_HTTP_REQUEST
« sur: le 12-04-2007 a 18:48:23 »

tavman
Habitué

Hors-Ligne

Messages: 466

Plus je me documente sur AJAX et plus je me rend compte que cette technologie est très controversée. Tout d'abord, les XML_HTTP_REQUEST sont en cours de vaildation chez le W3C... ce qui n'est pas un mal mais depuis le temps qu'on les utilise... c'est peut-être un peu tard. Ensuite, ceux qui ont déjà essayé de tripotter la bête sans passer par une librairie se sont rendu compte que ca n'a pas été implémenté de la même façon sous IE et sous les autres navigateurs. Enfin, les librairies d'AJAX composées de 50 fonctions incompréhensibles dans un fichier de 300 Ko, merci mais c'est totalement stupide quand on sais qu'on peut parfaitement faire du AJAX avec un code de quelques lignes.
Je suis donc parti à la recherche d'une solution alternative... et après quelques recherches, j'ai trouvé. Il y a toujours la solution de passer par une Iframe invisible et de changer sa source en utilisant des trucs parent.mafonction = function() dans la nouvelle page par exemple... Mais vous serez d'accord que c'est vraiment dégueulasse...

En fait, ce que j'ai trouvé semble tellement idiot à première vue qu'on se demande même pourquoi on joue avec les XML_HTTP_REQUEST... Alors voici ce que j'ai trouvé :
Code:
function loadJS (url) {
   var headID         = document.getElementsByTagName("head")[0];
   var scriptNode      = document.createElement('script');
   scriptNode.language   = 'javascript';
   scriptNode.src      = url;
   headID.appendChild(scriptNode);
}
J'ai mis un exemple sur
http://arachnoida.free.fr/test.html

Il y a cependant quelques petites subtilités à comprendre pour obtenir les mêmes résultats qu'avec AJAX...

Mais revenons en plutot au principe de base du XML_HTTP_REQUEST. Que fait-il exactement ?
La réponse est simple : il charge le contenu d'un fichier (ca peut être un fichier texte, HTML ou langage serveur, peut importe... je pense même qu'avec une image, c'est le même résultat lol) et le renvoit dans une String...
Comme vous le savez peut-être, il est possible de créer du code à partir d'une String avec eval. Exemple :
Code:
eval("alert('salut')");
Seulement, utiliser eval, c'est quand même top cracra. Donc pour utiliser proprement XML_HTTP_REQUEST, il faut avoir toutes ses fonctions chargées dans la page avant...

Ce que propose ma solution, c'est la possibilité de charger des variables mais aussi des fonctions directement... et qui plus est, rien ne vous oblige a mettre l'extension .js a votre script... Vous pouvez (par exemple) donner l'extention .php et créer un fichier php qui génère un code javascript...
Code:
<?php
echo "alert('salut');";
?>

Un autre aspect des XML_HTTP_REQUEST est la possibilité de faire parvenir des variables au serveur en POST (en GET désollé mais c'est du passage par URL...) et là, effectivement, mon système a un point faible... Mais comme chaque problème a sa solution, ici, elle consiste à utiliser les cookies juste avant de loader le javascript.

C'est vrai que si on doit loader un nouveau script toutes les 3 secondes, on obtient un code source avec 150 balises script... Mais rien ne vous empèche d'effacer la balise une fois que le script est chargé... Car une fois que c'est loadé, ca reste dans la mémoire.

Bon, je ne dit pas que ma solution est meilleure ou moins bonne que d'utiliser AJAX, mais ca reste selon moi une très bonne alternative.

Rapporter au modérateur

I-Radian

Re:Alternative a XML_HTTP_REQUEST
« Répondre #1 sur: le 02-11-2007 a 22:35:34 »

tripy
Membre récent

Hors-Ligne

Messages: 7

Je suis un lama!

En fait, ta solution n'est rien d'autre que du script DOM.
Tu ne travail plus en javascript pure, comme tu le ferais avec un eval (qui est vraiment à proscrire, je suis d'accord) ou avec un document.write.

En fait, pour passer tes valeurs en POST, tu as une solution, basée exactement sur ce que tu as donné comme exemple.
nu createElement peut créer n'import quel type d'éléments HTML, y compris un formulaire.
J'ai utilisé cette etchnique il y a quelques temps pour une script de paiement via paypal.

Plutôt que de me casser la tête avec de l'ajax ou des redirection, je crée un formulaire avec quelques variables qui vienne d'un formulaire existant, et je soumet ce formulaire via javascript.
Dans ton cas, tu pourais le faire via un iframe, ou une frame de 1x1, pour éviter l'ajax.
La source du js que j'utilise est la suivante:
PS: je me base sur la librairie prototype pour me faciliter la vie. Ajax.Request est un objet de cette librairie
Code:

//-------------------------------------------------
//-- Package buying
//-------------------------------------------------
/**
* Fetch the DB values of pro and std packages.
* This function receive a JSON object, and extract every key from it, instantiating local variables from it.
* Used to setup javascript variables from the PHP config
*/
function getVal(){
var url="/libs/xml/payment.php";
var req="action=getValue&hash="+Math.random();
var ajx=new Ajax.Request(
url,{
method : 'post',
parameters : req,
evalScripts: true,
onComplete : function(q){
var json=q.responseText.evalJSON();
var jsonKeys=Object.keys(json);
for(var cptK=0;cptK<jsonKeys.length;cptK++){
key=jsonKeys[cptK];
val=eval(key+'=json.'+key);
}
}
}
);
}

/**
* Create an element of type input, and return it
* @param string type
* @param string name
* @param string value
* @return domElm
*/
function addInput(type,name,value){
var inp=document.createElement('input');
inp.type=type;
inp.name=name;
inp.value=value;
return inp;
}

/**
* Create and submit the paypal form with the user entered values
*/
function paypal(){
var url="/libs/xml/payment.php";
var stdCnt=$('inpTxtStd').value;
var proCnt=$('inpTxtPro').value;
var req="action=paypal&hash="+Math.random()+"&stdCnt="+stdCnt+"&proCnt="+proCnt;
var doSubmit=true;
var ajx=new Ajax.Request(
url,{
method : 'post',
parameters : req,
evalScripts: true,
onComplete : function(q){
try{
//delete an existing paypal form if the user clicks twice on submit
if($('frmPaypalChk').name){
var trg=$('frmPaypalChk');
trg.parentNode.removeChild(trg);
}
}
catch(r){}
var key=null;
var frm=document.createElement('form');
if(testing==true){
frm.action="https://www.sandbox.paypal.com/cgi-bin/webscr";
frm.appendChild(addInput('hidden','business','seller@test.com'));
frm.appendChild(addInput('hidden','notify_url','http://test.com/libs/paypal/ipn_paypal.php'));
}
else{
frm.action="https://www.paypal.com/cgi-bin/webscr";
frm.appendChild(addInput('hidden','business','paypal@test.com'));
frm.appendChild(addInput('hidden','notify_url','http://test.com/libs/paypal/ipn_paypal.php'));
}
frm.method="post";
frm.id="frmPaypalChk";
frm.name=frm.id;
frm.appendChild(addInput('hidden','cmd','_cart'));
frm.appendChild(addInput('hidden','upload',1));

//json is the response of the server containing the objects prices
//It contains the stored transaction ID that have been generated from the server
//before we send the user on the paypal pages
var json=q.responseText.evalJSON();
var jsonKeys=Object.keys(json);
for(var cptK=0;cptK<jsonKeys.length;cptK++){
key=jsonKeys[cptK];
val=eval('json.'+key);
if(key!='alert'){
//There has been no problems, we carry on
frm.appendChild(addInput('hidden',key,val));
}
else{
alert(val);
doSubmit=false;
}
}
if(doSubmit==true){
document.getElementsByTagName('body')[0].appendChild(frm);
$('frmPaypalChk').submit();
}
}
}
);
}