jQuery.getJSON() chargement infini

**remyli** · 27/11/2009, 11h08

Bonjour,

J'ai un problème avec des requêtes ajax ( jQuery.getJSON() )

Situation :

1) Mon programme commence par définir un objet JSON appelé moteur (construit en php)
2) Je définit ensuite un classe Moteur.
3) enfin j'initialise mon Moteur une foi que ma page html est chargée.

Code :

L'objet JSON 'moteur'

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
var moteur={"moteurs":[
  {"nom":"CToutVert","url":"CToutVert\/lat\/47.12\/long\/-2.1\/dist\/50\/debut\/1275861600\/fin\/1276034400"},
  {"nom":"CPasRouge","url":"cpasrouge\/ci\/14785\/geo\/44646546546464\/date\/14-06-2010,17-06-2010"},
  {"nom":"CPasRouge","url":"cpasrouge\/ci\/14785\/geo\/44646546546464\/date\/14-06-2010,17-06-2010"},
  {"nom":"momo","url":"momo"}]}

Ma Classe 'Moteur'

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function Moteur(moteur)
{
    this.pros = [];
    this.moteur = moteur;
};
Moteur.prototype.init = function()
{
        for(key in this.moteur.moteurs)
        {
            var unMoteur = this.moteur.moteurs[key];
            var url = unMoteur.url;
            alert("call : "+ url);
 
            jQuery.getJSON(  url, {'url':url}, function (data, textStatus) {
                alert(this.url +'['+textStatus+']<br>'+ data);
            })
        }
    }
};

Instanciée et initialisé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
$(function(){
    if(moteur)
    {
        var mm = new Moteur(moteur);
        mm.init();
    }
});

Exécution :
A l'exécution Mon Moteur mm est bien crée.
L'appel à la fonction init charge bien le moteur JSON.
La liste des moteurs et parcourue et les url sont bien appelées

Problème :
Dans ma console firebug je voie bien les différents appels en cours d'exécution. mais leur exécution ne se fini pas ...

http://sites.google.com/site/mpimage...rgement-infini

Alors que si j'appel ces url directement avec mon navigateur elle ma renvoie correctement leur résultats en json.

Merci pour votre aide

**clemaez** · 27/11/2009, 13h23

Bonjour,

Je ne vois pas de soucis du côté de la syntaxe javascript, pourrais-tu montrer le code de dev.php ?

Ca pourrait me permettre de faire des test.

**danielhagnoul** · 27/11/2009, 13h35

Bonjour.

J'ai repris le code en mettant le code JSON moteur dans le fichier moteur.js.

Contenu du fichier moteur.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
[
    {
        "nom":"CToutVert",
        "url":"CToutVert\/lat\/47.12\/long\/-2.1\/dist\/50\/debut\/1275861600\/fin\/1276034400"
    },
    {
        "nom":"CPasRouge",
        "url":"cpasrouge\/ci\/14785\/geo\/44646546546464\/date\/14-06-2010,17-06-2010"
    },
    {
        "nom":"CPasRouge",
        "url":"cpasrouge\/ci\/14785\/geo\/44646546546464\/date\/14-06-2010,17-06-2010"
    },
    {
        "nom":"momo",
        "url":"momo"
    }
]

Ce qui simplifie le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<style type="text/css">
		body {
			background-color:#696969;
			color:#000000;
			font-family:Arial, Helvetica, sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:"Times New Roman", Times, serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}
	</style>
	<script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
	<script type="text/javascript">
 
		function Moteur(moteur){
			this.pros = [];
 
			this.init(moteur);
		}
 
		Moteur.prototype.init = function(moteur){
			for(key in moteur){				
				var unMoteur = moteur[key][0];
				var url = moteur[key][1];
 
				$("#conteneur").append("<p>unMoteur = " + unMoteur + ", <br/>url = " + url + "</p>");
 
				/*
				$.getJSON( url, {'url':url}, function (data, textStatus){
					alert(this.url +'['+textStatus+']<br>'+ data);
				});
				*/
			}
		}
 
		$(document).ready(function(){
 
			$.getJSON("moteur.js", function(json) {				
				var moteur = [];
 
				$.each(json, function(i,item){
					moteur.push([item.nom, item.url]);
				});
 
				var mm = new Moteur(moteur);
			});
		});
 	</script>
</head>
<body>
	<div id="conteneur"></div>
</body>
</html>

**remyli** · 27/11/2009, 14h38

Voici par exemple le code php du moteur momo :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
    function executeMomo()
    {
        $pros = array();
        $erreurs = array();
 
        $pro = array();
        $pro['nom'] = 'nom';
        $pro['description'] = 'description';
        $pro['image'] = 'image';
        $pro['produits'] = array();
 
        $produit = array();
        $produit['nom'] = 'nomProduit';
        $produit['disponibilites'] = array();
        $disponibilite = array();
        $disponibilite['prix'] = 10;
        $disponibilite['moteur'] = 'MoMo';
        $produit['disponibilites'][] = $disponibilite;
        $pro['produits'][] = $produit;
 
        $produit['disponibilites'][] = $disponibilite;
        $produit = array();
        $produit['nom'] = 'nomProduit2';
        $produit['disponibilites'] = array();
        $disponibilite = array();
        $disponibilite['prix'] = 15;
        $disponibilite['moteur'] = 'MoMo';
        $produit['disponibilites'][] = $disponibilite;
        $pro['produits'][] = $produit;
 
        $pros[] = $pro;
        $responce = array('pros'=>$pros,'erreurs'=>$erreurs);
        echo json_encode($responce);
 
        die();
    }

C'est le moteur de test qui renvoie une réponse statique ....

Coté php j'utilise Symfony 1.0
donc la function executeMomo() est appelé par l'url moteur/momo
Je précise les entête de sortie dans le fichier view.yml du module moteur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
all:
  has_layout:   off #pour préciser qu il ne doit pas y avoir de template layout
  http_metas:
    content-type: text/json

....
Je me demande si le die() ne renvoie pas un code erreur style "Processus terminé violemment.."

**remyli** · 27/11/2009, 14h59

ok je pense qu'il y avais un problème coté serveur.

Le fait de faire un die empêche symfony de finir son travail et dont d'envoyer ses en-têtes.

Maintenant mon code php renvoie bien du json.

Détail des en-tête de la requête et de la réponse.

Réponse

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
Date   		Fri, 27 Nov 2009 13:47:50 GMT
Server		Apache/2.2.12 (Ubuntu)
X-Powered-By	PHP/5.2.10-2ubuntu6.3
Expires		Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control	no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Pragma		no-cache
Content-Length	27
Connection		close
Content-Type	application/json; charset=utf-8

Requête

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
Host	localhost
User-Agent	Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.1.5) Gecko/20091109 Ubuntu/9.10 (karmic) Firefox/3.5.5 GTB5
Accept			application/json, text/javascript, */*
Accept-Language		fr,fr-fr;q=0.8,en-us;q=0.5,en;q=0.3
Accept-Encoding		gzip,deflate
Accept-Charset		ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive			300
Connection			keep-alive
X-Requested-With	XMLHttpRequest
Referer			http://localhost/maplage-dev/trunk/public_html/dev.php/moteur/moteur

Quand j'interroge directement un des moteurs dans mon navigateur, ce dernier me propose de télécharger le fichier json.

Par contre ça ne marche toujours pas comme je le souhaite.
J'ai maintenant 3 moteurs qui fonctionnent (dons momo) mais les deux derniers restes bloqué. Notament CToutVert qui est pour le moment le seul à être réellement implémenté. (Sa durée de traitement est de l'ordre des 5 secondes.)

**remyli** · 27/11/2009, 15h37

Le problème viens donc du moteur CToutVert.
Quand je met tout autres sauf lui ça marche .

Le moteur CToutVert renvoie lui aussi du json sauf qu'il va chercher ses données chez des partenaires via SOAP.

Voici un détail des en-tête quand je l'appel depuis mon navigateur :

en-tête Requête

Host: localhost
User-Agent: Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.1.5) Gecko/20091109 Ubuntu/9.10 (karmic) Firefox/3.5.5 GTB5
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: fr,fr-fr;q=0.8,en-us;q=0.5,en;q=0.3
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Cookie: sfRemember=a889c831b63d1c9386ed9d21b1c942cc; maplage_admin=1a671adcf902dd77ac60b54b45755ec7; maplage=2aa8316b59a339b754e9072b14067780

en-tête Reponse

Date: Fri, 27 Nov 2009 14:20:33 GMT
Server: Apache/2.2.12 (Ubuntu)
X-Powered-By: PHP/5.2.10-2ubuntu6.3
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Pragma: no-cache
Connection: close
Content-Type: application/json

Et un extré de ma réponse

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
{
      pros: [
            {
                 nom: "CAMPING DES ABERS"
                  image: [
                       "http://www.foo.net/photos/2418/info/0/empl B.jpg"
                       "http://www.foo.net/photos/2418/info/0/empl F-J.jpg"
                       http://www.foo.net/photos/2418/info/0/DH000083.JPG
                       http://www.foo.net/photos/2418/info/0/2007_07_2.JPG
                       http://www.foo.net/photos/2418/info/0/IMG_1626.JPG
                  ]
                  produits: [
                        {
                              disponibilites: [
                                    {
                                        + prix: null
                                    }
                              ]
                        }
                  ]
            }
            {
                  nom: "L'Orée du Bois"
                  image: [
                       http://www.foo.net/photos/1833/info/0/1.jpg
                       http://www.foo.net/photos/1833/info/0/2.jpg
                       http://www.foo.net/photos/1833/info/0/3.jpg
                       http://www.foo.net/photos/1833/info/0/DSC00266.JPG
                       http://www.foo.net/photos/1833/info/0/DSC00317.JPG
                  ]
                  produits: [
                        {
                              disponibilites: [
                                    {
                                         prix: "53"
                                    }
                              ]
                        }
                  ]
            },
            {
                 nom: "F4N Euronat"
                 image: [ ]
                  produits: [
                        {
                              disponibilites: [
 
                                    {
                                         prix: "194"
                                    }
                              ]
                        }
                  ]
            }
      ]
    erreurs: [ ]
}

Une partie de mon code php aussi

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
ob_start();
// Pleins d'opérations        
$responce = array('pros'=>$pros,'erreurs'=>array());
$this->json = json_encode($responce);
$this->setTemplate('json');
ob_end_clean();

Quelques question plus spécifiques à JQuery :
- lorsque je lance plusieurs requêtes ajax simultanés; est ce que un problème dans une des requêtes peut empêcher le fonctionnement des autres ?

**remyli** · 27/11/2009, 16h24

J'ai pas bien compris cette histoire de "urldatacallback"

http://docs.jquery.com/Ajax/jQuery.g...rldatacallback

The callback takes the form "example.com?callback=?". jQuery automatically replaces the '?' with a random method name that doesn't clash with the global scope. You do not have to specify the method name yourself.

**clemaez** · 27/11/2009, 17h43

Envoyé par remyli

en-tête Reponse
Et un extré de ma réponse

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
{
      "pros": [
            {
                "nom": "CAMPING DES ABERS",
                "image": [
                       "http://www.foo.net/photos/2418/info/0/empl B.jpg",
                       "http://www.foo.net/photos/2418/info/0/empl F-J.jpg",
                       "http://www.foo.net/photos/2418/info/0/DH000083.JPG",
                       "http://www.foo.net/photos/2418/info/0/2007_07_2.JPG",
                       "http://www.foo.net/photos/2418/info/0/IMG_1626.JPG"
                  ],
                "produits": [
                        {
                              "disponibilites": [
                                    {
                                        + prix: null
                                    }
                              ]
                        }
                  ]
            }
            {
                 "nom": "L'Orée du Bois",
                  "image": [
                       "http://www.foo.net/photos/1833/info/0/1.jpg,"
                       "http://www.foo.net/photos/1833/info/0/2.jpg,"
                       "http://www.foo.net/photos/1833/info/0/3.jpg,"
                       "http://www.foo.net/photos/1833/info/0/DSC00266.JPG,"
                       "http://www.foo.net/photos/1833/info/0/DSC00317.JPG"
                  ]
                  "produits": [
                        {
                              "disponibilites": [
                                    {
                                         "prix": "53"
                                    }
                              ]
                        }
                  ]
            },
            {
                 "nom": "F4N Euronat"
                 "image": [ ]
                  "produits": [
                        {
                              "disponibilites": [
 
                                    {
                                         "prix": "194"
                                    }
                              ]
                        }
                  ]
            }
      ]
    "erreurs": [ ]
}

La réponse JSON contient beaucoup d'erreur, il manque des virgules et des guillemets presque partout.

Je les ai rajouté dans le code ci-dessus mais j'en ai surement oublié à toi de revérifier.

Il y a aussi un + prix: null qui me parait bizarre à cause du + ... mais je ne connais pas le flux que tu dois normalement recevoir donc c'est p-t être normal pour toi.

**remyli** · 30/11/2009, 09h16

Bonjour,

En fait le JSON que j'ai affiché viens d'un plugin de firefox qui permet d'afficher du JSON dans le navigateur est qui permet de fermer les éléments pour mieux lire.. Mais il rajoute des caractères parasites. C'est moi qui ai mal nettoyé.

Quoi qu'il en soit mon JSON est généré par la fonction json_encode( ) de php...

**remyli** · 30/11/2009, 16h59

Bonjour,

Bon j'ai pas mal simplifié mon code et je commence à isoler un peu mieux le problème.

Pour le moment je tourne autour du paramètre async: true de jQuery.ajax()
Si la variable est à false. Les traitements seront synchrone (Les uns après les autres et la navigateur et bloqué pendant l'exécution... Mais au moins mes résultats sont bons !)

Si je met la variable à true (valeur par défaut) alors il suffit que un des appels rencontre un problème pour que tous les autres plantent... Et le plus embêtant et que je n'arrive pas à savoir pourquoi ça plante. (Pas de message d'erreur) Et que ces plantages sont "inopinés" (pas toujours le même appel qui plante)

exemple dans mon div de log:

OK
http://localhost/dev/trunk/public_ht...commune/Pornic
[object Object]
({pros:[], erreurs:[]})
[object Object]

ERROR
http://localhost/dev/trunk/public_ht...Fin/1276034400
[object Object]
{}
[object XMLHttpRequest]

ERROR
.....

Pourquoi ces plantages
Comment obtenir un message d'erreur
Quelles différences entre le mode synchrone et asynchrone peuvent expliquer ces comportements
Comment faire en sorte que mes différentes requêtes soit suffisamment indépendante pour ne pas planter si une autre rencontre un problème

Mon code Javascrit :
Pour ceux qui suivent depuis le début :

J'ai abandonné le jQuery.getJSON() au profit de jQuery.ajax()
J'ai supprimer la partie de chargement dynamique des moteurs pour les mettre ne dure afin d'alléger mon code source.
Le fait que mon code marche en mode synchrone me fait pensé que le problème ne viens pas du serveur et de la génération du JSON

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
function Moteur(moteur){};
Moteur.prototype.init3 = function()
{
    url = "http://localhost/dev/trunk/public_html/dev.php/moteur/CEnOr/dateDebut/1275861600/dateFin/1276034400/commune/Pornic";
    Moteur.log("call :\n"+ url);
    this.call(url);
    url = "http://localhost/dev/trunk/public_html/dev.php/moteur/CPresqueNoir/ci/44131/dateDebut/1275861600/dateFin/1276034400";
    Moteur.log("call :\n"+ url);
    this.call(url);
    url = "http://localhost/dev/trunk/public_html/dev.php/moteur/CToutVert/lat/47.12/long/-2.1/dist/50/debut/1275861600/fin/1276034400";
    Moteur.log("call :\n"+ url);
    this.call(url);
    url = "http://localhost/dev/trunk/public_html/dev.php/moteur/CPasRouge/ci/14785/geo/44646546546464/date/14-06-2010,17-06-2010";
    Moteur.log("call :\n"+ url);
    this.call(url);
    url = "http://localhost/dev/trunk/public_html/dev.php/moteur/CPasRouge/ci/14244/geo/44646546546464/date/14-06-2010,17-06-2010";
    Moteur.log("call :\n"+ url);
    this.call(url);
    url = "http://localhost/dev/trunk/public_html/dev.php/moteur/CToutBlanc";
    Moteur.log("call :\n"+ url);
    this.call(url);
};
Moteur.prototype.call = function(url)
{
    try{
        jQuery.ajax({
            dataType: 'json',
            type: 'post',
            url: url,
            async: true,
            success: function(data)
            {
                Moteur.log("OK \n"+this.url+"\n"+this+"\n"+data.toSource()+"\n"+data);
            },
            error: function(xhr)
            {
                Moteur.log("ERROR \n"+this.url+"\n"+this+"\n"+xhr.responseText+"\n"+xhr.toSource()+"\n"+xhr);
            }
        });
    }
    catch(e)
    {
        Moteur.log("EXCEPTION : "+e)
    }
};
Moteur.log = function(msg)
{
    $("#moteur_log").append("<div><pre>"+msg+"</pre></div>");
};
 
jQuery(function(){
        var mm = new Moteur();
        mm.init3();
});

Mes script php renvoient une réponse en JSON type

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

{"pros":[],"erreurs":[]}

**remyli** · 01/12/2009, 10h53

Ok pour le moment je vais me contenter du mode synchrone...

Je bloque maintenant sur le traitement de mes données... (Décidément JavaScript c'est pas mon truc :'( )

Mon but ici et d'utiliser une fonction de mon objet dans la fonction de callback de jQuery.ajax()

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
// mon objet
function Moteur(){};
 
// La fonction que je veux pouvoir utiliser 
Moteur.prototype.add = function(data)
{
    alert("add()");
};
 
 
Moteur.prototype.call = function()
{
    try{
        jQuery.ajax({
            url: http://www.monSite.com,
            success: function(data)
            {
                this.add(data); 
                // EXCEPTION : TypeError: this.add is not a function  
                // Évidement puise que this est ici l'objet paramètre passé à la fonction  jQuery.ajax()
            }
        });
    }
    catch(e)
    {
        Moteur.log("EXCEPTION : "+e)
    }
};

J'ai bien eu l'envie de faire ça mais ça ne marche pas.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
jQuery.ajax({
      url: http://www.monSite.com,
      success: this.addPros(data)
}

**remyli** · 03/12/2009, 12h07

J'ai trouvé une solution à mon petit problème :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
//Je déclare un variable pour mon Moteur (comme ça il a un nom)
var mm;
//J'instancie mon objet
mm = new Moteur(moteur);
//Dans ma fonction de callback je peux utiliser mon objet
jQuery.ajax({
            url: url,
            success: function(data)
            {
                  mm.add(data);
            }
});

jQuery.getJSON() chargement infini

jQuery

Discussions similaires

Partager

Partager