Benutzerdefiniertes Ajax unterstützt domänenübergreifende Komponenten (ausführliches Tutorial)

Dieser Artikel enthält eine detaillierte Analyse der Wissenspunkte im Zusammenhang mit der benutzerdefinierten Ajax-Unterstützung für die domänenübergreifende Komponentenkapselung. Freunde, die daran interessiert sind, können darauf verweisen.

Class.create()-Analyse

Prototyp imitieren, um Klassenvererbung zu erstellen

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;
};

Ajax-Definition: ZIP_Ajax=Class. create ();

Die Methode create gibt eine Konstruktoranforderung zurück, die äquivalent ist zu var ZIP_Ajax= function(){ this.request.apply(this, arguments); Use object impersonation in the function A construction Der Prozess wird intern ausgeführt, was der Übergabe der Konstruktoraufgabe an die Anforderungsmethode entspricht. Dies ist die Methode der ZIP_Ajax-Instanz, und diese verweist auf die ZIP_Ajax-Instanz verweist auf die Klasse ZIP_Ajax basierend auf dem neuen Schlüsselwort. Mit der Definition der Klasse ZIP_Ajax können Sie als Nächstes ihre Methode definieren:

Detaillierte Erklärung von XMLHttpRequest:

XMLHttpRequest ist keine Technologie, sondern eine in Mainstream-Browser integrierte Technologie Objekt mit vollem Zugriff auf das http-Protokoll. Die meisten herkömmlichen HTTP-Anfragen basieren auf der Übermittlung eines Formulars, der HTTP-Anfrage und der anschließenden Rückgabe eines Formulars. Während XMLHttpRequest synchrone Anfragen unterstützt, besteht der größte Vorteil darin, dass es die asynchrone Übertragung und den Empfang von Daten unterstützt. Beim Erstellen einer neuen Ajax-Anfrage wird tatsächlich ein XMLHttpRequest-Objekt instanziiert. Stellen Sie kurz die wichtigsten Ereignisse und Methoden vor:

readystatechange-Ereignis:

Wenn XMLHttpRequest eine http-Anfrage sendet, wird ein readystatechange-Ereignis ausgelöst. Das Ereignis gibt 0 zurück , 1 und 2 repräsentieren die Erstellung von XMLHttpRequest, den Abschluss der Initialisierung von XMLHttpRequest und das Senden der Anfrage. 3 bedeutet, dass die Antwort nicht beendet wurde (d. h. nur die Antwort-Header-Daten werden empfangen). die vollständige Antwort.

Der zurückgegebene Statusstatus gibt den vom Server zurückgegebenen Statuscode an:

Häufig verwendete Werte sind 200 für die erfolgreiche Rückgabe von Daten, 301 für permanente Umleitung, 302 für temporäre Umleitung (unsicher) und 304 für Lesen 400 bedeutet, dass die Anfrage einen Syntaxfehler aufweist, 404 bedeutet, dass die angeforderte Webressource nicht vorhanden ist, 405 bedeutet, dass die Anfrage abgelaufen ist. 500 interner Serverfehler, 505 bedeutet, dass der Server die angeforderte http-Protokollversion nicht unterstützt.

200–300 bedeutet Erfolg, 300–400 bedeutet Umleitung, 400–500 bedeutet, dass der Inhalt oder das Format der Anfrage oder der Anfragetext zu groß ist, was einen Fehler verursacht, 500+ bedeutet interner Serverfehler

Open-Methode:

Open empfängt drei Parameter: Anforderungstyp (Get, Post, Head usw.), URL, synchron oder asynchron

Send-Methode :

Wenn die Anfrage bereit ist, wird die Sendemethode ausgelöst und der gesendete Inhalt sind die angeforderten Daten (wenn es sich um eine Get-Anfrage handelt, ist der Parameter null;

Nachdem die Anfrage erfolgreich war, wird die benutzerdefinierte Erfolgsmethode und ihre Parameter ausgeführt. So geben Sie Daten zurück:

ajax-domänenübergreifend:

Was ist domänenübergreifend?

Wenn zwei Websites www.a.com zu www wechseln möchten, kommt es zu domänenübergreifenden Problemen, die durch inkonsistente Domänennamen verursacht werden Wenn die Ports unterschiedlich sind, kommt es zu domänenübergreifenden Problemen (aus diesem Grund kann js nur abwarten und beurteilen, ob es sich um domänenübergreifende Probleme handelt. Verwenden Sie beispielsweise window.location.protocol+window.location.host, um festzustellen, http://www.baidu.com.

Was sind die Lösungen für domänenübergreifende Probleme mit js?

1, document.domain+iframe

Für Anfragen mit derselben Hauptdomäne, aber unterschiedlichen Unterdomänen kann Domänenname + Iframe als Lösung verwendet werden. Die konkrete Idee besteht darin, dass unter dem Domänennamen .com/a zwei verschiedene AB-Dateien vorhanden sind. html

und hi.a.com/b.html können wir document.domain="a.com" zu den beiden HTML-Dateien hinzufügen und sie dann in einer Datei erstellen. Ein Iframe steuert den InhaltDokument von den iframe, damit die beiden Dateien kommunizieren können Datei auf

document.domain="a.com";

Probleme:

1. Sicherheit, wenn eine Site (hi.a. com) angegriffen wird, eine andere Seite (www.a.com) führt zu einer Sicherheitslücke 2. Wenn mehrere Iframes auf einer Seite eingeführt werden, muss dieselbe Domain festgelegt werden, um alle Iframes dynamisch erstellen zu können Skripte (die legendäre JSONP-Methode)

Browser verbieten standardmäßig den domänenübergreifenden Zugriff, verbieten jedoch nicht, dass auf der Seite auf JS-Dateien von anderen Domänennamen verwiesen wird, und Importe können durch JS-Dateien usw. ausgeführt werden Auf dieser Grundlage können wir durch die Erstellung von Skriptknotenmethoden eine vollständige domänenübergreifende Kommunikation erreichen. Die Implementierungsschritte sind:

a. Laden Sie ein Skript dynamisch auf die Seite des Anforderungsinitiators. Die von der Adresse zurückgegebene Javascript-Methode wird vom Initiator ausgeführt kann Parameter übergeben und unterstützt nur das Abrufen von Übermittlungsparametern.

b. Rufen Sie beim Laden des Skripts die domänenübergreifende js-Methode für die Rückrufverarbeitung (jsonp) auf.

Zum Beispiel:

Initiator

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文件中元素
  }

Empfänger:

Der Empfänger muss nur eine Ausführungsfunktion zurückgeben, bei der es sich um den Rückruf in der Anfrage und Zuweisung handelt Parameter.

3. Verwenden Sie html5 postMessage:

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实现微信支付

Das obige ist der detaillierte Inhalt vonBenutzerdefiniertes Ajax unterstützt domänenübergreifende Komponenten (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!