Explication détaillée des exemples de demandes de données inter-domaines utilisant JSONP avec JavaScript

Avant-propos

Récemment, en raison de besoins professionnels, j'ai dû introduire la phrase quotidienne d'iCiba sur la page. iCiba a ouvert son API au monde extérieur et l'interface renvoie les données json. page plus légère, je n'ai pas utilisé jQuery, mais j'ai directement écrit un morceau de code en pur js :

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

Après l'exécution, les données n'ont pas été obtenues, mais le message d'erreur suivant est apparu :

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.

C'est le problème des requêtes inter-domaines. Alors, qu’est-ce qu’une requête inter-domaines ? Pour des raisons de sécurité, les navigateurs adoptent la politique de même origine, qui permet uniquement l'interaction avec les interfaces du même domaine.

Le même domaine fait référence à :

Même protocole : tel que http ou https

Même nom de domaine : tel que http://konghy.cn/a ou http: / /konghy.cn/b

Même port : Si les deux sont 80 ports

En d'autres termes, l'utilisateur a ouvert la page : http://blog.konghy.cn, sous la page actuelle js envoie des requêtes de données à l'interface de http://blog.konghy.cn/XXX, ce qui est autorisé par le navigateur. Mais si vous envoyez une demande de données à : http://open.iciba.com/xxx, elle sera bloquée par le navigateur car il y a un appel inter-domaines.

La solution aux requêtes inter-domaines est JSONP (JSON avec rembourrage). La balise de script en HTML peut charger des js dans d'autres domaines. JSONP utilise la balise de script pour charger des données afin d'obtenir les données et de les exécuter en tant que JS. Utilisez ensuite une fonction de rappel pour extraire les données :

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

Vérifiez ensuite les informations et constatez que quelqu'un les a encapsulées :

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

Si vous utilisez jQuery, vous pouvez directement utiliser ajax pour demander des données :

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

Résumé

Ce qui précède est l'intégralité du contenu de cet article. J'espère que le contenu de cet article pourra apporter de l'aide aux études ou au travail de chacun. Si vous avez des questions, vous pouvez laisser un message pour communiquer.

Pour des exemples plus détaillés de JavaScript utilisant JSONP pour demander des données sur plusieurs domaines, veuillez prêter attention au site Web PHP chinois pour les articles connexes !