html js跨域请求数据库,ajax跨域请求json数据

作者：matrix

被围观: 5,401 次

发布时间：2014-03-13

分类：零零星星 |

20 条评论 »

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

刚开始仅仅想获取一个他域的json数据，没想到牵扯到很多的问题。

每次都请求失败：

chrome面板的status为(canceled)

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

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

也就是ajax同源策略(同源是指域名，协议，端口相同)。

跨域可以实现在自己的网站之间传递数据。但是如果你想用“跨域”盗取其它网站的数据，那还是放弃吧。除非目标网站有给你提供JSONP的接口，或者有某些可以利用的漏洞，要不然真没什么办法实现。

跨域问题的产生，最主要原因是COOKIE的安全问题。因为COOKIE是属于一个域的，如果允许跨域，客户端浏览器上储存的COOKIE就可以被它的所有者之外的程序访问到。举个例子吧，假如没有跨域问题，我现在就可以给百度发送个HTTP请求，获取你在百度上登录的用户名。或者获取SessionID，直接冒充你的帐号登录。为了避免这些问题，所以跨域访问的限制是非常有必要的。

利用jsonp跨域

要跨域必须要有回调函数的接口，这里用jsonp试试

接口

ajax.load(

url, // 跨越请求的URL

success, // 回调函数，必须定义一个形参，用于接收后台返回的全局变量jsonp (约定后台返回如jsonp = {...}结构)

timestamp, // 传true会加一个时间戳，防止缓存，默认不加

);

示例：

function clk(){

Sjax.load(

'http://files.cnblogs.com/snandy/jsonp.js',

function(){

document.getElementById('p1').innerHTML = 'Hi, ' + jsonp.name;

}

);

}

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标签上。

参考：

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