ホームページ >ウェブフロントエンド >jsチュートリアル >jsonとjsonpの違いと使い方を詳しく解説
今回は json と jsonp の違いと使い方について詳しく説明します。 json と jsonp を使用する際の 注意点 について、実際のケースを見てみましょう。
簡単に言うと、json はデータの文字列を返しますが、jsonp はスクリプト コード (関数呼び出しを含む) を返します。次に、この記事では、json と jsonp の違いと、ajax 変換によって取得される json データの形式について説明します。必要な友達はそれを参照してください json と jsonp の違い (json は目的であり、jsonp は単なる手段です) を次のように紹介します。 簡単に言うと、json はデータの文字列を返しますが、jsonp はそれを返します。はスクリプト コード (関数呼び出しを含む); JSON は実際には json は人間にとって読み書きが簡単で、マシンにとっても解析と生成が容易です。機能する Web サイトのフロントエンドとバックエンドでは、頻繁に大量のデータを交換する必要があります。そして json は徐々に、フロントエンドとバックエンドの理想的なデータ交換言語になりました。上級のxmlについては、マイクロソフトのxpのように引退すべきだと思います。 同じオリジンでのフロントエンドとバックエンドのデータ交換形式 (同じオリジン戦略を理解していない場合は、Baidu にアクセスしてください) は間違いなく json を使用しているため、問題は、他の人の Web サイトで提供されたデータを取得するにはどうすればよいですか?つまり、ドメイン間でのデータの読み取りの問題です (他の Web サイトからデータを読み取る必要がないなどと言い過ぎないでください。信じてください、遅かれ早かれ必要になります)。答えは「ありえない」です。なぜなら、json は簡単に取得できる単なるテキスト形式だからです。この場合、インターネットの世界は混乱するでしょう。この問題に関する指定子は、最終的には、src 属性を指定できる img、script、iframe などのタグのみが、ドメインを越えて他人の Web サイト上のデータを取得できるようになります (画像、スクリプト、ソース ファイルは実際にはデータです)。例:<!--京东商品图片--> <img src="http://img30.360buyimg.com/jgsq-productsoa/jfs/t2407/323/1635505465/47386/f2d89d88/56615e00N7a475ee6.jpg" /> <!--百度CDN--> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>json を直接取得することは不可能のようですが、データを取得する他の方法はありますか?では、jsonp は賢明な開発者によって発見されたのですが、なぜそれが発明ではなく発見と言われているのでしょうか? それは、ajax の発見と同じように、新しいテクノロジーが関与していないからです。 jsonp の原理は次のとおりです。ウェブサイト A はウェブサイト B のデータを取得する必要があります。ウェブサイト B は、[1. を使用してデータをリクエストし、それを A に返します。スクリプト ファイルの内容は次のとおりです:
foo({"name":"B","age":23}); //所谓的jsonp,就是一句函数调用,数据都被包裹传递到参数中了,千万别穿个马甲就不认识了 网站C就用来请求数据,返回给C的脚本文件内容是: blah({"name":"B","age":23}); 网站N就用来请求数据,返回给N的脚本文件内容是: what({"name":"B","age":23}); 問題は解決されました。全員が予期したデータを取得し、名前の競合を回避しました。jsonp全名叫做json with padding,很形象,就是把json对象用符合js语法的形式包裹起来以使其它网站可以请求得到,也就是将json数据封装成js文件;
json是理想的数据交换格式,但没办法跨域直接获取,于是就将json包裹(padding)在一个合法的js语句中作为js文件传过去。这就是json和jsonp的区别,json是想要的东西,jsonp是达到这个目的而普遍采用的一种方法,当然最终获得和处理的还是json。所以说json是目的,jsonp只是手段。json总会用到,而jsonp只有在跨域获取数据才会用到。
理解了json和jsonp的区别之后,其实ajax里的跨域获取数据就很好理解和实现了,同源时候并没有什么特别的,直接取就行,跨域时候需要拐个弯来达到目的。
附上jquery中ajax请求json数据实例:
(同源):
$.ajax({ url:"persons.json", success:function(data){ console.log(data); //ToDo.. } });(跨域):
$.ajax({ url:"http://www.B.com/open.php?callback=?", dataType:"jsonp", success:function(data){ console.log(data); //ToDo.. } });jquery已把jsonp封装进ajax,很合理,因为毕竟绝大多数的jsonp请求都是ajax,关于jquery的ajax具体用法请自行百度,另外要注意的一点就是不同的网站提供的数据接口的$_REQUEST ['callback']中不一定绝对是callback也可能是cb,cbk等,具体使用时务必阅读服务端提供的有关接口使用的详细文档。
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读: