Ajax操作如何实现跨域请求?
Ajax (XMLHttpRequest)请求受到同源策略的限制。
Ajax通过XMLHttpRequest能够与远程的服务器进行信息交互,另外XMLHttpRequest是一个纯粹的Javascript对象,这样的交互过程,是在后台进行的,用户不易察觉。
因此,XMLHTTP实际上已经突破了原有的Javascript的安全限制。
举个例子:
假设某网站引用了其它站点的javascript,这个站点被入侵并在javascript中加入获取用户输入并通过ajax提交给其他站点,这样就可以源源不断收集信息。
或者某网站因为存在漏洞导致XSS注入了javascript脚本,这个脚本就可以通过ajax获取用户信息并通过ajax提交给其他站点,这样就可以源源不断收集信息。
如果我们又想利用XMLHTTP的无刷新异步交互能力,又不愿意公然突破Javascript的安全策略,可以选择的方案就是给XMLHTTP加上严格的同源限制。
这样的安全策略,很类似于Applet的安全策略。IFrame的限制还仅仅是不能访问跨域HTMLDOM中的数据,而XMLHTTP则根本上限制了跨域请求的提交。(实际上下面提到了CORS已经放宽了限制)
随着Ajax技术和网络服务的发展,对跨域的要求也越来越强烈。下面介绍Ajax的跨域技术。
(1)JSONP (JSON with Padding)
JSONP(JSONP是JSON的一种“使用模式”),利用script标签的src属性(浏览器允许script标签跨域)。我们知道
JSONP就是利用
这里需要明确的一点是:所谓的域跟js的存放服务器没有关系,比如baidu.com的页面加载了google.com的js,那么此js的所在域是baidu.com而不是google.com。也就是说,此时该js能操作baidu.com的页面对象,而不能操作google.com的页面对象。
如果还不太明白,这里再详细解释一下:因为通过script标签引入的js是不受同源策略的限制的(正如前文提到的baidu.com的页面加载了google.com的js)。所以我们可以通过script标签引入一个js或者是一个其他后缀形式(如PHP,jsp等)的文件,此文件返回一个js函数的调用,如返回JSONP_getUsers(["paco","john","lili"]),也就是说此文件返回的结果调用了JSONP_getUsers函数,并且把["paco","john","lili"]传进去,这个["paco","john","lili"]是一个用户列表。那么如果此时我们的页面中有一个JSONP_getUsers函数,那么JSONP_getUsers就被调用到,并且传入了用户列表。此时就实现了在本域获取其他域数据的功能,也就是跨域。
eg:
1
2
3
4
5
Title6
7
8
Index
9
10
11
12
13 function JqAjax() {14 $.ajax({15 url:'http://www.jxntv.cn/data/jmd-jxtv2.html',16 type:'GET',17 dataType:'jsonp',18 jsonp: 'callback',19 jsonpCallback: 'list',20 success: function (param) {21 $.each(param.data,function (i) {22 var item =param.data[i];23 var str = "
"+ item.week +"
";24 var bq = $('#container');25 bq.append(str);26 $.each(item.list,function(j){27 var temp = " "+item.list[j].time+"---- " + item.list[j].name +"";28 bq.append(temp);29 });30 bq.append("
");31 })32 }33 })34 }35
36