L'ajax personnalisé prend en charge les composants inter-domaines (tutoriel détaillé)

Cet article vous donne une analyse détaillée des points de connaissances liés à la prise en charge ajax personnalisée pour l'encapsulation de composants inter-domaines. Les amis qui sont intéressés par cela peuvent s'y référer.

Analyse Class.create()

Imiter un prototype pour créer un héritage de classe

var Class = {
  create: function () {
    var c = function () {
      this.request.apply(this, arguments);
    }
    for (var i = 0, il = arguments.length, it; i < il; i++) {
      it = arguments[i];
      if (it == null) continue;
      Object.extend(c.prototype, it);
    }
    return c;
  }
};
Object.extend = function (tObj, sObj) { 
  for (var o in sObj) {
    tObj[o] = sObj[o];
  }
  return tObj;
};

définition ajax : ZIP_Ajax= Classe .create();

La méthode create renvoie une requête de constructeur, ce qui équivaut à var ZIP_Ajax= function(){ this.request.apply(this, arguments }; Le processus à l'intérieur de la fonction équivaut à confier la tâche du constructeur à la méthode de requête. This.request est ici la méthode de l'instance ZIP_Ajax, et cela pointe vers l'instance ZIP_Ajax. Après l'application, cela pointe vers ZIP_Ajax, enfin, cela pointe en fait vers l'instance. Classe ZIP_Ajax basée sur le nouveau mot-clé. Avec la définition de la classe ZIP_Ajax, vous pouvez ensuite définir ses méthodes :

Explication détaillée de XMLHttpRequest :

XMLHttpRequest n'est pas une technologie mais une technologie intégrée aux navigateurs grand public Un objet avec un accès complet au protocole http. La plupart des requêtes http traditionnelles sont basées sur la soumission d'un formulaire et demandent http, puis renvoient un formulaire. Bien que XMLHttpRequest prenne en charge les requêtes synchrones, le plus grand avantage est qu'il prend en charge la transmission asynchrone pour recevoir des données. La création d'une nouvelle requête ajax revient en fait à instancier un objet XMLHttpRequest. Présentez brièvement les principaux événements et méthodes :

Événement readystatechange :

Lorsque XMLHttpRequest envoie une requête http, un événement readystatechange sera déclenché. L'événement renvoie cinq valeurs 0. , 1 et 2 représentent respectivement la création de XMLHttpRequest, l'achèvement de l'initialisation de XMLHttpRequest et l'envoi de la requête 3 représente que la réponse n'est pas terminée (c'est-à-dire que seules les données d'en-tête de réponse sont reçues). réponse complète.

Le statut renvoyé indique le code de statut renvoyé par le serveur :

Les codes couramment utilisés sont 200 indiquant un retour réussi des données, 301 pour une redirection permanente, 302 pour une redirection temporaire (dangereuse) et 304 lu. 400 signifie qu'il y a une erreur de syntaxe dans la requête, 403 signifie que le serveur rejette la requête, 404 signifie que la ressource Web demandée n'existe pas, 405 ne peut pas trouver le serveur à l'emplacement spécifié, 408 signifie que la requête a expiré. 500 Erreur interne du serveur, 505 signifie que le serveur ne prend pas en charge la version http demandée.

200-300 signifie succès, 300-400 signifie redirection, 400-500 signifie que le contenu ou le format de la demande ou le corps de la demande est trop volumineux, provoquant une erreur, 500+ signifie une erreur interne du serveur

méthode open :

open reçoit trois paramètres : type de requête (get, post, head, etc.), url, synchrone ou asynchrone

méthode d'envoi :

Lorsque la requête est prête, la méthode d'envoi sera déclenchée, et le contenu envoyé sera les données demandées (s'il s'agit d'une requête get, le paramètre est nul ;

Une fois la requête réussie, la méthode personnalisée success sera exécutée et ses paramètres Pour renvoyer des données

ajax cross-domain :

Qu'est-ce que cross-domain ?

Si deux sites www.a.com veulent accéder à www. Lorsque b.com demande des données, il y aura des problèmes entre domaines causés par des noms de domaine incohérents, même si les noms de domaine sont les mêmes. les ports sont différents, il y aura des problèmes inter-domaines (pour cette raison, js ne peut que rester en attente et juger s'il s'agit d'un inter-domaine). Utilisez window.location.protocol+window.location.host pour déterminer, par exemple, http://www.baidu.com.

Quelles sont les solutions aux problèmes inter-domaines avec js

1 , document.domain+iframe

Pour les demandes avec le même domaine principal mais des sous-domaines différents, le nom de domaine + iframe peut être utilisé comme solution. L'idée spécifique est que s'il y a deux fichiers ab différents www.a sous le nom de domaine .com/a. html

et hi.a.com/b.html, nous pouvons ajouter document.domain="a.com" aux deux fichiers html, puis les créer dans le fichier a. Une iframe contrôle le contentDocument de l'iframe, pour que les deux fichiers puissent communiquer. Par exemple :

document.domain="a.com";
  var selfFrame=document.createElement("iframe");
  selfFrame.src="http://hi.a.com/b.html";
  selfFrame.style.display="none";
  document.body.appendChild(selfFrame);
  selfFrame.onload=function(){
    var doc=selfFrame.contentDocument||selfFrame.contentWindow.document;//得到操作b.html权限
    alert(doc.getElementById("ok_b").innerHTML());//具体操作b文件中元素
  }

hi.a dans le fichier a.html sur

document. domain="a.com";

dans le fichier b.html sur .com Problèmes :

1. Sécurité, lorsqu'un site (hi. a.com) est attaqué, un autre site (www.a.com) entraînera une faille de sécurité. 2. Si plusieurs iframes sont introduites dans une page, le même domaine doit être défini afin de pouvoir faire fonctionner toutes les iframes >

2. créer un script (la légendaire méthode jsonp)

Les navigateurs interdisent l'accès entre domaines par défaut, mais n'interdisent pas les fichiers js provenant d'autres noms de domaine dans la page, et peuvent exécuter des méthodes importées dans des fichiers js, etc. Sur cette base, nous pouvons réaliser une communication interdomaine complète en créant des méthodes de nœud de script. Les étapes d'implémentation sont :

a. Charger dynamiquement un script sur la page de l'initiateur de la requête. L'url du script pointe vers le backend du destinataire. La méthode javascript renvoyée par l'adresse sera exécutée par l'initiateur. peut transmettre des paramètres et prend uniquement en charge l'obtention des paramètres de soumission.

b. Lors du chargement du script, appelez la méthode js inter-domaines pour le traitement de rappel (jsonp).

Par exemple :

Initiateur

Récepteur :

function uploadScript(options){
  var head=document.getElementsByTagName("head")[0];
  var script=document.createElement("script");
  script.type="text/javasctipt";
  options.src += '?callback=' + options.callback;
  script.src=options.src;
  head.insertBefore(script,head.firstChild);
}
function callback(data){}
window.onload=function(){//调用
  uploadScript({src:"http://e.com/xxx/main.ashx",callback:callback})
}

Le récepteur n'a besoin de renvoyer qu'une fonction d'exécution, qui est la fonction d'exécution dans le demander un rappel et attribuer des paramètres.

3. Utilisez le postMessage html5 :

html5新功能有一个就是跨文档消息传输，如今大部分浏览器都已经支持并使用(包括ie8+)，其支持基于web的实时消息传递并且不存在跨域问题。postMessage一般会跟iframe一起使用。

举例如下：

父页面：

<iframe id="myPost" src="http//www.a.com/main.html"></iframe>
window.onload=function(){
  document.getElementById("myPost").contentWindow.postMessage("显示我","http://www.a.com")
  //第二个参数表示确保数据发送给适合域名的文档
}
a.com/main.html页面：
window.addEventListener("message",function(event){
  if(event.origin.indexOf("a.com")>-1){
    document.getElementById("textArea").innerHTML=event.data;
  }
},false)
<body>
  <p>
    <span id="textArea"></span>
  </p>
</body>

这样在父页面加载完成后main.html页面的textArea部分就会显示"显示我"三个字

ajax方法封装code：

ZIP_Ajax.prototype={
  request:function(url options){
    this.options=options;
    if(options.method=="jsonp"){//跨域请求
      return this.jsonp();
    }
    var httpRequest=this.http();
    options=Object.extend({method: 'get',
      async: true},options||{});
    
    if(options.method=="get"){
      url+=(url.indexOf('?')==-1?'?':'&')+options.data;
      options.data=null;
    }
    httpRequest.open(options.method,url,options.async);
    if (options.method == 'post') {
      httpRequest.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=UTF-8');
    }
    httpRequest.onreadystatechange = this._onStateChange.bind(this, httpRequest, url, options);
    httpRequest.send(options.data || null);//get请求情况下data为null
    return httpRequest;
  },
  jsonp:function(){
    jsonp_str = 'jsonp_' + new Date().getTime();
    eval(jsonp_str + ' = ' + this.options.callback + ';');    
    this.options.url += '?callback=' + jsonp_str;
    for(var i in this.options.data) {
      this.options.url += '&' + i + '=' + this.options.data[i];
    } 
    var doc_head = document.getElementsByTagName("head")[0],
      doc_js = document.createElement("script"),
      doc_js.src = this.options.url;
    doc_js.onload = doc_js.onreadystatechange = function(){
       if (!this.readyState || this.readyState == "loaded" || this.readyState == "complete"){
         //清除JS
         doc_head.removeChild(doc_js);      
        }
      }   
      doc_head.appendChild(doc_js);
  },
  http:function(){//判断是否支持xmlHttp
    if(window.XMLHttpRequest){
      return new XMLHttpRequest();
    }
    else{
      try{
        return new ActiveXObject('Msxml2.XMLHTTP')
      }
      catch(e){
        try {
          return new ActiveXObject('Microsoft.XMLHTTP');
        } catch (e) {
          return false;
        }
      }
    }
  },
  _onStateChange:function(http,url,options){
    if(http.readyState==4){
      http.onreadystatechange=function(){};//重置事件为空
      var s=http.status;
      if(typeof(s)==&#39;number&#39;&&s>200&&s<300){
        if(typeof(options.success)!=&#39;function&#39;)return;
        var format=http;
        if(typeof(options.format)==&#39;string&#39;){//判断请求数据格式
          switch(options.format){
            case &#39;text&#39;:
              format=http.responseText;
              break;
            case &#39;json&#39;:
              try{
                format=eval(&#39;(&#39;+http.responseText+&#39;)&#39;);
              }
              catch (e) {
                if (window.console && console.error) console.error(e);
              }
              break;
            case &#39;xml&#39;:
              format=http.responseXML;
              break;
          }
        }
      options.success(format);//成功回调
      }
      else {//请求出问题后处理
        if (window.closed) return;
        if (typeof (options.failure) == &#39;function&#39;) {
          var error = {
            status: http.status,
            statusText: http.statusText
          }
          //  判断是否是网络断线或者根本就请求不到服务器
          if (http.readyState == 4 && (http.status == 0 || http.status == 12030)) {
            //  是
            error.status = -1;
          }
          options.failure(error);
        }
      }
    } 
  }
};

使用方法：

ajax调用举例：

var myAjax=new ZIP_Ajax("http://www.a.com/you.php",{
  method:"get",
  data:"key=123456&name=yuchao",
  format:"json",
  success:function(data){
    ......
  }
})
跨域请求调用举例：
var jsonp=new ZIP_Ajax("http://www.a.com/you.php",{
  method:"jsonp",
  data:{key:"123456",name:"yuchao"},
  callback:function(data){
    ......
  }
})

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在vue中如何实现微信分享朋友圈,发送朋友

详解如何实现vuex（详细教程）

通过vue.js实现微信支付

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!