Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

comment fait Google ?

20 réponses
Avatar
bpdu92
bonjour tous
le portail Google anticipe la saisie, en préaffichant plusieurs choix
comment fait-il ?
aller-retour sur le site aprés chaque caractère saisi ?
utilisation de méthode Ajax (j'ai du mal à lire le src) ?
merci d'avance de vos lumières

10 réponses

1 2
Avatar
Pascal PONCET
bpdu92 a écrit :
[...] le portail Google anticipe la saisie, en préaffichant plusieurs choix
comment fait-il ?
[...] utilisation de méthode Ajax [...]



Bonjour,

Clairement : oui ! C'est un classique des librairies "Ajax" comme, par
exemple, celle de "Scriptaculous" :
http://github.com/madrobby/scriptaculous/wikis/ajax-autocompleter

Google a développé ses propres librairies, comme Yahoo du reste.

Cordialement,
Pascal
Avatar
bpdu92
On Thu, 02 Oct 2008 15:36:30 +0200, Pascal PONCET
wrote:

bpdu92 a écrit :
[...] le portail Google anticipe la saisie, en préaffichant plusieurs choix
comment fait-il ?
[...] utilisation de méthode Ajax [...]



Bonjour,

Clairement : oui ! C'est un classique des librairies "Ajax" comme, par
exemple, celle de "Scriptaculous" :
http://github.com/madrobby/scriptaculous/wikis/ajax-autocompleter

Google a développé ses propres librairies, comme Yahoo du reste.

Cordialement,
Pascal


merci de ta confirmation
si tu as encore instant,
je ne vois pas Ajax dans le source de la page Google,
quelle fonction assure ce role ?
merci d'avance, cordialt
Avatar
SAM
Le 10/2/08 5:04 PM, bpdu92 a écrit :
si tu as encore instant,
je ne vois pas Ajax dans le source de la page Google,



Comment peux-tu "voir" *Ajax* dans du code Javascript condensé ?

et d'abord *pourquoi* veux-tu voir "Ajax" ?
(le mot 'ajax' lui-même je suppose)

<http://fr.wikipedia.org/wiki/Asynchronous_JavaScript_and_XML>

quelle fonction assure ce role ?



Boudiou ! mon pôvre ! ce n'est pas si simple !
Ça ne se fait certainement pas en une seule fonction.

D'abord Google repère quels sont tes recherches préférées (ou tout au
moins les dernières) et les met dans un de tes cookies pour les
présenter la prochaine fois en plus des mots de son lexique approchant
ce que tu tapes et qui cette fois sont recueillis en Ajax.

merci d'avance, cordialt



Tapes donc dans Google :
ajax autocompletion
et/ou
google suggest

Bon courage ... !

Fait aussi une recherche dans ce NG sur 'autocompletion' et 'suggestion'
<http://groups.google.com/group/fr.comp.lang.javascript/search?group=fr.comp.lang.javascript&q=suggestion&qt_g=Rechercher+dans+ce+groupe>
(principalement les posts de Elegie)

--
sm
Avatar
Pascal PONCET
bpdu92 a écrit :
je ne vois pas Ajax dans le source de la page Google,
quelle fonction assure ce role ?



Rectification, je pense que tu utilises la version "labs" (expérimentale
en quelque sorte) de Google, appelée "Google Suggest".

J'ai vérifié le code sur cette page, ils n'utilisent pas XMLHttpRequest
(l'objet javascript qui permet de faire de l'Ajax).
En fait, ils utilisent une autre technique de script silencieux (qui ne
recharge pas la page) : le "cross-domain scripting", encore appelé
"script tag hack".

Ça consiste à générer, par les fonctions DOM de javascript, une balise
SCRIPT avec un attribut SRC. Par ce moyen, le script demande au
navigateur d'aller charger dynamiquement un autre script qui, de plus,
peut se trouver sur un domaine différent (ce que ne permet pas
XMLHttpRequest).

C'est peu courant, mais ça marche. Voici quelques liens (en anglais,
désolé) expliquant la technique :
- http://www.rockstargirl.org/sandbox/bidynodes
- http://ajaxpatterns.org/On-Demand_Javascript

Bonne chance,
Pascal
Avatar
bpdu92
On Thu, 02 Oct 2008 20:31:02 +0200, Pascal PONCET
wrote:

bpdu92 a écrit :
je ne vois pas Ajax dans le source de la page Google,
quelle fonction assure ce role ?



Rectification, je pense que tu utilises la version "labs" (expérimentale
en quelque sorte) de Google, appelée "Google Suggest".

J'ai vérifié le code sur cette page, ils n'utilisent pas XMLHttpRequest
(l'objet javascript qui permet de faire de l'Ajax).
En fait, ils utilisent une autre technique de script silencieux (qui ne
recharge pas la page) : le "cross-domain scripting", encore appelé
"script tag hack".

Ça consiste à générer, par les fonctions DOM de javascript, une balise
SCRIPT avec un attribut SRC. Par ce moyen, le script demande au
navigateur d'aller charger dynamiquement un autre script qui, de plus,
peut se trouver sur un domaine différent (ce que ne permet pas
XMLHttpRequest).

C'est peu courant, mais ça marche. Voici quelques liens (en anglais,
désolé) expliquant la technique :
- http://www.rockstargirl.org/sandbox/bidynodes
- http://ajaxpatterns.org/On-Demand_Javascript

Bonne chance,
Pascal


suite vos aimables et consistants conseils,
voici ce que je comprends du mécanisme
voici ce que je comprends du mecanisme
I-l'objectif est de proposer à l'internaute un affichage dynamique
-dit autocomplete- de termes établis à partir de ce qu'il a déjà
saisi;
l'internaute n'a qu'à cliquer sur celui qui convient


II-principe
1-envoi continu (aprés chaque carac. saisi) d'un choix de termes par
le navigateur, sans action explicite de l'internaute, pour indiquer au
serveur où en est la saisie locale,
ce dernier peut alors renvoyer des termes de plus en plus
vraisemblables

ces termes peuvent venir
2-du client, au moyen de cookies, qui ont permis de mémoriser les
termes (les mots-clé) qu'il a soumis precedemment
3-du serveur, à l'aide de sa base de données


III-techno
1-envoi de la saisie sans utiliser les méthodes Ajax (essentielt
XMLHttpRequest ) mais par un classique form-submit
2-elaboration de la reponse sur le serveur par modifs dynamiques de
page, faites avec des replace en JS, ou str_replace en PHP
3-affichage des termes complétés par document.form

ni la saisie, ni les termes suggérés ne sont listés si on affiche le
source

à l'ecoute de vos propositions de mise à jour,
vous en remercie par avance
Avatar
Pascal PONCET
bpdu92 a écrit :
ces termes peuvent venir
2-du client, au moyen de cookies, qui ont permis de mémoriser les
termes (les mots-clé) qu'il a soumis precedemment



En l'occurrence, je n'ai pas détecté de gestion de cookies, mais
seulement des requêtes successives au serveur.

1- ... mais par un classique form-submit



Surement pas ! sinon la page serait rechargée.
As-tu étudié les exemples des liens que j'avais cité ?

2- ... par modifs dynamiques de
page, faites avec des replace en JS, ou str_replace en PHP



Je ne comprends pas ta description de process.
Il s'agit, par une fonction dans un script déjà chargé, d'ajouter
dynamiquement* une balise SCRIPT sourcée dans le document. Cela a pour
effet de forcer le navigateur à charger un nouveau script, et non pas la
page entière.
(* au moment où l'évènement clavier a été déclenché)

3-affichage des termes complétés par document.form



Pas "document.form", mais création dynamique d'un tableau HTML à partir
des éléments renvoyés par le serveur.

Par exemple, voici la réponse du serveur après la saisie de "jav" :

window.google.ac.h([
"jav",[
["java","434 000 000 résultats","1"],
["javascript","520 000 000 résultats","2"],
["java.com","2 440 000 résultats","3"],
["java runtime","2 680 000 résultats","4"],
["java sun","11 400 000 résultats","5"],
["javascript telecharger","3 060 000 résultats","6"],
["java download","14 400 000 résultats","7"],
["javaboy","38 500 résultats","8"],
["java update","6 260 000 résultats","9"],
["javea","3 540 000 résultats","10"]
]
])

ni la saisie, ni les termes suggérés ne sont listés si on affiche le
source



Ça dépend avec quoi tu regardes le source !
Si tu utilises Firefox avec l'extension WebDevelopper
(http://chrispederick.com/work/web-developer), tu as une fonction
"afficher le code source généré" qui te permet de voir les changements
dynamiques. Pour les voir en temps réel, selon les évènements
déclenchés, tu as l'extension FireBug (http://getfirebug.com).
Bref, les bons outils de Webmaster, quoi...

Allez, au travail maintenant, jeune Padawan ;-)


PS: pense à ne reprendre qu'une partie des posts précédents dans la
discussion, sinon on va finir avec un Tolstoï !
Avatar
Fos Pat
bpdu92 wrote:
II-principe
1-envoi continu (aprés chaque carac. saisi) d'un choix de termes par
le navigateur,



En général on évite les évènements sur les touches inutiles (control, shift,
alt...) et on n'envoit la requete qu'apres une suite de caractères suivie
par une pause.
ça évite de surcharger le serveur pour rien.

ces termes peuvent venir
2-du client, au moyen de cookies, qui ont permis de mémoriser les
termes (les mots-clé) qu'il a soumis precedemment
3-du serveur, à l'aide de sa base de données



tu décris quoi exactement : le process google ou tu fais tes spec pour faire
la meme chose ?
Parce que dans un cas c'est faux, dans l'autre pourquoi pas.

III-techno
1-envoi de la saisie sans utiliser les méthodes Ajax (essentielt
XMLHttpRequest )



meme question que précédemment.
Quel est ton objectif ? c'est un projet de fac ? tu apprends à décrire un
process ?
Tu fais des spec ?
Si ce sont des spec, merci de donner le résultat une fois codé histoire
qu'on rigole un peu :)

mais par un classique form-submit



J'ai vraiment envie de voir le résultat :)

2-elaboration de la reponse sur le serveur par modifs dynamiques de
page, faites avec des replace en JS, ou str_replace en PHP



J'ai de plus en plus envie de voir le résultat :)

3-affichage des termes complétés par document.form



?

ni la saisie, ni les termes suggérés ne sont listés si on affiche le
source



J'espère que cette phrase n'a aucun lien avec une quelconque notion de
sécurité...

à l'ecoute de vos propositions de mise à jour,
vous en remercie par avance



Vaudrait mieux repartir de zéro plutot que de modifier ton texte à mon avis.
Avatar
SAM
Le 10/3/08 3:01 AM, bpdu92 a écrit :



voici ce que je comprends du mecanisme
I-l'objectif est de proposer à l'internaute un affichage dynamique
-dit autocomplete- de termes établis à partir de ce qu'il a déjà
saisi;
l'internaute n'a qu'à cliquer sur celui qui convient



Voilà.

Il faudrait savoir ce que tu veux faire exactement.
Est-ce simplement une aide à recherche sur ton site et/ou la page affichée ?
Sans faire trop compliqué, tu peux bien avoir une liste de mots-clés du
site pré-établie et l'obtenir en JavaScript directement (ça ne pèse
presque rien)

II-principe
1-envoi continu (aprés chaque carac. saisi) d'un choix de termes par
le navigateur, sans action explicite de l'internaute, pour indiquer au
serveur où en est la saisie locale,



Ça peut se faire directement si la liste n'est pas "universelle".
Le plus compliqué est la mise en place du système d'auto-complétion ou
auto-suggestion :
- pertinence croissante
(élimination des termes inapropriés au fur et à mesure de la frappe)
- méthode d'affichage de la liste (sous le champ d'entrée)

ce dernier peut alors renvoyer des termes de plus en plus
vraisemblables

ces termes peuvent venir
2-du client, au moyen de cookies, qui ont permis de mémoriser les
termes (les mots-clé) qu'il a soumis precedemment



Et ceci est discutable ...
J'ai ainsi une série de propositions fausses dues à une mauvaise frappe.

3-du serveur, à l'aide de sa base de données



ou de sa liste personnelle.

III-techno
1-envoi de la saisie sans utiliser les méthodes Ajax (essentielt
XMLHttpRequest ) mais par un classique form-submit



à mon idée : à proscrire absolument (lenteurs)

2-elaboration de la reponse sur le serveur par modifs dynamiques de
page, faites avec des replace en JS, ou str_replace en PHP
3-affichage des termes complétés par document.form

ni la saisie, ni les termes suggérés ne sont listés si on affiche le
source



?? je sais pô mais ... FireBug l'affiche lui.

Sur http://www.google.com/webhp?complete=1&hl=fr

Je vois le code :
<script id="gac_a"
src="http://clients1.google.com/complete/search?hl=fr&q=g">

et le fichier envoyé contient bien la liste de suggestions :

1window.google.ac.h(["g",[["gmail","216 000 000 résultats","1"],["google
map","86 200 000 résultats","2"],["google earth","69 200 000
résultats","3"],["guide michelin","753 000 résultats","4"],["go
sport","57 800 000 résultats","5"],["geoportail","382 000
résultats","6"],["gites de france","1 580 000
résultats","7"],["grosbill","2 450 000 résultats","8"],["go voyage","748
000 résultats","9"],["google video","215 000 000 résultats","10"]]])

Ça doit être basé sur Json.


Le principe alors, et si j'ai bien compris, consiste, lors du choix d'un
item, de faire créer un nouvel appel à script JS externe
(qui renvoie une nouvelle liste établie côté serveur)

Tiens l'appel au script externe est devenu là :

<script id="gac_a"
src="http://clients1.google.com/complete/search?hl=fr&q=construire%20un%20at">
1window.google.ac.h(["construire un at",[]])
</script>

bon ... je suis arrivé à la limite des termes prévus

à l'ecoute de vos propositions de mise à jour,



function newListe() {
var cible = document.getElementById('gac_a');
var s = document.createElement('script');
s.type = 'text/javascript';
s.src = 'http://recherche.php?cherche=' +
document.forms[0].recheche.value;
cible.parentNode.replaceChild(s, cible);
s.id = 'gac_a';
}



--
sm
Avatar
philg42
> Boudiou ! mon pôvre ! ce n'est pas si simple !
Ça ne se fait certainement pas en une seule fonction.

D'abord Google repère quels sont tes recherches préférées (ou tout au
moins les dernières) et les met dans un de tes cookies pour les présenter
la prochaine fois en plus des mots de son lexique approchant ce que tu
tapes et qui cette fois sont recueillis en Ajax.



Big Brother vous regarde.
Google devient pire que M$.
Bonsoir cordial
Avatar
bpdu92
On Fri, 03 Oct 2008 12:52:34 +0200, SAM
wrote:


Il faudrait savoir ce que tu veux faire exactement.


pas faire, mais plus modestement comprendre
1-le source de la page Google
2-comment est réalisé l'asynchronisme,
càd la simultanéité saisie-anticipation

Le plus compliqué est la mise en place du système d'auto-complétion ou
auto-suggestion :


ok, pb fonctionnel trés interessant, mais qui n'est pas -pour le
moment- dans mes questions; assez à faire avec les 2 pts ci-dessus


ces termes peuvent venir
2-du client, au moyen de cookies, qui ont permis de mémoriser les
termes (les mots-clé) qu'il a soumis precedemment




c pas le cas avec Google, comme indiqué dans l'url
http://labs.google.com//intl/fr/suggestfaq.html


III-techno
1-envoi de la saisie sans utiliser les méthodes Ajax (essentielt
XMLHttpRequest ) mais par un classique form-submit





à mon idée : à proscrire absolument (lenteurs)


d'accord (je réponds aussi trés partielt -vos 3 posts sont riches- à
Pascal et Fos )

2-elaboration de la reponse sur le serveur par modifs dynamiques de
page, faites avec des replace en JS, ou str_replace en PHP




egalement HS provisoirt


ni la saisie, ni les termes suggérés ne sont listés si on affiche le
source


src="http://clients1.google.com/complete/search?hl=fr&q=g">

et le fichier envoyé contient bien la liste de suggestions :

1window.google.ac.h(["g",[["gmail","216 000 000 résultats","1"],["google


heu, je vois pas où dans le Affichage source du portail Google ?




Ça doit être basé sur Json.


indispensable à connaitre, celui-là, pour faire du web 2.0 ?


Le principe alors, et si j'ai bien compris, consiste, lors du choix d'un
item, de faire créer un nouvel appel à script JS externe
(qui renvoie une nouvelle liste établie côté serveur)



je retiens que le pb de xmlhttprequest est le blocage par le
navigateur (selon type, version, niveau de secu) des appels à un autre
domaine que celui d'ou vient la page, ce qui restreint trop le web 2.0
d'ou 3 méthodes pour tromper le navigateur :
avec xmlhttpreq :
1-l'applic sur le serveur sert de proxy vers un autre domaine
2-le serveur web (Apache) peut etre réglé pour faire ce travail
et sans xmlhttpreq :
3-Script tag hack, alias On demand JS, par des <script> src=nomprog.js
ou nomprog.php

est-ce bien celle utilisée par Google ?
d'où vient son asynchronisme ? est-il inhérent dans xmlhttpreq ?

au plaisir de vous lire
<banalité>
3000 merci's, 1000/posteur
</banalité>
1 2