Ausführliche Erläuterung von Beispielen für domänenübergreifende Datenanforderungen mithilfe von JSONP mit JavaScript

Vorwort

Vor kurzem musste ich aus beruflichen Gründen den täglichen Satz von iCiba für die Außenwelt öffnen, und die Schnittstelle gibt JSON-Daten zurück Seite leichter, ich habe kein jQuery verwendet, sondern direkt einen Code in reinem js geschrieben:

<script type="text/javascript">
 function httpGetAsync(theUrl, callback)
 {
 xmlHttp = null;
 if (window.XMLHttpRequest)
 {// code for IE7, Firefox, Opera, etc.
 xmlHttp = new XMLHttpRequest();
 }
 else if (window.ActiveXObject)
 {// code for IE6, IE5
 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
 }
 if (xmlHttp != null)
 {
 xmlHttp.onreadystatechange = function() {
 if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
 {
  callback(xmlHttp.responseText);
 }
 else
 {
  console.error("Problem retrieving XML data");
 }
 }
 xmlHttp.open("GET", theUrl, true); // true for asynchronous
 xmlHttp.setRequestHeader(&#39;Access-Control-Allow-Origin&#39;, &#39;*&#39;);
 xmlHttp.send(null);
 }
 else
 {
 console.error("Your browser does not support XMLHTTP.");
 }
 }
 
 function showIcibaDS(ds_data)
 {
 // show daily sentence
 content = ds_data.content;
 note = ds_data.note;
 document.write(content + &#39;<br>&#39;);
 document.write(note);
 }
 
 httpGetAsync("http://open.iciba.com/dsapi/", showIcibaDS);
</script>

Nach dem Ausführen wurden die Daten nicht abgerufen. Es erschien jedoch die folgende Fehlermeldung:

XMLHttpRequest cannot load http://open.iciba.com/dsapi/. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 501.

Das ist das Problem domänenübergreifender Anfragen. Was ist also eine domänenübergreifende Anfrage? Aus Sicherheitsgründen übernehmen Browser die Same-Origin-Policy, die nur die Interaktion mit Schnittstellen in derselben Domäne zulässt.

Gleiche Domäne bezieht sich auf:

Gleiches Protokoll: wie http oder https

Gleicher Domänenname: wie http://konghy.cn/a oder http: / /konghy.cn/b

Gleicher Port: Wenn beide 80 Ports sind

Mit anderen Worten, der Benutzer hat die Seite http://blog.konghy.cn unter der aktuellen Seite geöffnet js sendet Datenanfragen an die Schnittstelle von http://blog.konghy.cn/XXX, was vom Browser zugelassen wird. Wenn Sie jedoch eine Datenanfrage an http://open.iciba.com/xxx senden, wird diese vom Browser blockiert, da es sich um einen domänenübergreifenden Aufruf handelt.

Die Lösung für domänenübergreifende Anfragen ist JSONP (JSON mit Padding). JSONP verwendet das Skript-Tag, um Daten zu laden und als JS auszuführen Verwenden Sie dann eine Rückruffunktion, um die Daten zu extrahieren:

<script type="text/javascript">
 var cur_date = new Date();
 document.getElementById("cur_year").innerHTML = cur_date.getFullYear();
 
 function showIcibaDS(ds_data)
 {
 // show daily sentence
 content = ds_data.content;
 note = ds_data.note;
 ds_p = document.getElementById("iciba_ds")
 var content_span = document.createElement(&#39;span&#39;);
 var note_span = document.createElement(&#39;span&#39;);
 var br = document.createElement(&#39;br&#39;)
 content_span.innerHTML = content
 note_span.innerHTML = note
 ds_p.appendChild(content_span);
 ds_p.appendChild(br);
 ds_p.appendChild(note_span);
 }
</script>
<script type="text/javascript" src="http://open.iciba.com/dsapi/?callback=showIcibaDS"></script>

Überprüfen Sie dann die Informationen und stellen Sie fest, dass jemand sie gekapselt hat:

function jsonp(setting)
{
 setting.data = setting.data || {}
 setting.key = setting.key||'callback'
 setting.callback = setting.callback||function(){}
 setting.data[setting.key] = '__onGetData__'
 
 window.__onGetData__ = function(data) {
 setting.callback (data);
 }
 var script = document.createElement('script')
 var query = []
 for(var key in setting.data)
 {
 query.push(key + '=' + encodeURIComponent(setting.data[key]))
 }
 script.src = setting.url + '?' + query.join('&')
 document.head.appendChild(script)
 document.head.removeChild(script)
}
 
jsonp({
 url: 'http://photo.sina.cn/aj/index',
 key: 'jsoncallback',
 data: { page: 1, cate: 'recommend' },
 callback: function(ret) {
 console.log(ret)
 }
})

Wenn Sie jQuery verwenden, können Sie Ajax direkt zum Anfordern von Daten verwenden:

<script src="js/jquery-1.11.3.js"></script>
<script>
$(function(){
 $.ajax({
 async: true,
 type: "GET",
 dataType: &#39;jsonp&#39;,
 jsonp: &#39;callback&#39;,
 jsonpCallback: &#39;callbackfunction&#39;,
 url: "http://open.iciba.com/dsapi/",
 data: "",
 timeout: 3000,
 contentType: "application/json;utf-8",
 success: function(data) {
 console.log(data);
 }
 });
})
</script>

Zusammenfassung

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels jedem beim Lernen oder Arbeiten helfen kann. Wenn Sie Fragen haben, können Sie eine Nachricht hinterlassen.

Ausführlichere Beispiele für JavaScript, das JSONP verwendet, um Daten domänenübergreifend anzufordern, finden Sie auf der chinesischen PHP-Website für verwandte Artikel!