json 和 jsonp

我理解的jsonp 可以称之为json-plus 也许人作者就是这个意思

Json : 一种基于文本的数据交换协议不支持跨域

　　使用json格式传递数据的例子：

$(function () {
    var user = {
        "username": "zhangsan"
    };

    $.ajax({
        url: "http://localhost:8080/zhaixt/userInfo",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        dataType: "json",  
        data: {
            user: JSON.stringify(user)
        },
        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("请求超时错误!");
        }
    })
});

摘自 Strugglion 的 json和jsonp的使用区别

然而，简单地使用json并不能支持跨域资源请求，为了解决这个问题，需要采用jsonp数据交互协议。众所周知，js文件的调用不受跨域与否的限制，因此如果想通过纯web端跨域访问数据，只能在远程服务器上设法将json数据封装进js格式的文件中，供客户端调用和进一步处理，这就是jsonp协议的原理。该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

简单的说，就是json不支持跨域，而js可以跨域，因此在服务器端用客户端提供的js函数名将json数据封装起来，再将函数提供给客户端调用，从而获得json数据。

开发过程中，如果出现类似 “Origin ****** is not allowed by Access-Control-Allow-Origin.” 的错误，则可能是由于json数据不支持跨域导致的，应考虑使用jsonp协议。

如果出现类似 ”SyntaxError: Unexpected token ':'. Parse error.“ 的错误，则可能是由于返回的json数据没有用”callback“传递的函数名封装导致的。

JsonP：支持跨域的文本数据交换协议

　　使用jsonp的客户端代码

$(function () {

    var user = {
        "username": "HelloWorld"
    };

    $.ajax({
        url: "http://localhost:8080/zhaixt/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();
}

跨域请求的概念：

感谢大佬分享： https://www.cnblogs.com/strugglion/p/5929821.html

猜你喜欢