ホームページ > 記事 > ウェブフロントエンド > Jsonpの原理と簡単な実装方法
Jsonpの原理と簡単な実装方法
- 一个新手オリジナル
- 2017-09-27 10:19:162281ブラウズ
機能
Jsonp是json的一种使用模式，用来解决主流浏览器的跨域数据访问的问题.因为同源策略，页面是无法直接与其他不同源的页面沟通的.利用Script元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。
同じオリジン: 同じプロトコル、ドメイン名、およびポートを指します。ブラウザ ページがスクリプトを実行するときに、スクリプトがどのページに属しているかを確認します。それ以外の場合、コンソールはエラーを報告します。
Principle
クライアントで Script タグを使用して JSONP 形式でデータを取得します (JSONP で取得されたデータは JSON ではなく、任意の JavaScript で実行されます)。 JSON 解析の代わりに JavaScript インタプリタ) (プロセッサ解析) を実行し、同時に jsonp コールバック関数を実行するには、まずクライアント側でコールバック関数を定義する必要があります。
簡単な実装
これは私が見つけた比較的単純な実装です:
<!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 = '<ul>'; for (var i = 0; i < result.length; i++) {
html += '<li>' + result[i] + '</li>';
}
html += '</ul>';
document.getElementById('pCustomers').innerHTML = html;
} </script> <script type="text/javascript" src="http://www.yiwuku.com/myService.aspx?jsonp=onCustomerLoaded"></script></body></html>たとえば、顧客は http://www.yiwuku.com/myService.aspx?jsonp=callbackFunction にアクセスしたいと考えています
顧客が戻ることを期待しているとしますJSON データ: [ "customername1","customername2"]
実際にクライアントに返されるスクリプト タグ: callbackFunction(["customername1","customername2"])
以上がJsonpの原理と簡単な実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。