Detaillierte Einführung in die einfache Ajax-Verpackung

Dieser Artikel teilt Ihnen hauptsächlich die detaillierte Einführung der einfachen Ajax-Kapselung mit und hofft, allen zu helfen.

Ajax ist im Allgemeinen in vier einfache Teile unterteilt:

1. Erstellen Sie ein Ajax-Objekt (wenn es mit IE kompatibel ist, müssen Sie einige Verarbeitungsschritte durchführen)

2. Verbindung, dh die offene Methode des Anforderungsobjekts (Get und Post unterscheiden sich geringfügig, der Get-Parameter muss nach der URL platziert werden und der Anforderungsheader muss für Post festgelegt werden)

3. Senden, dh das Senden der Anforderungsobjektfunktion (der Post-Parameter wird in Senden platziert)

4. wird in empfangen und verarbeitet onreadystatechange (Speicherfunktion oder Funktionsname. Immer wenn sich das readyState-Attribut ändert, wird die Funktion aufgerufen.) function .

Sie können auch Zeitüberschreitungen hinzufügen

onreadystatechange-Analyse

1. Sie müssen zuerst den Status von readyState ermitteln (es gibt vier Zustände). )

   ①: 0, die Anfrage ist nicht initialisiert;

   ②: 1, die Serververbindung wurde hergestellt;

   ③: 2, die Anfrage wurde empfangen;

   ④ : 3. Die Anfrage wird verarbeitet

   ⑤: 4. Die Anfrage wurde abgeschlossen und die Antwort ist bereit

2. Wenn bereit gleich 4 ist, müssen Sie den Status beurteilen

3. Wenn die Anfrage erfolgreich ist, ist der Status 200-302 und 304 (Cache)

'use strict';

var $ = {};
$.ajax = ajax;

function ajax(options) {

  // 解析参数
  options = options || {};
  if (!options.url) return;
  options.type = options.type || 'get';
  options.timeout = options.timeout || 0;

  // 1 创建ajax
  if (window.XMLHttpRequest) {

    // 高级浏览器和ie7以上
    var xhr = new XMLHttpRequest();
  } else {

    //ie6,7,8
    var xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
  }

  // 2 连接
  var str = jsonToUrl(options.data);
  if (options.type === 'get') {
    xhr.open('get', `${options.url}?${str}`, true);

    // 3 发送
    xhr.send();
  } else {
    xhr.open('post', options.url, true);

    // 请求头
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

    // 3 发送
    xhr.send();
  }

  // 接收
  xhr.onreadystatechange = function() {

    // 完成
    if (xhr.readyState === 4) {

      // 清除定时器
      clearTimeout(timer);

      if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {

        // 成功
        options.success && options.success(xhr.responseText);
      } else {
        options.error && options.error( xhr.status );
      }
    }
  };

  
  // 超时
  if (options.timeout) {
    var timer = setTimeout(function(){ 
            alert("超时了");
            xhr.abort(); // 终止
        },options.timeout);
  }
}


// json转url
function jsonToUrl(json) {
  var arr = [];
  json.t = Math.random();
  for(var name in json) {
    arr.push(name + '=' + encodeURIComponent(json[name]));
  }
  return arr.join('&');
}

Verwandte Empfehlungen:

Ein Codebeispiel für das WeChat-Applet zur Implementierung einer einfachen Kapselung von Netzwerkanfragen

php kapselt einfach einige gängige JS-Operationen_PHP-Tutorial

Einfache Ajax-Verpackung

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die einfache Ajax-Verpackung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!