AJAX domänenübergreifende Anforderung von JSONP zum Abrufen von JSON-Daten

JSONP (JSON with Padding) ist ein inoffizielles Protokoll, das die Integration von Skript-Tags auf der Serverseite und deren Rückgabe an den Client ermöglicht und so einen domänenübergreifenden Zugriff in Form eines Javascript-Rückrufs ermöglicht (dies ist nur eine einfache Implementierung von JSONP). .

Asynchrones JavaScript und XML (Ajax) ist eine Schlüsseltechnologie für eine neue Generation von Websites (im Volksmund als Web 2.0-Sites bezeichnet). Ajax ermöglicht den Datenabruf im Hintergrund, ohne die Anzeige und das Verhalten der Webanwendung zu beeinträchtigen. Rufen Sie Daten mithilfe der XMLHttpRequest-Funktion ab, einer API, die es clientseitigem JavaScript ermöglicht, über HTTP eine Verbindung zu einem Remote-Server herzustellen. Ajax ist auch die treibende Kraft hinter vielen Mashups, die Inhalte von mehreren Orten in einer einzigen Webanwendung integrieren.

Aufgrund von Browsereinschränkungen ermöglicht diese Methode jedoch keine domänenübergreifende Kommunikation. Wenn Sie versuchen, Daten von einer anderen Domäne anzufordern, tritt ein Sicherheitsfehler auf. Diese Sicherheitsfehler können vermieden werden, wenn Sie den Remote-Server steuern können, auf dem sich die Daten befinden, und wenn jede Anfrage an dieselbe Domäne geht. Doch was nützt eine Webanwendung, wenn sie einfach auf dem eigenen Server bleibt? Was ist, wenn Sie Daten von mehreren Drittanbieterservern sammeln müssen?

Informationen zu den Einschränkungen der Same-Origin-Richtlinie

Die Same-Origin-Richtlinie verhindert, dass in einer Domäne geladene Skripts Dokumenteigenschaften in einer anderen Domäne abrufen oder manipulieren. Das heißt, die Domäne der angeforderten URL muss mit der Domäne der aktuellen Webseite übereinstimmen. Das bedeutet, dass der Browser Inhalte aus verschiedenen Quellen isoliert, um Vorgänge zwischen ihnen zu verhindern. Diese Browserrichtlinie ist alt und existiert seit Netscape Navigator Version 2.0.

Eine relativ einfache Möglichkeit, diese Einschränkung zu überwinden, besteht darin, dass die Webseite Daten von dem Webserver anfordert, von dem sie stammt, und dass der Webserver wie ein Proxy fungiert und die Anfrage an den eigentlichen Drittanbieterserver weiterleitet . Obwohl diese Technologie weit verbreitet ist, ist sie nicht skalierbar. Eine andere Möglichkeit besteht darin, Frame-Elemente zu verwenden, um einen neuen Bereich innerhalb der aktuellen Webseite zu erstellen und GET-Anfragen zu verwenden, um etwaige Ressourcen von Drittanbietern abzurufen. Nach Erhalt der Ressourcen wird der Inhalt im Frame jedoch durch die Same-Origin-Richtlinie eingeschränkt.

Eine idealere Möglichkeit, diese Einschränkung zu überwinden, besteht darin, ein dynamisches Skriptelement in eine Webseite einzufügen, dessen Quelle auf eine Dienst-URL in einer anderen Domäne verweist und die Daten in einem eigenen Skript abruft. Die Ausführung beginnt, wenn das Skript geladen wird. Dieser Ansatz funktioniert, weil die Same Origin Policy das dynamische Einfügen von Skripten nicht verhindert und das Skript so behandelt wird, als ob es von der Domäne geladen würde, die die Webseite bereitstellt. Wenn das Skript jedoch versucht, das Dokument aus einer anderen Domäne zu laden, gelingt es nicht. Glücklicherweise kann diese Technik durch Hinzufügen von JavaScript Object Notation (JSON) verbessert werden.

1. Was ist JSONP?

Um JSONP zu verstehen, müssen wir JSON erwähnen. Was ist JSON?

JSON ist eine Teilmenge der Objektliteralnotation von JavaScript. Da JSON eine Teilmenge von JavaScript ist, kann es in der Sprache ohne großen Aufwand verwendet werden.

JSONP(JSON mit Padding ) ist ein inoffizielles Protokoll, das die Integration von Skript-Tags auf der Serverseite und deren Rückgabe an den Client ermöglicht und so einen domänenübergreifenden Zugriff in Form von Javascript-Rückrufen ermöglicht (dies ist nur eine einfache Implementierung von JSONP).

2. Wozu dient JSONP?

Aufgrund der Einschränkungen der Same-Origin-Richtlinie lässt XmlHttpRequest nur Anfragen nach Ressourcen von der aktuellen Quelle (Domänenname, Protokoll, Port) zu, um domänenübergreifende Anfragen zu implementieren. Domänenanforderungen können über das Skript-Tag und dann im Dienst implementiert werden. Das Ende gibt JSON-Daten aus und führt die Rückruffunktion aus, wodurch domänenübergreifende Datenanforderungen gelöst werden.

3. Wie verwende ich JSONP?

Die folgende DEMO ist eigentlich eine einfache Darstellung von JSONP. Nachdem der Client die Rückruffunktion deklariert hat, fordert der Client über das Skript-Tag domänenübergreifende Daten vom Server an und der Server gibt dann die entsprechenden zurück Daten und Callback-Funktionen dynamisch ausführen.

HTML-Code (entweder):

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<script type="text/javascript"> 
  function jsonpCallback(result) { 
    //alert(result); 
    for(var i in result) { 
      alert(i+":"+result[i]);//循环输出a:1,b:2,etc. 
    } 
  } 
  var JSONP=document.createElement("script"); 
  JSONP.type="text/javascript"; 
  JSONP.src="http://crossdomain.com/services.php?callback=jsonpCallback"; 
  document.getElementsByTagName("head")[0].appendChild(JSONP); 
</script>

oder

Html-Code

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<script type="text/javascript"> 
  function jsonpCallback(result) { 
    alert(result.a); 
    alert(result.b); 
    alert(result.c); 
    for(var i in result) { 
      alert(i+":"+result[i]);//循环输出a:1,b:2,etc. 
    } 
  } 
</script> 

<script type="text/javascript" src="http://crossdomain.com/services.php?callback=jsonpCallback"></script>

JavaScript Der Link muss unterhalb der Funktion liegen.

Serverseitiger PHP-Code (services.php):

<?php 
//服务端返回JSON数据 
$arr=array(&#39;a&#39;=>1,&#39;b&#39;=>2,&#39;c&#39;=>3,&#39;d&#39;=>4,&#39;e&#39;=>5); 
$result=json_encode($arr); 
//echo $_GET[&#39;callback&#39;].&#39;("Hello,World!")&#39;; 
//echo $_GET[&#39;callback&#39;]."($result)"; 
//动态执行回调函数 
$callback=$_GET[&#39;callback&#39;]; 
echo $callback."($result)";

Wenn der obige JS-Clientcode mit jQuery implementiert wird, ist er auch sehr einfach.

$.getJSON
$.ajax
$.get

Implementierungsmethode des Client-JS-Codes in jQuery 1:

Js-Code

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
  $.getJSON("http://crossdomain.com/services.php?callback=?", 
  function(result) { 
    for(var i in result) { 
      alert(i+":"+result[i]);//循环输出a:1,b:2,etc. 
    } 
  }); 
</script>

Implementierungsmethode 2 des Client-JS-Codes in jQuery:

Js-Code

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
  $.ajax({ 
    url:"http://crossdomain.com/services.php", 
    dataType:&#39;jsonp&#39;, 
    data:&#39;&#39;, 
    jsonp:&#39;callback&#39;, 
    success:function(result) { 
      for(var i in result) { 
        alert(i+":"+result[i]);//循环输出a:1,b:2,etc. 
      } 
    }, 
    timeout:3000 
  }); 
</script>

Client-JS-Code in jQuery-Implementierungsmethode 3:

Js-Code

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
  $.get(&#39;http://crossdomain.com/services.php?callback=?&#39;, {name: encodeURIComponent(&#39;tester&#39;)}, function (json) { for(var i in json) alert(i+":"+json[i]); }, &#39;jsonp&#39;); 
</script>

Unter anderem wird jsonCallback vom Client registriert und ist eine Rückruffunktion nach dem Abrufen der JSON-Daten auf dem domänenübergreifenden Server.
http://crossdomain.com/services.php?callback=jsonpCallback
Diese URL ist die Schnittstelle für den domänenübergreifenden Server zum Abrufen von JSON-Daten. Der Parameter ist der Name der Rückruffunktion und der zurückgegebene Format ist

Js-Code

jsonpCallback({msg:'this is json data'})

Jsonp-Prinzip:

Registrieren Sie zuerst einen Rückruf auf dem Client und übergeben Sie ihn dann Rückrufname an den Server.

Zu diesem Zeitpunkt generiert der Server zunächst JSON-Daten.

Verwenden Sie dann die Javascript-Syntax, um eine Funktion zu generieren. Der Funktionsname ist der übergebene Parameter jsonp.

Schließlich werden die JSON-Daten direkt als Parameter in die Funktion eingefügt, wodurch ein JS-Syntaxdokument generiert und an den Client zurückgegeben wird.

Der Client-Browser analysiert das Skript-Tag und führt das zurückgegebene Javascript-Dokument aus. Zu diesem Zeitpunkt werden die Daten als Parameter an die vom Client vordefinierte Rückruffunktion übergeben (dynamische Ausführung der Rückruffunktion). >

Realisierung der Mobiltelefonpositionierung basierend auf H5-Ajax

Verwenden der H5-Funktion FormData zum Hochladen von Dateien ohne erfrischend

Eine ausführliche Erklärung der Verwendung verschiedener AJAX-Methoden

Das obige ist der detaillierte Inhalt vonAJAX domänenübergreifende Anforderung von JSONP zum Abrufen von JSON-Daten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!