ajax跨域请求json数据

作者:Matrix 被围观: 1,795 次 发布时间:2014-03-13 分类:码字型 零零星星 | 20 条评论 »

NOTICE:这是一个创建于 1003 天前的主题,其中的信息可能已经有所发展或是发生改变。

ajax
刚开始仅仅想获取一个他域的json数据,没想到牵扯到很多的问题。
每次都请求失败:
chrome面板的status为(canceled)

在Request Header这里显示CAUTION Provisional headers are shown

CAUTION Provisional headers are shown

 

后来才知道是ajax跨域问题导致:

也就是ajax同源策略(同源是指域名,协议,端口相同)。
跨域可以实现在自己的网站之间传递数据。但是如果你想用“跨域”盗取其它网站的数据,那还是放弃吧。除非目标网站有给你提供jsonp的接口,或者有某些可以利用的漏洞,要不然真没什么办法实现。
跨域问题的产生,最主要原因是COOKIE的安全问题。因为COOKIE是属于一个域的,如果允许跨域,客户端浏览器上储存的COOKIE就可以被它的所有者之外的程序访问到。举个例子吧,假如没有跨域问题,我现在就可以给百度发送个HTTP请求,获取你在百度上登录的用户名。或者获取SessionID,直接冒充你的帐号登录。为了避免这些问题,所以跨域访问的限制是非常有必要的。

利用jsonp跨域

要跨域必须要有回调函数的接口,这里用jsonp试试
html代码:
接口

  1. Sjax.load(  
  2.     url, // 跨越请求的URL  
  3.     success,  // 回调函数,必须定义一个形参,用于接收后台返回的全局变量jsonp (约定后台返回如jsonp = {...}结构)  
  4.     timestamp, // 传true会加一个时间戳,防止缓存,默认不加  
  5. );  

示例:

  1. <!DOCTYPE HTML>  
  2. <html>   
  3. <head>   
  4.     <meta charset="utf-8">   
  5.     <title>sjax_0.1.js by snandy</title>  
  6.     <script src="http://files.cnblogs.com/snandy/sjax_0.1.js"></script>  
  7. </head>   
  8. <body>  
  9. <p id="p1" style="background:gold;"></p>  
  10. <input type="button" value="Get Name" onclick="clk()"/>  
  11. <script type="text/javascript">  
  12.     function clk(){  
  13.         Sjax.load(  
  14.             'http://files.cnblogs.com/snandy/jsonp.js',   
  15.             function(){  
  16.                 document.getElementById('p1').innerHTML = 'Hi, ' + jsonp.name;  
  17.             }  
  18.         );        
  19.     }  
  20. </script>  
  21. </body>  
  22. </html>  

DEMO:

城通网盘:http://www.400gb.com/file/59748143
百度网盘:http://link.hhtjim.com/bdwl/1535826478/3238236832/%E8%B7%A8%E5%9F%9F%E8%AF%B7%E6%B1%82%E4%B9%8BJSONP.htm

说明:

请求的后台json地址是http://files.cnblogs.com/snandy/jsonp.js

内容为:jsonp = {name:'jack'};

其必须有“jsonp =”(作为回调函数接口),这个变量jsonp就是一个js对象。

DEMO的html实现一个简单的前后台交互功能,点击按钮“Get Name”,将获取到后台json数据上的name值显示在黄色背景的P标签上。

参考:

代码来源的Github项目:https://github.com/snandy/io

http://www.cnblogs.com/snandy/archive/2011/05/03/2034229.html

ajax如何跨域请求静态json:http://www.oschina.net/question/782091_89860

http://www.zhihu.com/question/19618769

http://www.cnblogs.com/chopper/archive/2012/03/24/2403945.html

http://www.web-tinker.com/article/20019.html

本文固定链接:http://www.hhtjim.com/ajax-cross-domain-request-json-data.html
Matrix
本文章由 Matrix 于2014年03月13日发布在码字型, 零零星星分类下,目前没有通告,你可以至底部留下评论。
转载请注明:ajax跨域请求json数据-HHTjim'S 部落格
关键字:, , , ,

有20 条评论 »

  1. 海南婚纱 海南婚纱 2016-3-6 20:48:20 +0800#10

    熟读唐诗三百首,不会作诗也会吟

  2. 小菜 小菜 2014-3-17 14:16:43 +0800#9

    看不懂,留下个脚印,方便以后查看

  3. 未知路 未知路 2014-3-17 9:02:55 +0800#8

    真羡慕你们这些搞脚本的。。

  4. sojh sojh 2014-3-16 19:31:37 +0800#7

    外行人路过支持一下~ 🙂

  5. tennfy tennfy 2014-3-16 14:53:44 +0800#6

    一直不是很懂ajax

    • Matrix Matrix Moderator 2014-3-16 15:34:17 +0800

      我也不懂。不过这次算是晓得点原理了:grin:

  6. 周小姐 周小姐 2014-3-16 14:12:03 +0800#5

    完全不知道再说什么

    • Matrix Matrix Moderator 2014-3-16 14:21:18 +0800

      吐槽 记录:grin:

  7. arno arno 2014-3-15 23:33:27 +0800#4

    我擦~我最近就是在弄这个

  8. 逗妇乳 逗妇乳 2014-3-15 17:36:27 +0800#3

    完全不懂的说

  9. 鬼少 鬼少 2014-3-15 6:28:33 +0800#2

    支持

  10. qq小清新头像 qq小清新头像 2014-3-14 10:42:26 +0800#1

    不是很懂。。

添加新评论 »

 😛 Sad 忧伤 👿 Smile 笑脸 😳 😀 😯 😮 😕 😎 😆 😡 😈 Roll Eyes 转眼珠 😉 💡 😐 😥 Mr Green 绿脸先生

NOTICE: You should type some Chinese word (like “你好”) in your comment to pass the spam-check, thanks for your patience!