web-dev-qa-db-fra.com

Peut-on remplacer xhr.onreadystatechange par xhr.onload pour AJAX appels?

Je dois prendre en charge uniquement les principaux navigateurs modernes (IE10 +, FF, Chrome, Safari).

Puis-je effectuer cette substitution car je veux simplifier ma base de code:

De:

xhr.onreadystatechange = function () {
    if (this.readyState === 4) {
        if (this.status === 200) {
            o.callback(xhr.responseText);
        } else {
            return false;
        }
    } else {
        return false;
    }
};

À:

xhr.onload = function (test) {
    o.callback(xhr.responseText);
};

Je ne pense pas que la documentation MDN soit claire à cet égard.

Clarification:

Je choisis de ne pas utiliser de cadre.

javascriptajaxxmlhttprequest
45
user1637281

peut-être que vous jetez un œil à celui-ci et au W3C: XMLHttpRequest c'est la même chose si votre navigateur prend en charge xhr.onload. Requiert XMLHttpRequest 2)

Vous pouvez également écrire une fonction d'emballage qui émule xhr.onload si elle n'est pas présente . (Je pense que vous devez remplacer XMLHttpRequest.prototype.onload = function(args){//calling onreadystatechanges somehow}). Si vous ne supportez que les navigateurs modernes utilisant xhr.onload, la meilleure solution consiste à utiliser un framework (comme jquery ou mootools qui fournit une fonctionnalité d'encapsulation pour cela.

15
mr.VVoo

Dans la documentation MDN, ils indiquent ce qui suit:

Événements

onreadystatechange en tant que propriété de l'objet xhr est pris en charge dans tous les les navigateurs.

Depuis lors, un certain nombre de gestionnaires d'événements supplémentaires ont été implémentés dans différents navigateurs (onload, onerror, onprogress, etc.). Ceux-ci sont pris en charge dans Firefox. En particulier, voir nsIXMLHttpRequestEventTarget et Utilisation de XMLHttpRequest.

Les navigateurs plus récents, y compris Firefox, prennent également en charge l’écoute du fichier Événements XMLHttpRequest via les API standard addEventListener en plus mettre en * propriétés à une fonction de gestionnaire.

Je pense donc que vous pouvez supposer que la méthode onreadystatechange est la voie à suivre et la charge onload est un ajout qui peut être utilisé si le navigateur le prend en charge. @ mr.VVoo La réponse est la bonne, s'en tenir à w3c en cas de doute.

13
Gert Cuykens

Vous pouvez nettoyer votre premier exemple en procédant de la sorte

xhr.onreadystatechange = function () {
    if (this.readyState === 4 && this.status === 200) {
        o.callback(xhr.responseText);
    } else {
        return false;
    }
};

Notez que vous voudrez probablement aussi vérifier onload avec this.status === 200 si vous faites quelque chose avec l'instruction else. Cependant, si vous recherchez des erreurs, il existe également onerror, dans lequel vous pouvez écrire quelque chose comme

xhr.onerror = function(){
    console.log('Error: Do something else...');
}
1
user126440

Depuis que le demandeur d'origine a déclaré "Je ne dois prendre en charge que les principaux navigateurs modernes (IE10 +, FF, Chrome, Safari)", il est évident que onload, onerror, etc. sont les moyens à utiliser. De plus, à compter d’aujourd’hui, onreadystatechange est à peu près obsolète, car vous n’allez évidemment pas prendre en charge un objet aussi ancien que celui-ci ne supporte que onreadystatechange.

Pour résumer, oubliez onreadystatechange.

1
Íhor Mé