Explication du processus de requête ajax et de la méthode de requête (exemple de code)

Ce que cet article vous apporte, c'est une explication (exemple de code) sur le processus de requête ajax et la méthode de requête. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Le nom complet d'ajax est Asynchronous JavaScript et XML, où Asynchrone signifie asynchrone, ce qui est différent de la méthode synchrone utilisée dans le développement Web traditionnel. D'après les connaissances de l'éditeur du mur, ajax existe depuis longtemps, mais il n'était pas utilisé à l'époque. Plus tard, Google l'a utilisé sur Google Maps. Les gens l'ont trouvé très pratique à utiliser et la page n'en avait pas besoin. à rafraîchir et l'expérience utilisateur était très bonne (le site Web à cette époque n'avait aucune expérience utilisateur ^_^)

principe ajax

XMLHttpRequest est le mécanisme de base d'ajax Il a été introduit pour la première fois dans IE5 et est une technologie qui prend en charge les requêtes asynchrones. Pour faire simple, javascript peut envoyer des requêtes au serveur et traiter les réponses en temps opportun sans bloquer l'utilisateur, obtenant ainsi l'effet d'aucune actualisation de la page

var xhr = new XMLHttpRequest()
//IE浏览器使用var xhr = new ActiveXObject
xhr.open('get', url, true)
xhr.send(null)
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
        if (xhr.status == 200) {
            success(xhr.responseText)
        } else {
            fail && fail(xhr.status)
        }
    }
}

xhr.open()

Le troisième paramètre : true/fasle. La valeur par défaut est true
false. Cela signifie attendre que les données soient renvoyées avant de continuer. Si les données ne sont pas obtenues, elles y resteront jusqu'à ce que les données soient renvoyées. les données sont obtenues.
Vrai signifie ne pas attendre et revenir directement. C'est ce qu'on appelle l'acquisition de données asynchrone !

xhr.send

Les données à transmettre acceptent un type chaîne

xhr.onreadystatechange

Le gestionnaire d'événements qui sera déclenché à chaque changement d'état

xhr.readyState a les états suivants

0 La requête n'est pas initialisée et la méthode open n'a pas été appelé

1 La connexion au serveur a été établie, la méthode open a été appelée et la méthode d'envoi n'a pas encore été appelée

2 La demande a été reçue, c'est-à-dire que le les informations d'en-tête ont été reçues

3 La demande est en cours de traitement, c'est-à-dire reçue Le corps de la réponse est atteint À ce moment, comme la réponse et l'en-tête http sont incomplets, une erreur se produira lors de l'obtention d'une partie du. données via ResponseBody et ResponseText.

4 La demande a été complétée et les données ont été reçues à ce moment-là, elles peuvent être obtenues via ResponseXml et ResponseText. xhr.status Statut HTTP commun

0** : Non initialisé

jQuery.ajax

$.ajax({
    url: '',
    Type: '',
    data: '',
    async:true,
    dataType: '',
    beforeSend: function(xhr) {
      xhr.setRequestHeader("Access-Toke");
    },
    success: function (data) {
        fn1()
    },
    error: function (err) {
       error && error(err) 
    }
})
fn2()

Si la méthode success dans $.ajax obtient un rappel réussi, jQuery détermine les états suivants. Il y a le code suivant dans le code source (environ la ligne 8193)

304---Le dicton habituel est. que le navigateur a toujours un cache et que le serveur indique au client que le document original mis en cache peut continuer à être utilisé

isSuccess = status >= 200 && status < 300 || status === 304

valeur async-booléenne

La valeur du paramètre par défaut d'async est vrai. Dans ce cas, il s'agit d'une méthode asynchrone, c'est-à-dire que lorsque ajax envoie une requête, en attendant le retour du serveur, la réception continuera à exécuter le script après le blocage ajax jusqu'à ce que le serveur renvoie le résultat correct. Le succès sera exécuté, ce qui signifie que deux threads sont exécutés à ce moment, un thread après le bloc ajax envoie la requête et le script après le bloc ajax (un autre thread)

dataType--String

dataType peut spécifier les valeurs suivantes

beforeSend--Fonction

Une fonction qui peut modifier l'objet XMLHttpRequest avant d'envoyer la requête, comme l'ajout d'un en-tête HTTP personnalisé. Si false est renvoyé dans beforeSend, cette requête ajax peut être annulée. L'objet XMLHttpRequest est le seul paramètre

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!