json和jsonp的使用区别

json和jsonp的使用区别

 

一.    跨域请求的概念

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

 json和jsonp的使用区别

二.    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.

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/113457.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • PHPmyadmin安装教程+遇到问题「建议收藏」

    PHPmyadmin安装教程+遇到问题「建议收藏」安装PHPMyAdmin遇到些问题,我的PHP版本是5.6的。开始安装了5.0的phpMyAdmin,报错了。,之后将phpMyAdmin减低到4.4.12版本,成功安装。安装过程遇到个问题【注意】localhost/phpmyadmin,这个访问的时候,localhost后面要加:端口号,不然无法访问一、下载PHPmyadmin打开PHP中文网中的PHPmyadmi…

  • pycharm更换版本_pycharm community怎么改成中文

    pycharm更换版本_pycharm community怎么改成中文旧版本的存在mangerepositories,但是最新的社区版去除了最新方式:更换清华源,并选择相信其他源:阿里云http://mirrors.aliyun.com/pypi/simple/中国科技大学https://pypi.mirrors.ustc.edu.cn/simple/豆瓣(douban)http://pypi.douban.com/simple/清华大学https://pypi.tuna.tsinghua.edu.cn/simple/……

  • 最短路——Floyd – Warshall核心算法的理解

    最短路——Floyd – Warshall核心算法的理解

  • sm2和sm4加密算法浅析

    sm2和sm4加密算法浅析sm2和sm4加密算法浅析一:SM2简介:SM2是国家密码管理局于2010年12月17日发布的椭圆曲线公钥密码算法,SM2为非对称加密,基于ECC。该算法已公开。由于该算法基于ECC,故其签名速度与秘钥生成速度都快于RSA。ECC256位(SM2采用的就是ECC256位的一种)安全强度比RSA2048位高,但运算速度快于RSA。SM2和RSA算法比较SM2性能更优更安全:密码复杂度高、处理速度快、机器性能消耗更小①:加密算法以及流程:输入:需要发送的消息为比特串M,klen为M的比特

  • java 网页提示被阻止怎么办,应用程序已被java安全阻止怎么办

    java 网页提示被阻止怎么办,应用程序已被java安全阻止怎么办我们经常会通过浏览器来浏览各种网页,然而有时候会遇到各种提示,例如就有不少具体步骤如下:1、完成JAVA版本更新,然后刷新有问题的网页页面,以排除JAVA版本问题引起JAVA安全阻止;2、从开始菜单中打开控制面板,我们需要进入控制面板来修改相应的配置;3、进入控制面板后,在控制面板中找到JAVA选项,如果找不到可将查看方式切换到大图标或图标即可;4、在JAVA控制面板中打开安全选项,并找到例外站点…

  • 三步就好,使用万用表来判断MOS管的好坏

    三步就好,使用万用表来判断MOS管的好坏判断MOS管的好坏的方法,对于购买了二手MOS管的情况,或者部分MOS管损坏的情况下,是比较有需要的。一些情况下,这种表面有烧毁痕迹的MOS管很容易判断为已损坏但另外一些情况下,只能通过万用表来判断MOS管,这里以N沟道MOS管来举例说明如何判断第一步使用二极管档位来测量MOS管,多数时候导通电压应该在4.5-5.5V之间,负极接D引脚,正极接S引脚如果导通电压过低或者接近0,那么说明已经损坏第二步测量D和S之间的电阻,如果不是.

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号