1 跨域问题
在一个A.com页面下通过ajax访问B.com的数据,浏览器出于安全考虑的同源策略,会出现数据不可访问的跨域问题
如下面的写法,代码在A.com的页面上,访问B的数据
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <script type="text/javascript"> function hello(result) { var i='hello world'; alert(i); alert(result); } var xmlhttp=new XMLHttpRequest(); xmlhttp.open("GET","http://B.com",false); xmlhttp.send(); var jsondata=xmlhttp.responseText; hello(jsondata); </script>
var jsondata=xmlhttp.responseText拿不到返回的数据。
2 跨域的解决-动态生成脚本
同源策略不阻止动态脚本的插入,于是可以改写成
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <script type="text/javascript"> function hello(result) { var i='hello world'; alert(i); alert(result); } var JSONP=document.createElement("script"); JSONP.type="text/javascript"; JSONP.src="http://B.com?callback=hello"; document.getElementsByTagName("head")[0].appendChild(JSONP); </script>
提供数据的服务端,需要生成以下规范的html:
$callback($data);
其实也就是一段js脚本语句,函数名为客户端传过来的,data为函数入参。