What is the difference between json and jsonp? Comparison of the differences between json and jsonp

json and jsonp are easy to confuse when you first learn, so this article will introduce the difference between json and jsonp. Friends in need can refer to it.

Without further ado, let’s get straight to the point~

The difference between json and jsonp:

First of all, we should know that JSON is a kind of data exchange format, and JSONP is an unofficial cross-domain data exchange protocol created by developers. (Students who are unclear can read these two articles: What is jsonp? Detailed explanation of the principles of jsonp. What do and json mean? What is it used for? )

Let’s take a look at the comparison between json and jsonp

json is a text-based data exchange format used to describe complex data. For example, describing a student’s information can Write like this:

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

Then you can get the student's student ID and name through student.id and student.name.

json data format is commonly used in the field of front-end development. Its advantages are:

(1) Based on plain text, cross-platform transmission is simple;

(2) JavaScript is natively supported, and almost all backend languages ​​are supported;

(3) Lightweight data format, occupying very few characters, especially suitable for Internet transmission;

(4) Strong readability ;

(5) Easy to write and parse;

jsonp is a cross-domain interaction protocol, which can be understood as jsonp stipulates how to transmit json data. To put it simply, json does not support cross-domain, but js can cross-domain. Therefore, the json data is encapsulated on the server side with the js function name provided by the client, and then the function is provided to the client to call, thereby obtaining the json data. For example:

The client code is as follows:

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

The server code is as follows:

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();
}

Explanation: Although the client does not implement the userHandler function, it can still run successfully. The reason is When jquery processes jsonp type ajax, it automatically generates a callback function for you and takes out the data for the success attribute method to call.

This article ends here. For more exciting content, you can pay attention to the PHP Chinese website! ! !

The above is the detailed content of What is the difference between json and jsonp? Comparison of the differences between json and jsonp. For more information, please follow other related articles on the PHP Chinese website!