ホームページ > 記事 > ウェブフロントエンド > jsonとjsonpの違いは何ですか? json と jsonp の違いの比較
json と jsonp は最初に学習するときに混同しやすいため、この記事では json と jsonp の違いを紹介します。必要な友達は参考にしてください。
早速、本題に入りましょう~
json と jsonp の違い:
まず、次のことを知っておく必要があります。 JSON はデータ交換形式の一種で、JSONP は開発者によって作成された非公式のクロスドメイン データ交換プロトコルです。 (よくわからない学生は、次の 2 つの記事を読んでください: jsonp とは? jsonp の原理の詳細な説明。 と json は何を意味しますか? 何に使用されますか? )
json と jsonp の比較を見てみましょう
json は、複雑なデータを記述するために使用されるテキストベースのデータ交換形式です。たとえば、生徒の情報を記述することができます。次のように記述します:
var student = { "id":"001", "name":"张三", "sex":"男", "age":20 } console.log(student.id); //001 console.log(student.name); //张三
これで、student.id とstudent.name を通じて学生の学生 ID と名前を取得できます。
json データ形式は、フロントエンド開発の分野でよく使用されます。その利点は次のとおりです。
(1) プレーン テキストに基づいているため、クロスプラットフォームでの送信が簡単です。 ## (2) JavaScript がネイティブにサポートされており、ほとんどすべてのバックエンド言語がサポートされています。
(3) 占有文字数が非常に少ない軽量のデータ形式で、特にインターネット送信に適しています。 (4) 可読性が高い;
(5) 記述と解析が簡単;
jsonpは、jsonp がどのように規定しているかを理解できます。 jsonデータを送信します。簡単に言うと、jsonはクロスドメインに対応していませんが、jsはクロスドメインに対応しているため、クライアントから提供されたjsの関数名でjsonデータをサーバー側でカプセル化し、クライアントに関数を提供します。を呼び出して、json データを取得します。例:
クライアント コードは次のとおりです: $(function () {
var user = {
"username": "HelloWorld"
};
$.ajax({
url: "http://localhost:8080/Changyou/UserInfo",
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "jsonp", //json不支持跨域请求,只能使用jsonp
data: {
user: JSON.stringify(user)
},
jsonp: "callback", //传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名,默认为callback
jsonpCallback: "userHandler", //自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
success: function (data) {
$("#user_name")[0].innerHTML = data.user_name;
$("#user_teleNum")[0].innerHTML = data.user_teleNum;
$("#user_ID")[0].innerHTML = data.user_ID;
},
error: function () {
alert("请求超时错误!");
}
})
});
サーバー コードは次のとおりです:
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("application/json; charset=utf-8"); String username = new String(request.getParameter("user").getBytes("ISO-8859-1"),"utf-8"); String callback = new String(request.getParameter("callback").getBytes("ISO-8859-1"),"utf-8"); System.out.println("接收到的数据:" + username); System.out.println("callback的值:" + callback); JSONObject user = JSONObject.fromObject(username); System.out.println("接收到的用户名:" + user.get("username")); JSONObject userinfo = new JSONObject(); userinfo.put("user_name", "张鸣晓"); userinfo.put("user_teleNum", "18810011111"); userinfo.put("user_ID", "123456789098765432"); PrintWriter out = response.getWriter(); String backInfo = callback + "(" + userinfo.toString() + ")"; //将json数据封装在callback函数中提供给客户端 out.print(backInfo); out.close(); }
説明: クライアントは userHandler 関数を実装していませんが、その理由は、jquery が jsonp 型 ajax を処理するときに、コールバック関数が自動的に生成され、success 属性メソッドを呼び出すためのデータが取り出されるからです。
この記事はここで終わります。さらにエキサイティングなコンテンツについては、PHP 中国語 Web サイトに注目してください。 ! !以上がjsonとjsonpの違いは何ですか? json と jsonp の違いの比較の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。