出现跨域问题是因为浏览器的同源策略限制,客户端的应用程序一般不能与第三方服务器通信
,js代码只能访问其来源于同一服务器上的数据。
如果没有这个限制,另一域的另一个窗口中运行的js就有可能修改当前窗口中的html,如此将
无法判断自己是否正在查看的页面是否是来源于浏览器地址中显示的域。
所谓同源是指,域名,协议,端口相同。
同源策略通过隔离来实现对资源的保护。
有一个很巧妙的办法就是在页面中使用动态代码元素,代码的源指向服务地址并在自己的代码
中加载数据。
当这些代码加载执行的时候,同源策略就不会起到限制。
总结JSONP的基本原理即是:在本地定义一个callback,通过<script>标签的src属性获取远程
API的数据(将callback函数名传递过去),
远程服务器的API需要符合JSONP的规范,即将原本JSON格式的输出数据改写为javascript的函
数调用代码(callback为函数,原JSON数据为参数);
这样API返回的不再是JSON格式的数据而是JavaScript的代码。
在服务器端:echo $_GET['callbackparam'].'('.$ret.')';
在客户端使用类似于ajax调用:
$.ajax({
type : "GET",
dataType:"jsonp",
jsonp:"callbackparam",//用于服务器端返回的jsonp值之
前
jsonpcallback:"funCallBack"//函数名
success : function(data){}
});
其中,底层的处理是funCallBack(data){
success(data);
}
关于居中处理:margin:0px auto;
要想让居中效果起作用需要将设置居中的模块的宽度设定好