XmlHttpRequest.responseText pendant le chargement (readyState==3) dans Chrome

Je suis en train de "streaming" (à partir du serveur vers le client) en Javascript ajax (par XmlHttpRequest (=xhr). Je suis en utilisant modifié handleResponse fonction décrite dans
Croix-navigateur de mise en œuvre de la "HTTP Streaming" (push) AJAX modèle

function handleResponse() {
if (http.readyState != 4 && http.readyState != 3)
    return;
if (http.readyState == 3 && http.status != 200)
    return;
if (http.readyState == 4 && http.status != 200) {
    clearInterval(pollTimer);
    inProgress = false;
}
//In konqueror http.responseText is sometimes null here...
if (http.responseText === null)
    return;

while (prevDataLength != http.responseText.length) {
    if (http.readyState == 4  && prevDataLength == http.responseText.length)
        break;
    prevDataLength = http.responseText.length;
    var response = http.responseText.substring(nextLine);
    var lines = response.split('\n');
    nextLine = nextLine + response.lastIndexOf('\n') + 1;
    if (response[response.length-1] != '\n')
        lines.pop();

    for (var i = 0; i < lines.length; i++) {
        //...
    }
}

if (http.readyState == 4 && prevDataLength == http.responseText.length)
    clearInterval(pollTimer);

inProgress = false;
}

Avec un script php, qui nettoie-moi de données (sans ajax-il vraiment efface les données du navigateur, tout en progressant)

Je n'ai aucun problème sous Firefox, mais Google Chrome et IE me donner un vide responseText tout xhr.readyState est égal à 3. J'ai trouvé que le problème décrit dans l'Internet, mais il ne me donne pas la solution.

Savez-vous, comment faire pour passer par ce problème de mise en œuvre dans Chrome? (w3c dit, que responseText ne peut pas être NULL dans readyState==3 - Chrome appliqué cette règle, mais ne donne qu'une chaîne vide)

Et si vous ne savez pas, connaissez-vous une solution de travail dans certains produits? (opensource cadres, librararies etc.)

Merci beaucoup pour vos idées.

Edit:
La solution de contournement consiste en la création d'iframe, appeler le script iframe et vider les données ici et saisir des données en javascript à partir d'une iframe. Mais ce n'est pas la solution ajax. Je voudrais vraiment voir pure solution ajax.

Êtes-vous sûr que vous êtes à la fixation d'un "Content-Type", "text/plain" ou "application/x-javascript" lorsque vous démarrez votre réponse du serveur? Apparemment, les navigateurs Webkit insister sur cela, ou ils peuvent.
J'ai défini le type de contenu "application/x-www-form-urlencoded". J'ai essayé - comme vous l'avez dit - application/x-javascript, mais ce n'est pas de travail du tout.

InformationsquelleAutor Jaroslav Moravec | 2010-10-07

17

Chrome a un bug où il ne remplir xhr.responseText après un certain nombre d'octets a été reçu. Il y a 2 méthodes pour contourner ce problème,

Défini le type de contenu de la déclaration "application/octet-stream"

ou

Envoyer un prélude d'environ 2 ko à la préparation de la gestionnaire.

L'une de ces méthodes devrait faire chrome remplir le responseText champ lorsque readyState == 3.

IE7/8, d'autre part ne peut pas le faire, vous avez besoin de recourir à d'interrogation ou d'utiliser la croix de domaine truc avec XDomainRequest dans IE8, la MS
- Définir le type de Contenu ne fonctionne pas, 2k est trop gros, d'autres options ?
- type de contenu "application/octet-stream" ou "application/x-javascript" ne fonctionne pas pour Chrome, 2k signification des œuvres.
InformationsquelleAutor Andrew
3

Avez-vous envisagé d'utiliser Les WebSockets ou server-sent events?

La plupart des principaux navigateurs désormais en charge le protocole WebSocket, mais si votre site a besoin de travailler dans IE 9 ou plus, ou dans le Navigateur Android 4.3 ou plus, vous devez conserver le code qui utilise XMLHttpRequest comme une solution de repli.

La plupart de ces navigateurs également en charge une fonctionnalité appelée server-sent events, qui, contrairement à WebSockets, peut être mis en œuvre sur le serveur à l'aide d'un traditionnel démon HTTP et CGI/PHP script, mais fournit seulement un moyen de communication.

Voir aussi: Les WebSockets /Server-Sent events/EventSource
- Sweet avenir 🙂 Mais il est le dernier navigateur... >IE9 Websockets sera agréable, et mon objectif serait la plus incroyable Node.js 🙂
- Il pense que M. Moravec aurait des problèmes avec son FF3 trop, si il fait le choix de les web sockets maintenant. Selon l'article de Wikipedia sur le sujet, le support est en FF4, qui est en version bêta dès maintenant - alors, il faudra un certain temps avant que tout le monde a ça. Je n'ai pas de venir le tester moi-même encore, je suis un peu paresseux et ne sont pas la distribution de debs encore - pas juste cliquez sur & installer w/ autres mots.
InformationsquelleAutor PleaseStand

Étendre sur Andrew réponse, c'est la croix-navigateur solution je suis venu avec.

Fonctionne correctement dans 99% des navigateurs, à savoir IE ≥ 8, Chrome, Firefox, et Safari, l'envoi de différentiels des événements dès que des données sont reçues par le navigateur (mais voir les notes ci-dessous).

if (/MSIE [8-9]/.test(navigator.appVersion)) {
    var get = new XDomainRequest()
    get.onprogress = handleData
    get.onload = handleData
} else {
    var get = new XMLHttpRequest()
    get.onreadystatechange = handleData
}
get.open('get', '/example/url')
get.send()

function handleData() {
    if (get.readyState != null && (get.readyState < 3 || get.status != 200)) {
        return
    }
    //process incremental data found in get.responseText
}

IE 8-9 va commencer à peupler responseText après 2 ko de données, donc si c'est pas ok, vous devez envoyer un premier rembourrage de 2 ko.

Chrome besoins ou Content-Type: application/octet-stream.

InformationsquelleAutor Tobia

2

Eh bien, malheureusement, chaque partie de XmlHttpRequest (ou tout les standards du web) n'est pas entièrement mis en œuvre dans tous les navigateurs. Mais vous avez plusieurs autres options pour le Streaming HTTP:

Wikipédia: la technologie de Push

Wikipédia: la Comète (programmation)
Wikipédia: Les Web Sockets (expérimental, la faible prise en charge du navigateur)

J'ai vu dans votre commentaire que vous aimeriez qu'il soit pur, AJAX, mais je voudrais suggérer d'autres possibilités de solutions. Vous pouvez utiliser un JavaApplet si possible ou un Objet Flash. Pour le second point, vous n'aurez pas besoin d'un flashy et cher IDE, vous pouvez utiliser Haxe pour la création de Flash/SWF fichiers et vous vous sentirez bien à l'aise avec elle comme vous le savez JavaScript.

Ici est un Flash/Neko chat exemple que, probablement, peut être adoptée pour d'autres plates-formes et des usages ainsi.

Je vous souhaite la meilleur des chance.

InformationsquelleAutor Frank
1

essayez d'utiliser le responseStream/responseBody propriété dans l'IE. Je pensais faire la même chose une fois et a couru dans le même problème. Malheureusement, ni le w3c spécifications

http://www.w3.org/TR/XMLHttpRequest/#the-responsetext-attribute
- J'avais essayer, mais IE à la fin avec l'erreur (qui n'méthode ou le résultat est null)
InformationsquelleAutor Ravindra Sane
1

Comme je le comprends, prise partielle de texte disponible sur readyState 3 est un non-standard de firefox uniquement un comportement qui n'est tout simplement pas possible directement à imiter dans les autres navigateurs, ce que vous voulez faire à la place est de faire de multiples séquentielle des demandes de petits morceaux de données plutôt que d'une 'streaming' demande

InformationsquelleAutor tobyodavies

Cela a fonctionné pour moi pour Chrome, mais pas IE:

[test.php]:

<?php
Header('Content-type: text/plain');
while (1) {
    echo str_pad('test: '.mt_rand(1000,9999), 2048, ' ');
    flush();
    sleep(1);
}

[test.html]:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Stream test</title>
        <meta charset="UTF-8" />
        <script type="text/javascript">
            function xmlHttpRequest() {
                return (function (x,y,i) {
                    if (x) return new x();
                    for (i=0; i<y.length; y++) try { 
                    return new ActiveXObject(y[i]);
                    } catch (e) {}
                })(
                    window.XMLHttpRequest, 
                    ['Msxml2.XMLHTTP','Microsoft.XMLHTTP']
                );
            };
            function stream(url) {
                //Declare the variables we'll be using
                var xmlHttp = xmlHttpRequest();
                xmlHttp.open("GET", url, true);
                var len = 0;
                xmlHttp.onreadystatechange = function() {
                if (xmlHttp.status == 200 && xmlHttp.readyState >=3) {
                    var text = xmlHttp.responseText;
                    text = text.substr(len, text.length-len);
                    len = xmlHttp.responseText.length;
                    console.log(text);
                }
                }
                xmlHttp.send(null);
            }           
            stream('/test.php');
        </script>
    </head>
    <body>
    </body>
</html>

YMMV.

InformationsquelleAutor Fordi

1

Que Jaroslav Moravec dit, si vous définissez le type de contenu dans l'en-tête du flux de données pour l'application/x-javascript, il fonctionne dans Safari, Chrome et Firefox.

Je n'ai pas testé IE.

InformationsquelleAutor radio4fan
1

Réglage du type de contenu de la déclaration "application/octet-stream" comme suggéré par Andrew était une excellente solution.
De Plus, vous devez utiliser XDomainRequest sur IE.

Pour lire les données à mesure qu'ils arrivent, vous devez simplement utiliser une boucle infinie (qui s'arrête lorsque readystate = 4 ou XDomainRequest.onLoad a été appelé) avec un délai d'attente.

Voici comment j'allais le faire:
```
var i = 0;
var returnValue = function() {
    if (!finished) {
        setTimeout(returnValue, 100);
    }
    var resp = ajax.responseText;
    var newI = resp.lastIndexOf(";") + 1;
    if (newI > i) {
        var lines = resp.substring(i, newI).split(";");
        for (var x = 0; x < lines.length; x++) {
            eval(lines[x]);
        }
        i = newI;
    }
}
```
Remarque: certains disent que l'utilisation d'eval est risqué, je prétends que ce n'est pas où tout risque vraiment de.

InformationsquelleAutor Serge Profafilecebook
0

La URLyou sont la soumission de la demande - est-il partie de votre domaine?

Il coulld être à cause de la même la politique de l'origine.

Voir ce question et possible des moyens de la contourner (et ce l'article).
- eh bien, si tel est le cas, va-t-il être confronté à un problème w/ FF trop?
- oui. Vous êtes de droite. Mais avec le code je ne vois pas d'autres possibilités (à ma connaissance).
- Merci pour la réponse 🙂
InformationsquelleAutor Nivas
0

une fois j'ai eu ce problème à l'aide de safari (jamais testé avec chrome, peut-être il y avait le même problème (chrome/safari les deux utilisent le même rendu-moteur (autant que je sache) - ne sais pas à propos de la js-parties)). je n'ai jamais trouvé une solution pour contourner cela, mais parce que c'était une petite application dans l'ensemble de l'intranet, il n'était pas un gros problème pour pas en charge safari (ff a la valeur par défaut du navigateur de toute façon, et ff fonctionne).
- C'est tellement triste pour moi... j'ai mis en place "dégradation gracieuse", mais je veux vraiment savoir à certains solution de contournement, etc. Je suppose que l'utilisation du flash en tant que serveur/client de la couche de transport... La solution propre sans flash serait étonnant...
- Apple Safari et Google Chrome n'utilise le même moteur de rendu, Webkit, Mais je pense que c'est de loin l'similitudes aller. Google Chrome utilise sa propre marque nouvelle JavaScript-moteur nommé V8.
InformationsquelleAutor oezi

Vous devez vous connecter pour publier un commentaire.