zoukankan      html  css  js  c++  java
  • json和jsonp的使用区别

     

    一.    跨域请求的概念

      JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。

     

    二.    json和jsonp

      JSON是一种基于文本的数据交换方式(不支持跨域),而JSONP是一种非官方跨域数据交互协议。

      使用json格式传递数据的客户端代码如下:

    $(function () {
        var user = {
            "username": "HelloWorld"
        };
    
        $.ajax({
            url: "http://localhost:8080/Changyou/UserInfo",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataType: "json",  //json不支持跨域请求,只能使用jsonp
            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("请求超时错误!");
            }
        })
    });
    

      然而,简单地使用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“传递的函数名封装导致的

      客户端代码如下:

    $(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属性方法来调用。

    json 是一种数据格式
    jsonp 是一种数据调用的方式。

    你可以简单的理解为 带callback的json就是jsonp.

  • 相关阅读:
    学习windows编程 day4 之视口和窗口
    学习windows编程 day4 之 映射模式
    学习windows编程 day4 之 盯裆猫
    Android自动化测试(UiAutomator)简要介绍
    UltraEdit正则表达式介绍及实例
    addr2line -f -e *.so 0x9d69
    Android执行shell命令
    Drawable、Bitmap、byte[]之间的转换
    Ubuntu 12.04 64bit 配置完android 5.0编译环境后出现“could not write bytes: Broken pipe.”而无法进入输入帐号密码的登陆界面
    CameraTest
  • 原文地址:https://www.cnblogs.com/lxwphp/p/8743608.html
Copyright © 2011-2022 走看看