Comment implémenter Ajax en js natif

De manière générale, tout le monde est peut-être habitué à utiliser la méthode Ajax fournie par JQuery, mais comment implémenter la méthode Ajax en utilisant du js natif ? Cet article partage principalement avec vous la méthode d'implémentation d'Ajax en js natif, j'espère qu'il pourra vous aider.

Méthodes Ajax fournies par JQuery :

$.ajax({
    url: ,
    type: '',
    dataType: '',
    data: {
          
    },
    success: function(){
         
    },
    error: function(){
          
    }
 })

Implémentation js native des méthodes Ajax :

var Ajax={
    get: function(url, fn) {        var xhr = new XMLHttpRequest();  // XMLHttpRequest对象用于在后台与服务器交换数据          
        xhr.open('GET', url, true);
        xhr.onreadystatechange = function() {            if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) { // readyState == 4说明请求已完成
                fn.call(this, xhr.responseText);  //从服务器获得数据            }
        };
        xhr.send();
    },
    post: function (url, data, fn) {         // datat应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式
        var xhr = new XMLHttpRequest();
        xhr.open("POST", url, true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  // 添加http头，发送信息至服务器时内容编码类型
        xhr.onreadystatechange = function() {            if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {  // 304未修改
                fn.call(this, xhr.responseText);
            }
        };
        xhr.send(data);
    }
}

Notes :

1. , url, async) nécessite trois paramètres :

Méthode : La méthode utilisée pour envoyer la requête (GET ou POST) par rapport à POST, GET est plus simple et plus rapide et peut être utilisée dans la plupart des cas. Cependant, veuillez utiliser les requêtes POST dans les situations suivantes :

• Les fichiers cache (mise à jour de fichiers ou de bases de données sur le serveur) ne peuvent pas être utilisés

• Envoyer de gros montants de données au serveur (POST n'a pas de limite de données)

• Lors de l'envoi d'une entrée utilisateur contenant des caractères inconnus, POST est plus stable et fiable que GET

URL : Spécifie l'URL du script côté serveur (le fichier peut être n'importe quel type de fichier, tel que .txt et .xml, ou un fichier de script serveur, tel que .asp et .php (avant de renvoyer la réponse, cela peut être Exécuter des tâches sur le serveur));

async : Spécifie que la requête doit être traitée de manière asynchrone (true) ou de manière synchrone (false true est d'exécuter d'autres scripts en attendant la réponse du serveur), et traiter la réponse lorsque la réponse est prête ; false signifie attendre la réponse du serveur avant de l'exécuter.

2. La méthode send() peut envoyer la requête au serveur.

3. onreadystatechange : il existe une fonction qui traite la réponse du serveur à chaque fois que readyState change, la fonction onreadystatechange sera exécutée.

4. readyState : stocke les informations d'état de la réponse du serveur.

• 0 : La requête n'est pas initialisée (le proxy est créé, mais la méthode open() n'a pas été appelée)

• 1 : La connexion au serveur est établie (ouverte La méthode a été appelée)

• 2 : La requête a été reçue (la méthode d'envoi a été appelée, et l'en-tête et le statut sont disponibles)

• 3 : La demande est en cours de traitement (téléchargement, l'attribut réponseText contient déjà des données)

• 4 : La demande a été complétée et la réponse est prêt (l'opération de téléchargement est terminée)

5.responseText : obtenez les données de réponse sous forme de chaîne.

6. setRequestHeader() : Lorsque POST transmet des données, il est utilisé pour ajouter un en-tête HTTP, puis envoyer (données), faites attention au format des données lorsque GET envoie des informations, ajoutez simplement des paramètres directement à l'URL ; , tel que url?a =a1&b=b1.

Recommandations associées :

Exemple de code JS pour implémenter Ajax

JS natif pour implémenter des requêtes inter-domaines ajax et ajax

Méthode AngularJS pour implémenter la requête ajax

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!