Detaillierte Erläuterung der Beispiele für das Senden asynchroner Datenanforderungen durch natives JS

In diesem Artikel werden hauptsächlich die relevanten Informationen zu nativem JS zum Senden asynchroner Datenanforderungen im Detail vorgestellt. Es hat einen gewissen Referenzwert.

Bei der Arbeit an Projekten ist dies manchmal erforderlich Verwenden Sie asynchrone Datenanforderungen. Wenn jedoch zu diesem Zeitpunkt keine Framework-Abhängigkeit besteht, müssen Sie natives JS für asynchrone Datenanforderungen verwenden. Derzeit gibt es nur zwei Anforderungsmethoden: eine ist AJAX und die andere ist JSONP. Einfache Kapselung asynchroner Anfragen durch natives JS.

AJAX

AJAX ist eine Datenanforderungsmethode, die die Daten von Teilseiten aktualisieren kann, ohne die gesamte Seite zu aktualisieren. Der technische Kern von AJAX ist das XMLHttpRequest-Objekt. Der Hauptanforderungsprozess ist wie folgt:

• XMLHttpRequest-Objekt erstellen (neu)

• Verbinden mit der Server (offen)

• Anfrage senden (senden)

• Antwortdaten empfangen (onreadystatechange)
  

Nicht sprechen Fügen Sie den Code direkt ein

/**
* 通过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 und höher unterstützen das native XHR-Objekt, sodass Sie es direkt verwenden können: var oAjax = neues XMLHttpRequest();. In IE6 und früheren Versionen wird das XHR-Objekt über ein ActiveXObject-Objekt in der MSXML-Bibliothek implementiert.

Stellen Sie über die offene Funktion von xhr eine Verbindung zum Server her, die hauptsächlich drei Parameter empfängt: Anforderungsmethode, Anforderungsadresse und ob asynchron angefordert werden soll (normalerweise asynchrone Anforderung). Es gibt zwei Anforderungsmethoden: GET und POST. GET sendet Daten über die URL an den Server, und POST sendet die Daten als Parameter der Sendemethode an den Server.

Binden Sie die Statusänderungsfunktion onreadystatechange an xhr, die hauptsächlich zum Erkennen von Änderungen im readyState von xhr verwendet wird. Wenn die asynchrone Übertragung erfolgreich ist, ändert sich der Wert von readyState von 0 auf 4 und das Ereignis onreadystatechange wird gleichzeitig ausgelöst. Die Attribute und entsprechenden Zustände von readyState lauten wie folgt:

0 (nicht initialisiert) Das Objekt wurde eingerichtet, aber nicht initialisiert (die offene Methode wurde noch nicht aufgerufen)
1 (Initialisiert) Das Objekt wurde eingerichtet, aber die Sendemethode wurde noch nicht aufgerufen
2 (Daten senden) Die Sendemethode wurde aufgerufen, aber der aktuelle Status und der HTTP-Header sind unbekannt
3 (Daten werden übertragen) Teil von Die Daten wurden empfangen, da die Antwort und der HTTP-Header unvollständig sind. Zu diesem Zeitpunkt wird der Fehler
4 (Complete) angezeigt, der den Datenempfang abgeschlossen hat Antwortdaten können über ResponseBody und ResponseText

abgerufen werden. Bestimmen Sie im readystatechange-Ereignis zunächst, ob die Antwort empfangen wurde, und stellen Sie dann fest, ob der Server die Anforderung xhr.status erfolgreich verarbeitet hat > Statuscode . Statuscodes, die mit 2 beginnen, bedeuten, dass sie aus dem Cache stammen. Der obige Code fügt jeder Anfrage eine Zufallszahl hinzu, sodass dieser Status nicht abgerufen werden muss beurteilt werden.

JSONP

Wenn Sie weiterhin das obige XMLHttpRequest-Objekt zum Senden domänenübergreifender Anforderungen verwenden, ist der Status von xhr trotz Aufruf der Sendefunktion immer 0 und Das onreadystatechange-Ereignis wird zu diesem Zeitpunkt nicht ausgelöst. Die JSONP-Anforderungsmethode wird verwendet.

JSONP (JSON with Padding) ist eine domänenübergreifende Anforderungsmethode. Das Hauptprinzip besteht darin, die domänenübergreifende Anforderungsfunktion des Skript-Tags zu nutzen, die Anforderung über das src-Attribut an den Server zu senden, der Server den JS-Code zurückgibt, die Webseite die Antwort akzeptiert und sie dann direkt ausführt. Dies entspricht dem Prinzip der Referenzierung externer Dateien über das Skript-Tag.

JSONP besteht aus zwei Teilen:

Rückruffunktion und Daten. Die Rückruffunktion wird im Allgemeinen von der Webseite gesteuert und als Parameter an den Server gesendet und Daten. Rückgabe als String.

Beispielsweise erstellt die Webseite ein Skript-Tag und weist seinen src-Wert

http://www.test.com/json/?callback=process zu Zeit, die Webseite Stellen Sie einfach eine Anfrage. Der Server kombiniert die zurückzugebenden Daten als Parameter der Funktion . Das vom Server zurückgegebene Datenformat ähnelt „process({'name:'xieyufei'})“. Antwortwert, da die Anforderung ein Skript ist und daher dem direkten Aufruf der Prozessmethode und der Übergabe eines Parameters entspricht.

Veröffentlichen Sie den Code direkt, ohne etwas zu sagen.

/**
* 通过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);
 }
}

Wenn das src-Attribut auf das Skript-Tag gesetzt ist, sendet der Browser eine Anfrage, kann die Anfrage jedoch nur einmal senden, was dazu führt, dass das Skript-Tag aktiviert wird nicht wiederverwendet werden, also jedes Mal Das Skript-Tag muss nach dem Vorgang entfernt werden. Bevor der Browser eine Anfrage sendet, binden Sie global eine Rückruffunktion. Diese Rückruffunktion wird aufgerufen, wenn die Datenanforderung erfolgreich ist.

Zusammenfassung

Integrieren Sie die beiden Methoden zum Senden asynchroner Daten und bestimmen Sie anhand des Datentyps, welche Methode verwendet werden soll. Fügen Sie den vollständigen Code ein

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Beispiele für das Senden asynchroner Datenanforderungen durch natives JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!