A propos de Google Suggest, implémenté ces jours-ci par défaut.
Regardez comme c'est astucieux, leur façon de faire des requetes asynchrones.
Au lieu d'utiliser de l'AJAX de base avec XMLHttpRequest(), ils utilisent la méthode suivante :
1) à chaque caractère tapé, ils injectent dans le HEAD de la page un javascript généré dynamiquement. ça génére donc des requetes sur leur server, et ça ressemble à ça :
2) Ce javascript est généré de la façon suivante (j'ai simplifié le code pour qu'il soit plus lisible)
une première fois :
Dans le head, on se retrouve à la fin avec un truc comme ça dans le DOM :
puis, il leur suffit de changer la source du script en modifiant l'object "gac_a" (avec SetAttribut('src', 'nouvelle url') je suppose)
3) Cette requete renvoit alors un code javascript qui ressemble à ça :
4) la fonction ac.h() est alors excécutée et se charge d'updater l'UI (le display du suggest)
C'est vraiment très très astucieux, ça permet de faire de l'AJAX Cross-Browser sans se soucier du navigateur et sans requete du type XMLHttpRequest().
Et bien sur .... c'est 100% Cross-Domain puiqu'on peut utiliser cette technique pour aller lire du JS sur un autre domaine : http://www.autredomaine.com/mon_script_cross_domain.js
Vraiment sympas cette façon de faire, qu'en pensez vous ?
Regardez comme c'est astucieux, leur façon de faire des requetes asynchrones.
Au lieu d'utiliser de l'AJAX de base avec XMLHttpRequest(), ils utilisent la méthode suivante :
1) à chaque caractère tapé, ils injectent dans le HEAD de la page un javascript généré dynamiquement. ça génére donc des requetes sur leur server, et ça ressemble à ça :
Code:
http://clients.google.com/complete/search?hl&q=colo
http://clients.google.com/complete/search?hl&q=coloc
http://clients.google.com/complete/search?hl&q=coloca
http://clients.google.com/complete/search?hl&q=colocat
http://clients.google.com/complete/search?hl&q=colocatr
etc ...
2) Ce javascript est généré de la façon suivante (j'ai simplifié le code pour qu'il soit plus lisible)
une première fois :
Code:
<SCRIPT>
window.setTimeout(function() {
var xjs=document.createElement('script');
xjs.src='monscript_a_injecter_dans_le_head.js';
document.getElementsByTagName('head')[0].appendChild(xjs);
}, 0)
</SCRIPT>
Dans le head, on se retrouve à la fin avec un truc comme ça dans le DOM :
Code:
<SCRIPT id="gac_a" src="http://clients1.google.com/complete/search?hl=fr&q=coloca"></SCRIPT>
puis, il leur suffit de changer la source du script en modifiant l'object "gac_a" (avec SetAttribut('src', 'nouvelle url') je suppose)
3) Cette requete renvoit alors un code javascript qui ressemble à ça :
Code:
window.google.ac.h(["colocatri",[
["colocatrice","61,300 résultats","1"],
["colocatrices.com","36,400 résultats","2"],
["colocatrice.com","380 résultats","3"],
["colocataires.fr","6,310 résultats","4"],
["colocataires .com","47,200 résultats","5"],
["colocataire paris","729,000 résultats","6"],
["colocation","11,800,000 résultats","7"],
["colocatrice dictionnaire","157 résultats","8"],
["colocataire.fr","4,800 résultats","9"],
["colocataire","783,000 résultats","10"]
]])
4) la fonction ac.h() est alors excécutée et se charge d'updater l'UI (le display du suggest)
C'est vraiment très très astucieux, ça permet de faire de l'AJAX Cross-Browser sans se soucier du navigateur et sans requete du type XMLHttpRequest().
Et bien sur .... c'est 100% Cross-Domain puiqu'on peut utiliser cette technique pour aller lire du JS sur un autre domaine : http://www.autredomaine.com/mon_script_cross_domain.js
Vraiment sympas cette façon de faire, qu'en pensez vous ?