Introduction détaillée de l'encapsulation simple Ajax

Cet article partage principalement avec vous l'introduction détaillée de l'encapsulation simple ajax, dans l'espoir d'aider tout le monde.

ajax est généralement divisé en quatre parties simples :

1. Créez un objet ajax (s'il est compatible avec IE, vous devez effectuer quelques traitements)

2. Connexion, c'est-à-dire la méthode ouverte de l'objet de requête (get et post sont un peu différents, le paramètre get doit être placé après l'url et l'en-tête de la requête doit être défini pour la publication)

3. Envoyer, c'est-à-dire l'envoi de l'objet de requête Fonction (le paramètre de publication est placé dans send)

4. est reçu et traité dans le onreadystatechange (fonction de stockage ou nom de la fonction. Chaque fois que l'attribut readyState change, la fonction sera appelée.) function .

Vous pouvez également ajouter des délais d'attente

analyse onreadystatechange

1. Vous devez d'abord déterminer l'état de readyState (il y a quatre états )

   ① : 0, la requête n'est pas initialisée

   ② : 1, la connexion au serveur a été établie

   ③ : 2, la requête a été reçue ;

   ④ : 3. La demande est en cours de traitement

   ⑤ : 4. La demande a été complétée et la réponse est prête

2. Quand prêtState est égal à 4, il faut juger du statut du statut

3. Lorsque la requête est réussie, le statut du statut est 200-302, et 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('&');
}

Recommandations associées :

Un exemple de code pour l'applet WeChat permettant d'implémenter une encapsulation simple des requêtes réseau

php encapsule simplement quelques tutoriels communs sur les opérations JS_PHP

Emballage ajax simple

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!