Explication détaillée des exemples de demandes de données asynchrones d'envoi de JS natif

Cet article présente principalement les informations pertinentes du JS natif pour envoyer des demandes de données asynchrones en détail. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Lorsque vous travaillez sur des projets, il est parfois nécessaire de le faire. utilisez des demandes de données asynchrones, mais s'il n'y a pas de dépendance de framework pour le moment, vous devez utiliser JS natif pour les demandes de données asynchrones. Il n’existe actuellement que deux méthodes de requête, l’une est AJAX et l’autre est JSONP. Encapsulation simple de requêtes asynchrones via JS natif.

AJAX

AJAX est une méthode de demande de données qui peut mettre à jour les données de pages partielles sans actualiser la page entière. Le noyau technique d'AJAX est l'objet XMLHttpRequest. Le processus de requête principal est le suivant :

• Créer un objet XMLHttpRequest (nouveau)

• Se connecter à le serveur (ouvert)

• Envoyer la demande (envoyer)

• Recevoir les données de réponse (onreadystatechange)
  

Ne parlez pas Collez le code directement

/**
* 通过JSON的方式请求
* @param {[type]} params [description]
* @return {[type]}  [description]
*/
ajaxJSON(params) {
 params.type = (params.type || 'GET').toUpperCase();
 params.data = params.data || {};
 var formatedParams = this.formateParams(params.data, params.cache);
 var xhr;
 //创建XMLHttpRequest对象
 if (window.XMLHttpRequest) {
  //非IE6
  xhr = new XMLHttpRequest();
 } else {
  xhr = new ActiveXObject('Microsoft.XMLHTTP');
 }
 //异步状态发生改变，接收响应数据
 xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
   if (!!params.success) {
    if (typeof xhr.responseText == 'string') {
     params.success(JSON.parse(xhr.responseText));
    } else {
     params.success(xhr.responseText);
    }
   }
  } else {
   params.error && params.error(status);
  }
 }
 if (params.type == 'GET') {
  //连接服务器
  xhr.open('GET', (!!formatedParams ? params.url + '?' + formatedParams : params.url), true);
  //发送请求
  xhr.send();
 } else {
  //连接服务器
  xhr.open('POST', params.url, true);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  //发送请求
  xhr.send(formatedParams);
 }
},
/**
* 格式化数据
* @param {Obj}  data 需要格式化的数据
* @param {Boolean} isCache 是否加入随机参数
* @return {String}   返回的字符串
*/
formateParams: function(data, isCache) {
 var arr = [];
 for (var name in data) {
  arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
 }
 if (isCache) {
  arr.push('v=' + (new Date()).getTime());
 }
 return arr.join('&');
}

IE7 et supérieur prennent en charge l'objet XHR natif, vous pouvez donc l'utiliser directement : var oAjax = nouveau XMLHttpRequest();. Dans IE6 et les versions précédentes, l'objet XHR est implémenté via un objet ActiveXObject dans la bibliothèque MSXML.

Connectez-vous au serveur via la fonction ouverte de xhr, qui reçoit principalement trois paramètres : méthode de requête, adresse de requête et s'il faut demander de manière asynchrone (généralement requête asynchrone). Il existe deux méthodes de requête, GET et POST GET soumet les données au serveur via l'URL, et POST envoie les données au serveur en tant que paramètre de la méthode d'envoi.

Liez la fonction de changement d'état onreadystatechange à xhr, qui est principalement utilisée pour détecter le changement de readyState de xhr Lorsque la transmission asynchrone réussit, la valeur de readyState passera de 0 à 4, et l'événement onreadystatechange. sera déclenché en même temps. Les attributs et états correspondants de readyState sont les suivants :

0 (non initialisé) L'objet a été établi, mais n'a pas été initialisé (la méthode open n'a pas encore été appelée)
1 (Initialisé) Le l'objet a été établi, mais la méthode d'envoi n'a pas encore été appelée
2 (Envoyer des données) La méthode d'envoi a été appelée, mais l'état actuel et l'en-tête http sont inconnus
3 (Les données sont en cours de transfert) Une partie de les données ont été reçues, car la réponse et l'en-tête http sont incomplets. À ce moment, une partie des données obtenues via ResponseBody et ResponseText apparaîtra. Erreur
4 (Complet) La réception des données est terminée. les données de réponse peuvent être obtenues via ResponseBody et ResponseText

Dans l'événement readystatechange, déterminez d'abord si la réponse a été reçue, puis déterminez si le serveur La demande est traitée avec succès est <🎜. >code de statut. Les codes de statut commençant par 2 sont réussis. 304 signifie obtenu du cache. Le code ci-dessus ajoute un nombre aléatoire à chaque demande, donc la valeur ne sera pas récupérée du cache, ce statut n'est donc pas nécessaire. être jugé.

JSONP

Si vous utilisez toujours l'objet XMLHttpRequest ci-dessus pour envoyer des requêtes inter-domaines, bien que la fonction d'envoi soit appelée, l'état de xhr est toujours 0 et L'événement onreadystatechange ne sera pas déclenché pour le moment, la méthode de requête JSONP sera utilisée.

JSONP (JSON with Padding) est une méthode de requête inter-domaines. Le principe principal est de profiter de la fonctionnalité de requête inter-domaine de la balise script, d'envoyer la requête au serveur via son attribut src, le serveur renvoie le code js, la page web accepte la réponse, puis l'exécute directement. C'est le même principe que le référencement de fichiers externes via la balise script.

JSONP se compose de deux parties :

fonction de rappel et données La fonction de rappel est généralement contrôlée par la page Web et envoyée au serveur en tant que paramètre. et les données sont renvoyées sous forme de chaîne.

Par exemple, la page Web crée une balise de script et attribue sa valeur src à

http://www.test.com/json/?callback=process. le temps, la page Web Faites simplement une demande. Le serveur combine les données à renvoyer en tant que paramètre de la fonction . Le format des données renvoyées par le serveur est similaire à "process({'name:'xieyufei'})". valeur de réponse car la requête Celui-ci est un script, cela équivaut donc à appeler directement la méthode de processus et à passer un paramètre.

Postez le code directement sans rien dire.

/**
* 通过JSONP的方式请求
* @param {[type]} params [description]
* @return {[type]}  [description]
*/
ajaxJSONP(params) {
 params.data = params.data || {};
 params.jsonp = params.jsonp || 'callback';
 // 设置传递给后台的回调参数名和参数值
 var callbackName = 'jsonp_' + (new Date()).getTime();
 params.data[params.jsonp] = callbackName;
 var formatedParams = this.formateParams(params.data, params.cache);
 //创建script标签并插入到页面中
 var head = document.getElementsByTagName('head')[0];
 var script = document.createElement('script');
 head.appendChild(script);
 //创建jsonp回调函数 
 window[callbackName] = function(json) {
  head.removeChild(script);
  clearTimeout(script.timer);
  window[callbackName] = null;
  params.success && params.success(json);
 };
 //发送请求 
 script.src = (!!formatedParams ? params.url + '?' + formatedParams : params.url);
 //为了得知此次请求是否成功，设置超时处理
 if (params.time) {
  script.timer = setTimeout(function() {
   window[callbackName] = null;
   head.removeChild(script);
   params.error && params.error({
    message: '超时'
   });
  }, params.time);
 }
}

Lorsque l'attribut src est défini sur la balise script, le navigateur enverra une requête, mais il ne peut envoyer la requête qu'une seule fois, ce qui entraîne l'envoi de la balise script ne doit pas être réutilisé, donc à chaque fois, la balise de script doit être supprimée après l'opération. Avant que le navigateur n'envoie une requête, liez globalement une fonction de rappel. Cette fonction de rappel sera appelée lorsque la demande de données aboutira.

Résumé

Intégrez les deux méthodes d'envoi de données asynchrones et déterminez quelle méthode utiliser en fonction du type de données. Collez le code complet

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!