[AJAX] Détecter contenu d'un bloc et le remplir avec autre chose.

Version imprimable

06/09/2008, 14h41
rgesnot

[AJAX] Détecter contenu d'un bloc et le remplir avec autre chose.

Bonjour,

Je vais essayer de détailler mon besoin.

BESOIN :
- C'est un problème d'affichage de publicité.
- La régie A propose un unique code pour afficher les campagnes de tous ses annonceurs (pour un format donné).
- Quand la régie A n'a plus de campagne à afficher (par exemple si le visiteur à déjà vu 3 page), alors la régie n'affiche plus rien.
- J'ai aussi une régie B qui fonctionne de la même façon.

Mon besoin est d'afficher en priorité le code de la régie A et si il n'y a plus de campagne à délivrer, alors afficher la régie B.
Le problème, c'est que mon seul moyen de savoir que la régie A n'a plus rien à délivrer, c'est de regarder ce que retourne le code.

SITUATION ACTUELLE :
Ma régie A est au CPM et la B au click.

Ce que je faisais, c'est que j'avais créé 3 blocs div.
Bloc 1 : à l'endroit où doit s'afficher la pub
Bloc 2 : contenant la pub de la régie A, mais avec le bloc à "display:none"
Bloc 3 : contenant la pub de la régie B, mais avec le bloc à "display:none"

Alors au moment de l'affichage, je testais le contenu du bloc 2.
Si il était non vide alors je modifié le contenu du bloc 1 avec celui du bloc 2.
sinon, je modifais le contenu du bloc 1 avec celui du bloc 3.

La conséquence, c'était que les 2 codes étaient toujours présents sur la page, mais ne s'affichait réellement au bon emplacement que celui que je voulais.

Pour cela, j'utilisais l'id des bloc et les attributs innerHTML

Mais cette situation actuelle n'est valable que :
- si on utilise pas d'outils de gestion publicitaire
- si la regie B n'est pas au CPM aussi, car sinon c'est assimilable à de la fraude, car le code est affiché, la baniere est affichée, mais masquée.

SITUATION FUTURE :

- Je ne peux plus me permettre d'avoir les 2 codes des 2 regies affichés (cachés) en même temps sur la page.

- Je vais utiliser un logiciel de gestion publicitaire.

Donc maintenant, je vais mettre directement le code de l'utilitaire de gestion publicitaire dans le Bloc 1 (celui où doit se trouver la pub au final)

Ce code permettra d'afficher la campagne de la regie A.

Mais si au final l'affichage est vide. Alors je veux que sois affiché et exécuté le code de mon outils de gestion publicitaire qui affichera la régie B

Je pense que AJAX est la techno qu'il faut pour ca, mais je vois pas du tout comment faire.

En gros, c'est un peut comme avant, sauf que au lieu de recopier le contenu du bloc 3 dans le Bloc 1, je veux que le contenu du Bloc 1 se rafraichissent en faisant une requete vers le serveur qui le fournira le contenu

Pour info, le contenu est lui même du javascript.
Sera t'il exécuté ?

N'hésitez pas à poser des question. Me dire si je suis pas clair, ...

Je vous remercie par avance.
IU
06/09/2008, 20h09
darrylsite

Salut
Je crois que ajax peut bien faire l' affaire. Je ne vois pas beaucoup de difference avec ce que tu faisais bien avant. Seulement là, il faut attendre que la page se charge completement pour ensuite verifier le contenu de la div qui reçois la pub. Si elle est vide alors tu charge avec ajax la pub de B.

Soit, tu crée un div vide. Et lors du chargement de la page (body onload), tu charge avec ajax la pub de la regie A. Si le resultat xhr.responseText est une chaine vide, tu charge maintenant la pub de la regie B.

Je me pencherais plus sur la deuxieme solution, si je devais le faire. Et je crois que le codage ne sera pas difficile.
06/09/2008, 20h30
rgesnot
Tout d'abord je te remercie pour ta réponse.

Question :

Si mon code des regies est

Régie 1

Code:

<script src="http://www.regie1.com/pub1.js" /></script>

Régie 2

Code:

<script src="http://www.regie2.com/pub2.js" /></script>

Div devant afficher la pub
Code:

1 2 3 <div id="toto"> <script src="http://www.regie1.com/pub1.js" /></script> </div>
Il me suffit de vérifier si dans le div toto le résultat est vide.
Ensuite, il me faut charger avec une fonction open un fichier texte qui contient le code de la régie2

Est ce bien ca ?

Puis faire un truc du genre :

Code:

divtoto.innerHTML = xhr.responseText

Mais alors, à quel moment le javascript de la régie 2 sera interprété ?

Merci par avance.

Supposons que tu as deux page php :

Code:

1
2
3
 
// regiea.php
<script src="http://www.regie1.com/pub1.js" /></script>

Code:

1
2
3
 
//regieb.php
<script src="http://www.regie2.com/pub1.js" /></script>

la page principale sera :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<html>
<head>
<script>
var xhr = null;
var fin=false;
// fin indique si regieb a ete chargée
 
// Fonction de creation de l'objet XMLHttpRequest function getXhr()
 {
  if(window.XMLHttpRequest) xhr = new XMLHttpRequest(); 
  else if(window.ActiveXObject)
   {  
    try
     {
      xhr = new ActiveXObject("Msxml2.XMLHTTP");
     }
    catch (e)
     {
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
     }
   }
  else 
   { 
    alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest, veuillez le mettre à jour"); 
    xhr = false; 
   } 
 }

// fonction qui charge le contenu dans le div

function ajaxfunc(regie)
 {
  getXhr();
  xhr.onreadystatechange = function()
   {
    if(xhr.readyState == 4 && xhr.status == 200)
     {
            document.getElementById('toto').innerHTML = xhr.responseText;
            // ici...
            if (document.getElementById('toto').innerHTML=="")
              {
                if (!fin)
                 {
                   ajaxfunc("regieb.php");
                   fin=true;
                 }
              }
     }
   }
  xhr.open("POST",regie,true);
  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  xhr.send("");
 }
</script>
</head>
<body onLoad="ajaxfunc('regiea.php')">
<div id="toto"></div>
</body>
</html>

07/09/2008, 00h01
rgesnot

C'est super gentils pour le code.

Par contre peux tu me dire à quel moment est exécuté / interprété le code javascript de la regieA ?

Est ce au moment du open ?

Où est ce au moment de la recopie dans le div par la "fonction" innerHTML ?

Je demande ca, car je veux savoir si quand la régie regarde l'url où est lancée sa fonction, si elle va voir que son code est exécuté à partir de :
www.mondomaine.com (en supposant qu'au départ on est la homepage)
ou
www.mondomaine.com/regiea.php

En gros,
xhr.responseText contient t'il le code exact de regiea.php
ou il contient déjà le résultat de l'éxécution du code javascript contenu dans regiea.php ?

Merci par avance.
07/09/2008, 12h47
darrylsite

D' abord, il y' avais une erreur dans le code, je viens de le modifier (== au lieu de =).

Citation:

xhr.responseText contient t'il le code exact de regiea.php
ou il contient déjà le résultat de l'éxécution du code javascript contenu dans regiea.php ?

Comme il s' agit de javaScript, il sera toujours executé sur le poste client. Je vois qu' il y a un autre probleme. C' est que xhr.responseText ne sera pas vide car il contiendra le code du script. J' avais ecris ce code car tu as ecris :

Citation:

Alors au moment de l'affichage, je testais le contenu du bloc 2.
Si il était non vide alors je modifié le contenu du bloc 1 avec celui du bloc 2.
sinon, je modifais le contenu du bloc 1 avec celui du bloc 3.

J' ai donc supposé que la xhr.responseText est le resultat du script.

Pour le dernier point, on indiquera bien le homepage à la regie consernée
07/09/2008, 19h23
rgesnot
Encore merci pour tes réponses.

En fait, en voulant faire simple, je t'ai induit en erreur.

La regie A, quand elle à plus d'annonce à faire passer, elle retourne un texte invisible : "empty" que je recherche avec la fonction indexof

Sinon, pour en revenir à mon problème pour que le referer soit bien le bon

Donc si je comprends bien, je code javascript de la régie sera exécuté juste après la copie :
Code:

1 2 3 document.getElementById('toto').innerHTML = xhr.responseText; // ici... if (document.getElementById('toto').innerHTML=="")
Comme tu me l'avais indiqué au début (j'avais pas compris)

Et donc bien sur la bonne page le referer devrait donc être le bon
08/09/2008, 16h14
darrylsite
Voila qui simplifie le probleme.
Tu n' aura qu' à changer la condition
Code:

1 2 if (document.getElementById('toto').innerHTML=="")
par le code qui cherche le "empty" par la fonction indexOf. Si les conditions ne sont pas remplies tu appelle ensuite ajaxfunc("regieb.php");

pour ce qui du code de la regie, il sera executé un fois l' affectation suivante faite :
Code:

1 2 document.getElementById('toto').innerHTML = xhr.responseText
.
08/09/2008, 20h50
rgesnot

merci pour cette aide super efficace !

A bientot