ホームページ  >  記事  >  ウェブフロントエンド  >  jsonとjsonpの違いは何ですか? json と jsonp の違いの比較

jsonとjsonpの違いは何ですか? json と jsonp の違いの比較

不言
不言オリジナル
2018-10-16 10:53:053101ブラウズ

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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。