Maison > Article > interface Web > Le principe de Jsonp et sa méthode de mise en œuvre simple

Le principe de Jsonp et sa méthode de mise en œuvre simple

一个新手original: 2017-09-27 10:19:162277parcourir

Fonction

Jsonp是json的一种使用模式，用来解决主流浏览器的跨域数据访问的问题.因为同源策略，页面是无法直接与其他不同源的页面沟通的.利用Script元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。

Même origine : fait référence au même protocole, nom de domaine et port Lorsque la page du navigateur exécute un script, elle vérifie quelle page. auquel le script appartient. Oui, seuls les scripts qui ont la même origine que cette page seront exécutés, sinon la console signalera une erreur

Principe

Utiliser la balise Script sur le client pour. obtenir des données au format Jsonp (attraper avec JSONP Les données ne sont pas du JSON, mais du JavaScript arbitraire, exécuté avec un interpréteur JavaScript au lieu d'être analysé avec un analyseur JSON), et exécute en même temps une fonction de rappel jsonp Pour exécuter cette fonction de rappel, vous devez d'abord définir la fonction de rappel sur le client.

Implémentation simple

Il s'agit d'une implémentation relativement simple que j'ai trouvée :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
    <title>Top Customers with Callback</title></head><body>
    <p id="pCustomers">
    </p>
    <script type="text/javascript">
        function onCustomerLoaded(result, methodName) {
            var html = &#39;<ul>&#39;;            for (var i = 0; i < result.length; i++) {
                html += &#39;<li>&#39; + result[i] + &#39;</li>&#39;;
            }
            html += &#39;</ul>&#39;;
            document.getElementById(&#39;pCustomers&#39;).innerHTML = html;
        }    </script>    <script type="text/javascript" src="http://www.yiwuku.com/myService.aspx?jsonp=onCustomerLoaded"></script></body></html>

Par exemple, le client souhaite visiter http://www.yiwuku.com/ myService. aspx?jsonp=callbackFunction
Supposons que le client s'attend à renvoyer des données JSON : ["customername1", "customername2"]
Ensuite, les balises de script sont effectivement retournées au client : callbackFunction(["customername1"," nom du client2"])

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment créer un nouveau projet vueArticle suivant：Comment créer un nouveau projet vue

Articles Liés

Voir plus