json と jsonp の違いと、ajax を通じて json データを取得した後の形式変換の簡単な分析

簡単に言うと、json はデータの文字列を返しますが、jsonp はスクリプト コード (関数呼び出しを含む) を返します。次に、この記事では、json と jsonp の違いと、ajax を通じて json データを取得した後の形式変換について説明します。必要な場合は参照してください

json と jsonp の違い (json は目的であり、jsonp は単なる手段です) を次のように紹介します:

簡単に言うと、json はデータの文字列を返しますが、jsonp はスクリプト コード (関数呼び出しを含む);

JSON は実際には JavaScript のオブジェクトであり、定性的には var obj={} と同じですが、量は無限に拡張できます。簡単に言うと、json は実際には JavaScript のオブジェクト (Object) と配列 (Array、実際にはオブジェクト) であり、これら 2 つの良い友達が存在し、あなたは私を埋め込み、私はあなたを n 層に埋め込み、多くの複雑なシミュレーションを行います。データ構造。

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.

foo({"name":"B","age":23});　　//为什么不直接写成json数据{"name":"B","age":23}呢，原因很简单，在js文件总得合乎js语法吧
//这也是为什么协议中明确规定处理数据的方法名必须命名为foo，因为B网站是在假定请求者的脚本中已经定义了数据处理方法foo的情况下返回数据；
//不然就会报foo is not defined错误

Webサイトのスクリプトには必須

function foo(data){
console.log(data);
//ToDo.. 
}

!紆余曲折はありましたが、Web サイト A と Web サイト B は非常に満足していました。その後、Web サイト C が Web サイト B のデータも取得する必要があると言い、Web サイト B に契約を渡しました。一見したところ、Web サイト C では、foo という名前が独自のスクリプト ファイルの 6868 行目で使用されており、スクリプトの隅々で使用されているため、Web サイト B は foo を変更することを決定しました。愚か者にとって、Web サイト A はすぐに立ち上がりました。Web サイト A は、さまざまな場所でデータを参照するために foo を使用していたためです。

上記の状況を回避するために、素晴らしい開発者たちは js ファイルを動的に生成する方法を使用しました: php のバージョンは次のとおりです:

open.php

<?php
header(&#39;Content-type: application/javascript&#39;);
$jsonCallback = htmlspecialchars($_REQUEST [&#39;callback&#39;]); //获取请求者自定义的回调函数名
$jsonData =&#39;{"name":"B","age":23}&#39;; //待返回的json数据
echo $jsonCallback . "(" . $jsonData . ")"; //输出jsonp格式的数据，即一行函数调用语句
?>

さて…、なぜ php が返せるのかというと、 js形式ファイル、Baidu。

Web サイト A は、変数を変更せずに 9a0351e6749377419245ad575f27db8f2cacc6d41bbb37262a98f745aa00fbf0 を使用してデータをリクエストし、それを A に返します。スクリプト ファイルの内容は次のとおりです:

foo({"name":"B","age":23}); //所谓的jsonp，就是一句函数调用，数据都被包裹传递到参数中了，千万别穿个马甲就不认识了 
网站C就用<script src="http://www.B.com/open.php?callback=blah"></script>来请求数据，返回给C的脚本文件内容是：
blah({"name":"B","age":23}); 
网站N就用<script src="http://www.B.com/open.php?callback=what"></script>来请求数据，返回给N的脚本文件内容是：
what({"name":"B","age":23});

問題は解決されました。全員が予期したデータを取得し、名前の競合を回避しました。

jsonp の完全な名前は、json with padding で、非常に鮮やかです。これは、他の Web サイトが要求できるように、json オブジェクトを js 構文に準拠した形式でラップします。つまり、json データが js にカプセル化されます。ファイル;

json は理想的なデータ交換形式ですが、ドメイン間で直接取得する方法がないため、json は正当な js ステートメントにラップ (パディング) され、js ファイルとして渡されます。これが json と jsonp の違いです。json は、この目的を達成するためによく使用されるメソッドです。もちろん、最終的に取得および処理されるのは json です。つまり、json は目的であり、jsonp は単なる手段です。 json は常に使用されますが、jsonp はドメイン間でデータを取得する場合にのみ使用されます。

json と jsonp の違いを理解した後、実際には、Ajax でのクロスドメイン データの取得は、同じソースからのものである場合は、直接取得するだけで簡単です。 -domain では、目的を達成するために遠回りする必要があります。

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等，具体使用时务必阅读服务端提供的有关接口使用的详细文档。

下面给大家介绍下由“夜未央0906”写的通过ajax获得json数据后格式的转换

在有些情况下获取到的json数据可能是string类型的，需要把其格式化为json对象才方便解析。

a）原生js通过ajax获取到的json

　　此时返回的数据默认是string型的，所以需要用eval()函数将其转化为json对象。需要注意函数内字符串的格式：eval(“(” + data+“)”)，因为返回的string是在{}里面的，eval会将大括号识别为js代码块开始和结束的标志，所以必须加上（），将其强制转化为对象来处理。

b）jquery获取

　　1：通过ajax()异步请求并把type设置为json，返回的就是json对象。

　　2：通过用与ajax()等价的$.getJSON(url,data1,function(data2,status,xhr){//......})方法获取的也是json对象。其中data1为连同请求发送的数据，data2为服务器返回的数据即json对象。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

Ajax请求和Filter配合案例解析

Ajax解决缓存的5种方法总结

ajax快速解决参数过长无法提交成功的问题

以上がjson と jsonp の違いと、ajax を通じて json データを取得した後の形式変換の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。