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é

1** : Demande reçue, Poursuivre le traitement

2** : L'opération a réussi reçu, analysé et accepté

3** : Cette demande doit être traitée davantage

4** : La demande contient une erreur de syntaxe ou ne peut pas être complétée

5* * : Le serveur n'a pas réussi à exécuter une requête entièrement valide

jQuery.ajax

success- Function

$.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)

Quand asyn est défini sur false, alors les requêtes Ajax sont synchrones, c'est-à-dire qu'une fois que le bloc ajax a envoyé une requête à ce moment-là, il attendra à fn1() et n'exécutera pas fn2() jusqu'à ce que la partie fn1() soit exécutée.

dataType--String

dataType peut spécifier les valeurs suivantes

xml : Renvoie un document XML, qui peut être traité avec JQuery

html : renvoie les informations HTML en texte brut ; la balise de script incluse sera exécutée une fois insérée dans le DOM.

script : renvoie le code JavaScript en texte brut. Les résultats ne sont pas automatiquement mis en cache. Sauf si les paramètres du cache sont définis. Notez que lors des requêtes à distance (pas sous le même domaine), toutes les requêtes de publication seront converties en requêtes get

json : Renvoyer les données JSON

jsonp : format JSONP. Lors de l'appel d'une fonction à l'aide du formulaire SONP, tel que myurl?callback=?, JQuery remplacera automatiquement le dernier "?" par le nom de fonction correct pour exécuter la fonction de rappel

text : renvoie une chaîne de texte brut

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

Avantages et inconvénients d'ajax

Avantages : Grâce à l'asynchronisme, il améliore l'expérience utilisateur, réduit les allers-retours de données inutiles et permet un rafraîchissement partiel

Inconvénients : Oui La prise en charge des moteurs de recherche est relativement faible

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!