Benutzerdefinierte domänenübergreifende Ajax-Komponentenverpackung

Dieses Mal werde ich Ihnen die benutzerdefinierte domänenübergreifende Ajax-Komponentenkapselung vorstellen. Was sind die Vorsichtsmaßnahmen bei der Verwendung der benutzerdefinierten domänenübergreifenden Ajax-Komponentenkapselung?

Class.create()-Analyse

Erstellen Sie eine Klassenvererbung, indem Sie den Prototyp nachahmen

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 Konstruktor-Anfrage zurück, die var ZIP_Ajax= function(){ entspricht. this.request.apply(this, arguments }; Die Verwendung des Objektidentitätswechsels zum Durchführen eines Konstruktionsprozesses innerhalb der Funktion entspricht der Übergabe der Konstruktoraufgabe an die Anforderungsmethode. Hier ist this.request die Methode der ZIP_Ajax-Instanz, und diese zeigt auf die ZIP_Ajax-Instanz. After apply Dies zeigt auf ZIP_Ajax , und schließlich verweist dies tatsächlich auf die ZIP_Ajax-Klasse basierend auf dem neuen Schlüsselwort. Mit der Definition der Klasse ZIP_Ajax können Sie dann deren Methoden definieren:

Detaillierte Erklärung von XMLHttpRequest:

XMLHttpRequest ist keine Technologie, sondern ein in Mainstream-Browser integriertes Objekt, das vollständig auf das http-Protokoll zugreifen kann. 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 Anforderungen unterstützt, besteht der größte Vorteil darin, dass es die asynchrone Übertragung zum Empfangen von Daten unterstützt. Beim Erstellen einer neuen Ajax-Anforderung 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 fünf Werte zurück: 0, 1 und 2 repräsentieren die Erstellung von XMLHttpRequest, und das Senden der Anfrage nicht beendet ist (d. h. nur die Antwort wurde empfangen) 4 ist der eigentliche Weg, eine vollständige Antwort zu erhalten.

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

Zu den häufig verwendeten Werten gehören 200, was eine erfolgreiche Datenrückgabe anzeigt, 301 eine permanente Umleitung, 302 eine vorübergehende Umleitung (unsicher), 304, das zwischengespeicherte Daten liest, 400, das einen Syntaxfehler in der Anfrage anzeigt, und 403 zeigt an, dass der Server die Anfrage ablehnt. 404 zeigt an, dass die angeforderte Webressource nicht vorhanden ist. 405 gibt an, dass der Server am angegebenen Standort nicht gefunden werden konnte. 408 zeigt an, dass die Anfrage abgelaufen ist. 500 zeigt einen internen Serverfehler an. 505 zeigt an, dass der Server dies tut Unterstützt die angeforderte http-Protokollversion nicht.

200–300 zeigt Erfolg an, 300–400 zeigt eine Umleitung an, 400–500 zeigt an, dass der Inhalt oder das Format der Anfrage oder der Anfragetext zu groß ist, was einen Fehler verursacht, und 500+ zeigt einen internen Serverfehler an

offene Methode:

open erhält drei Parameter: Anforderungstyp (Get, Post, Head usw.), URL, synchron oder asynchron

Sendemethode:

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 ausgeführt und ihr Parameter sind die Rückgabedaten

Ajax-domänenübergreifend:

Was ist domänenübergreifend?

Wenn zwei Websites www.a.com Daten von www.b.com anfordern möchten, liegt ein domänenübergreifendes Problem vor, das durch inkonsistente Domänennamen verursacht wird. Selbst wenn die Domänennamen gleich sind und die Ports unterschiedlich sind, treten immer noch domänenübergreifende Probleme auf (aus diesem Grund kann sich js nur zurücklehnen und zuschauen). Um festzustellen, ob es domänenübergreifend ist, verwenden Sie einfach window.location.protocol+window.location.host, um zu bestimmen, ob es domänenübergreifend ist. Zum Beispiel http://www.baidu.com.

Welche Möglichkeiten gibt es, domänenübergreifende Probleme mit js zu lösen?

1. document.domain+iframe

Für Anfragen mit derselben Hauptdomain, aber unterschiedlichen Subdomains kann Domainname + Iframe als Lösung verwendet werden. Die konkrete Idee besteht darin, dass zwei verschiedene AB-Dateien unter zwei Domainnamen vorhanden sind: www.a.com/a.html

Zusätzlich zu hi.a.com/b.html können wir document.domain="a.com" zu den beiden HTML-Dateien hinzufügen und dann einen Iframe in der A-Datei erstellen, um das Inhaltsdokument des Iframes zu steuern Mit den beiden Dateien können Sie ein Gespräch führen. Zum Beispiel:

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

in einer.html-Datei auf www.a.com

in der b.html-Datei auf hi.a.com document.domain="a.com";

Frage:

1、安全性，当一个站点（hi.a.com）被攻击后，另一个站点（www.a.com）会引起安全漏洞。2、如果一个页面中引入多个iframe，要想能够操作所有iframe，必须都得设置相同domain。

2、动态创建script（传说中jsonp方式）

浏览器默认禁止跨域访问，但不禁止在页面中引用其他域名的js文件，并且可以执行引入js文件中的方法等，根据这点我们可以通过创建script节点方法来实现完全跨域的通信。实现步骤为：

a.在请求发起方页面动态加载一个script，script的url指向接收方的后台，该地址返回的javascript方法会被发起方执行，url可以传参并仅支持get提交参数。

b.加载script脚本时候调用跨域的js方法进行回调处理(jsonp)。

举例如下：

发起方

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

接收方：

接收方只需要返回一个执行函数，该执行函数就是请求中的callback并赋参数。

3、使用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)=='number'&&s>200&&s<300){
        if(typeof(options.success)!='function')return;
        var format=http;
        if(typeof(options.format)=='string'){//判断请求数据格式
          switch(options.format){
            case 'text':
              format=http.responseText;
              break;
            case 'json':
              try{
                format=eval('('+http.responseText+')');
              }
              catch (e) {
                if (window.console && console.error) console.error(e);
              }
              break;
            case 'xml':
              format=http.responseXML;
              break;
          }
        }
      options.success(format);//成功回调
      }
      else {//请求出问题后处理
        if (window.closed) return;
        if (typeof (options.failure) == 'function') {
          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){
    ......
  }
})

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

express搭建查询服务器的方法

Django的cookie使用详解

Das obige ist der detaillierte Inhalt vonBenutzerdefinierte domänenübergreifende Ajax-Komponentenverpackung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!