Ausführliche Erklärung und einfache Anwendung des domänenübergreifenden Jsonp-Prinzips-js-Tutorial-php.cn

Ausführliche Erklärung und einfache Anwendung des domänenübergreifenden Jsonp-Prinzips

藏色散人

Freigeben： 2020-01-30 19:08:46

nach vorne

3284 Leute haben es durchsucht

Same Origin Policy des Browsers:

Same Origin Policy ist eine Konvention. Es handelt sich um eine bekannte Sicherheitsrichtlinie Von Netscape vorgeschlagen, der einschränkt, wie ein aus derselben Quelle geladenes Dokument oder Skript mit einer Ressource aus einer anderen Quelle interagieren kann. Dies ist ein wichtiger Sicherheitsmechanismus zum Isolieren potenziell schädlicher Dateien.

Definition des gleichen Ursprungs: Zwei Seiten haben den gleichen Ursprung, wenn ihr Protokoll, ihr Port (falls angegeben) und ihr Host gleich sind. Wir können es auch „Protokoll/Host/Port-Tupel“ oder einfach „Tupel“ nennen. („Tupel“, „Element“ bezieht sich auf einige Dinge, die zu einem Ganzen zusammengefasst sind, wie zum Beispiel (1, 2). heißt binär, (1, 2, 3) heißt ternär)

Wenn das Protokoll, der Port, der Host (Domänenname oder IP-Adresse, wenn es sich um eine IP-Adresse handelt, wird es als Stammdomänenname betrachtet) , Subdomain-Name, wenn einer davon unterschiedlich ist, wird unsere Anfrage domänenübergreifende Probleme haben.

Die folgende Tabelle enthält ein Beispiel für die Homologieerkennung relativ zu http://store.company.com/dir/page.html:

Ausführliche Erklärung und einfache Anwendung des domänenübergreifenden Jsonp-Prinzips

Durchbrechen Sie die Same-Origin-Richtlinienbeschränkungen:

1 Der src des Skript-Tags/der src des img-Tags oder der href des Link-Tag, unterliegen nicht der Same-Origin-Richtlinie

2. Statische Ressourcen, die mit src oder href verknüpft sind, sind im Wesentlichen eine Get-Anfrage

Was ist JSONP? Hängt es mit JSON zusammen?

Json (JavaScript Object Notation) ist ein leichtes Datenaustauschformat.

JSONP ist die Abkürzung für JSON with Padding. Dabei handelt es sich um ein inoffizielles Übertragungsprotokoll, das es ermöglicht, Script-Tags serverseitig zu integrieren und an den Client zurückzusenden, wodurch ein domänenübergreifender Zugriff in Form von Javascript-Callbacks ermöglicht wird.

Einfache Implementierung von JSONP:

HTML-Code: (läuft lokal unter http://zrcloud.com/test.html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Jsonp简单实例</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<h3>JSONP简单实例</h3>
<script type="text/javascript">
  $(function() {
    $.ajax({
      type:&#39;get&#39;,
      async:false,//同步请求
      url:&#39;http://mqcms.com/test.php&#39;,
      dataType:&#39;jsonp&#39;,
      jsonp:&#39;callback&#39;,//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
      jsonpCallback:&#39;test&#39;,//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
      success:function(data){
          console.log(data);
      }
    })
  })
</script>
</body>
</html>

Nach dem Login kopieren

Serverseitiger PHP-Code:

<?php
header(&#39;Content-Type:application/json; charset=utf-8&#39;);
$callback =isset($_GET[&#39;callback&#39;]) ? trim($_GET[&#39;callback&#39;]) : &#39;&#39;;
$arr=[&#39;name&#39;=>&#39;test&#39;,&#39;age&#39;=>18,&#39;sex&#39;=>1];
echo $callback.&#39;(&#39;.json_encode($arr).&#39;)&#39;;
?>

Nach dem Login kopieren

Ausführungsergebnis:

Ausführliche Erklärung und einfache Anwendung des domänenübergreifenden Jsonp-Prinzips

Hinweis: Warum habe ich die Testfunktion dieses Mal nicht geschrieben? Und es hat tatsächlich erfolgreich funktioniert!

Das ist das Verdienst von jQuery, wenn jquery den JSONP-Typ Ajax verarbeitet (obwohl JSONP auch in Ajax klassifiziert wird, sind sie eigentlich nicht dasselbe), generiert es automatisch Rückrufe für Ihre Funktion und holt die Daten heraus für die aufzurufende Erfolgsattributmethode.

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung und einfache Anwendung des domänenübergreifenden Jsonp-Prinzips. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!