json和jsonp的使用区别

举报
lxw1844912514 发表于 2022/03/27 03:56:38 2022/03/27
【摘要】   一.    跨域请求的概念   JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。   二.    json和jsonp   JSON是一种基于文本的数据交换方式(不支持跨域),而JSONP是一种非官方跨域数...

 

一.    跨域请求的概念

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

 

二.    json和jsonp

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

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


     
  1. $(function () {
  2. var user = {
  3. "username": "HelloWorld"
  4. };
  5. $.ajax({
  6. url: "http://localhost:8080/Changyou/UserInfo",
  7. type: "POST",
  8. contentType: "application/json; charset=utf-8",
  9. dataType: "json", //json不支持跨域请求,只能使用jsonp
  10. data: {
  11. user: JSON.stringify(user)
  12. },
  13. success: function (data) {
  14. $("#user_name")[0].innerHTML = data.user_name;
  15. $("#user_teleNum")[0].innerHTML = data.user_teleNum;
  16. $("#user_ID")[0].innerHTML = data.user_ID;
  17. },
  18. error: function () {
  19. alert("请求超时错误!");
  20. }
  21. })
  22. });

 

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

  客户端代码如下:


    
  1. $(function () {
  2. var user = {
  3. "username": "HelloWorld"
  4. };
  5. $.ajax({
  6. url: "http://localhost:8080/Changyou/UserInfo",
  7. type: "POST",
  8. contentType: "application/json; charset=utf-8",
  9. dataType: "jsonp", //json不支持跨域请求,只能使用jsonp
  10. data: {
  11. user: JSON.stringify(user)
  12. },
  13. jsonp: "callback", //传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名,默认为callback
  14. jsonpCallback: "userHandler", //自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
  15. success: function (data) {
  16. $("#user_name")[0].innerHTML = data.user_name;
  17. $("#user_teleNum")[0].innerHTML = data.user_teleNum;
  18. $("#user_ID")[0].innerHTML = data.user_ID;
  19. },
  20. error: function () {
  21. alert("请求超时错误!");
  22. }
  23. })
  24. });

 

   服务器端代码如下:


    
  1. protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  2. response.setContentType("application/json; charset=utf-8");
  3. String username = new String(request.getParameter("user").getBytes("ISO-8859-1"),"utf-8");
  4. String callback = new String(request.getParameter("callback").getBytes("ISO-8859-1"),"utf-8");
  5. System.out.println("接收到的数据:" + username);
  6. System.out.println("callback的值:" + callback);
  7. JSONObject user = JSONObject.fromObject(username);
  8. System.out.println("接收到的用户名:" + user.get("username"));
  9. JSONObject userinfo = new JSONObject();
  10. userinfo.put("user_name", "张鸣晓");
  11. userinfo.put("user_teleNum", "18810011111");
  12. userinfo.put("user_ID", "123456789098765432");
  13. PrintWriter out = response.getWriter();
  14. String backInfo = callback + "(" + userinfo.toString() + ")"; //将json数据封装在callback函数中提供给客户端
  15. out.print(backInfo);
  16. out.close();
  17. }

 

 

尽管客户端没有实现userHandler函数,但也能成功运行,原因就是jquery在处理jsonp类型的ajax时,自动帮你生成回调函数并把数据取出来供success属性方法来调用。

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

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

文章来源: blog.csdn.net,作者:lxw1844912514,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/lxw1844912514/article/details/100028681

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200