Heim > Web-Frontend > js-Tutorial > Hauptteil

Was ist der Unterschied zwischen JSON und JSONP? Vergleich der Unterschiede zwischen JSON und JSONP

不言
Freigeben: 2018-10-16 10:53:05
Original
3104 Leute haben es durchsucht

json und jsonp sind beim ersten Lernen leicht zu verwechseln, daher wird in diesem Artikel der Unterschied zwischen json und jsonp vorgestellt. Freunde in Not können sich darauf beziehen.

Kommen wir ohne Umschweife gleich zur Sache~

Der Unterschied zwischen json und jsonp:

Das sollten wir zunächst einmal wissen JSON ist eine Art Datenaustauschformat und JSONP ist ein inoffizielles domänenübergreifendes Datenaustauschprotokoll, das von Entwicklern erstellt wurde. (Studenten, die sich nicht sicher sind, können diese beiden Artikel lesen: Was ist JSONP? Detaillierte Erklärung des Prinzips von JSONP und Was bedeutet JSON? Wofür wird es verwendet? )

Werfen wir einen Blick auf den Vergleich zwischen json und jsonp

json ist ein textbasiertes Datenaustauschformat, das zum Beschreiben komplexer Daten verwendet werden kann Schreiben so:

var student = {
 "id":"001", 
 "name":"张三", 
 "sex":"男", 
 "age":20 
 } 
 console.log(student.id); //001 
 console.log(student.name); //张三
Nach dem Login kopieren

Dann können Sie den Studentenausweis und den Namen des Studenten über student.id und student.name abrufen.

Das JSON-Datenformat wird häufig im Bereich der Front-End-Entwicklung verwendet. Seine Vorteile sind:

(1) Die plattformübergreifende Übertragung ist einfach 🎜> (2) JavaScript wird nativ unterstützt und fast alle Backend-Sprachen werden unterstützt

(3) Leichtes Datenformat, das nur sehr wenige Zeichen einnimmt, besonders geeignet für die Internetübertragung; (4) Sehr gut lesbar. (5) Einfach zu schreiben und zu analysieren Die JSON-Daten werden übertragen. Vereinfacht ausgedrückt unterstützt JSON keine domänenübergreifende Unterstützung, aber JS kann domänenübergreifend sein. Daher werden die JSON-Daten auf der Serverseite mit dem vom Client bereitgestellten JS-Funktionsnamen gekapselt und dann wird die Funktion dem Client bereitgestellt aufzurufen und so die JSON-Daten zu erhalten. Beispiel:

Der Client-Code lautet wie folgt:

$(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("请求超时错误!");
        }
    })
});
Nach dem Login kopieren

Der Server-Code lautet wie folgt:

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();
}
Nach dem Login kopieren

Hinweis: Obwohl der Client die userHandler-Funktion nicht implementiert, ist sie es Der Grund dafür ist, dass jquery beim Verarbeiten von JSONP-Typ-Ajax automatisch eine Rückruffunktion für Sie generiert und die Daten für den Aufruf der Erfolgsattributmethode herausnimmt.

Dieser Artikel endet hier. Weitere spannende Inhalte finden Sie auf der chinesischen PHP-Website! ! !

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen JSON und JSONP? Vergleich der Unterschiede zwischen JSON und JSONP. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage