[AJAX] Parser la réponse HTML d'une requête XHR

Version imprimable

26/11/2009, 02h31
tomlev

[AJAX] Parser la réponse HTML d'une requête XHR
Salut,

Désolé si c'est une question de noob, j'ai un niveau proche de zéro en Javascript et j'ai rien trouvé de probant sur Google et dans les tutos...

Je m'essaie au développement d'extensions pour Google Chrome, et je voudrais extraire des infos d'une page récupérée grâce à un XmlHttpRequest. Je récupère bien le HTML de la page, mais je n'arrive pas à accéder à son DOM.

J'ai bien testé avec DOMParser :
Code:

1 2 3 var parser = new DOMParser(); var doc = parser.parseFromString(req.responseText, "text/xml");
Mais pas moyen d'accéder au contenu... doc.getElementById ne renvoie pas l'élément que je cherche, alors que je sais qu'il est bien là ! et même doc.getElementsByTagName("body") me renvoie une liste vide...

Une petite idée de ce qu'il faut faire ?
26/11/2009, 10h45
E.Bzz

Salut,
la page que te retourne Ajax, ce n'est visiblement pas pour l'afficher ...

Pourquoi ne pas retourner uniquement les infos que tu cherches à extraire (avec JSON, par exemple si infos structurées) ? :koi:

EDIT : Visiblement, le DOMparser n'aime pas la soupe HTML ? :aie:

A+
26/11/2009, 11h40
tomlev

Citation:

Envoyé par E.Bzz

Pourquoi ne pas retourner uniquement les infos que tu cherches à extraire (avec JSON, par exemple si infos structurées) ? :koi:

Parce que c'est pas une page à moi, c'est une page d'un site existant dont je veux extraire une info...

Citation:

Envoyé par E.Bzz

EDIT : Visiblement, le DOMparser n'aime pas la soupe HTML ? :aie:

non :(
j'ai essayé de mettre "text/html" à la place de "text/xml", mais ça me renvoie null...
26/11/2009, 11h45
E.Bzz

Citation:

Envoyé par tomlev

j'ai essayé de mettre "text/html" à la place de "text/xml", mais ça me renvoie null...

Oui, car comme précisé dans le lien, ce n'est visiblement pas avec ce parser là que tu y arriveras (il ne sait pas faire) ...

Par contre, si la page n'est pas à toi (en fait : si elle n'est pas dans le même domaine que la page appelante), il devrait y avoir des problèmes de sécurité lors de l'accès ...
Tu as pu le gérer, ou le problème ne se posait pas ?

Parce que sinon, quelque soit le parseur, ça va bloquer :aie:

A+
26/11/2009, 11h51
tomlev

Citation:

Envoyé par E.Bzz

Par contre, si la page n'est pas à toi (en fait : si elle n'est pas dans le même domaine que la page appelante), il devrait y avoir des problèmes de sécurité lors de l'accès ...
Tu as pu le gérer, ou le problème ne se posait pas ?

Ben je récupère bien la source HTML...
En fait je pense que c'est parce que dans le manifeste de l'extension chrome, j'ai ajouté une permission pour le site en question
26/11/2009, 12h02
E.Bzz

D'après ce post là, ça semble assez mal barré :?

Dans la mesure où tu récupères bien ton code HTML, mais sous forme de chaîne de caractères (la soupe HTML de Mozilla :mrgreen: ), tu n'as pas moyen de t'en sortir en la traitement comme telle (une extraction de chaîne) ?

C'est sûr que c'est (infiniment) moins propre qu'un accès DOM, mais à défaut de grives ... :aie:

A+
26/11/2009, 15h55
tomlev

Oui, j'avais vu ce post, c'est ce qui m'avait poussé à chercher du côté de DOMParser...

Enfin bon, j'ai fini par trouver une solution, pas très propre mais ça marche ;)

En gros :
- je crée un div caché dans ma page
- je mets dedans (innerHTML) le responseText de mon XHR, je peux donc accéder aux éléments via DOM
- je récupère ce qui m'intéresse
- je supprime le DIV caché

Comme je disais, c'est pas très propre... c'est même super bourrin :aie:

Pour info, si ça intéresse quelqu'un à titre d'exemple, c'est pour une extension Google Chrome qui affiche le statut StackOverflow.com (réputation, badges, indicateur de nouveaux messages).

Voilà les fichiers de la première version (pour l'installation, voir ici)

manifest.json :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "name": "Stack Overflow status",
  "version": "1.0",
  "description": "Extension to show StackOverflow.com reputation, badges and new message flag.",
  "browser_action": {
    "default_icon": "stackoverflow.ico",
    "popup": "popup.html",
    "default_title": "Stack Overflow"
  },
  "permissions": [
    "http://stackoverflow.com/",
    "http://sstatic.net/"
  ]
}

popup.html :

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
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
89
90
91
92
93
94
95
96
<html>
<head>
<link rel="stylesheet" href="http://sstatic.net/so/all.css">
<script type="text/javascript" language="Javascript">
var xhr = new XMLHttpRequest();
 
window.onload = function() {
    xhr.open(
        "GET",
        "http://stackoverflow.com/",
        true);
    xhr.onload = extractStatus;
    xhr.send(null);
}
 
function extractStatus() {
 
    var content = "";
    var soDiv = document.getElementById("soDiv");
    soDiv.innerHTML = xhr.responseText;
    var hlinks = document.getElementById("hlinks");
    var nLinks = 0;
    var nSpans = 0;
    var loggedIn = -1;
    
    for(i = 0; i < hlinks.childNodes.length; i++) {
    
        var node = hlinks.childNodes[i];
        if (node.nodeType != 1)
            continue;
        
        if (node.nodeName == "A") {
            
            var href = node.getAttribute("href");
            
            if (nLinks == 0) {
                if (href.indexOf("/users/recent/") == 0) {
                    loggedIn = 1;
                }
                else {
                    loggedIn = 0;
                    break;
                }
            }
            
            if (nLinks >= 2)
                continue;
            
            href = "http://stackoverflow.com" + href;
            node.setAttribute("href", href);
            node.setAttribute("target", "_blank");
            content = content + node.outerHTML + " ";
 
            nLinks++;
        }
        else if (hlinks.childNodes[i].nodeName == "SPAN")
        {
            if (nSpans >= 4)
                continue;
            
            content = content + node.outerHTML;
            
            nSpans++;
        }
            
    }
    
    if (loggedIn <= 0)
        content = 'Not connected to Stack Overflow. <a href="http://stackoverflow.com/users/login" target="_blank">Login</a>';
 
    document.body.removeChild(soDiv);
    
    var header = document.createElement("div");
    header.setAttribute("id", "header");
    header.style.height="auto";
    
    var topbar = document.createElement("div");
    topbar.setAttribute("id", "topbar");
    topbar.style.width = "265px";
    
    var hlinks2 = document.createElement("div");
    hlinks2.setAttribute("id", "hlinks");
    hlinks2.innerHTML = content;
    hlinks2.style.margin = "0px";
    
    topbar.appendChild(hlinks2);
    header.appendChild(topbar);
    document.body.appendChild(header);
}
 
</script>
</head>
<body>
<div id="soDiv" style="visibility:hidden;background-color:#EEE"></div>
</body>
</html>

stackoverflow.ico :

http://sstatic.net/so/favicon.ico

PS: j'envisage une extension similaire pour le tableau de bord utilisateur de Developpez.com ;)

26/11/2009, 16h14
E.Bzz
Citation:

Envoyé par tomlev

PS: j'envisage une extension similaire pour le tableau de bord utilisateur de Developpez.com ;)

Excellent :ccool:

J'avais bien pensé à la solution du div, mais je ne te l'ai pas proposée à cause de nombreux problèmes potentiels :
- des id éventuellement dupliqués
- des balises (<META>, <head>, <body> etc.) qui vont se retrouver dans un div alors qu'elles n'ont rien à y faire
- des éventuels passage <script> qui risquent de poser problème
- ...
Mais c'était sans connaitre le contenu de ta page distante ...
Donc, si rien de tout ça ne pose soucis, tant mieux ;)

A+
26/11/2009, 18h38
tomlev

Effectivement c'est pas top... mais en l'occurrence ça ne pose pas vraiment de problème :

Citation:

Envoyé par E.Bzz

des id éventuellement dupliqués

La page est initialement vide (à part du script et une div vide)

Citation:

Envoyé par E.Bzz

des balises (<META>, <head>, <body> etc.) qui vont se retrouver dans un div alors qu'elles n'ont rien à y faire

apparemment ça dérange pas chrome... de toutes façons je supprime tout ça quand j'ai récupéré les infos qui m'intéresse

Citation:

Envoyé par E.Bzz

des éventuels passage <script> qui risquent de poser problème

effectivement, ça peut être plus gênant... il faut juste que ça n'interfère pas avec mes scripts à moi, mais là ça a l'air bon