核心是使用jsonp
- 应用场景:大型网站为了进行协同开发,或者出于扩展性的考虑,会做多域名的处理.
- 比如:个人中心 ucenter.xxx.com
- 首页 www.xxx.com
- 商城页 shop.xxx.com
- 在web端不用域名之间是不能直接存取session,cookie数据的,也不能直接通过ajax异步请求json数据。
为了解决这类问题,就出现了jsonp,专门解决跨域问题。
- 业务需求:
- 在商城页和首页需要判断用户的登录状态:
- 已登录显示用户头像
- 未登录显示登录按钮
核心代码
php
- 个人中心返回用户信息(接口)
public function getUserInfoJsonpAction() | |
{ | |
$data = Service_User_InfoModel::getUserInfo($this->_loginUserId); | |
$this->jsonp(1, $data); | |
} |
- jsonp的写法
/** | |
* 封装:jsonp跨域 | |
*/ | |
public function jsonp($errno = 0, $data = '', $message = '') | |
{ | |
$errno = intval($errno); | |
$result = array( | |
'errno' => $errno, | |
'message' => $message, | |
'data' => $data | |
); | |
echo $_GET['callback'] . "(" . json_encode($result) . ")"; | |
exit; | |
} |
js(基于seajs框架)
define('public.js', ['widget/search.js', 'module/home/notice.js'], function (require, exports, module) { | |
_url = { | |
userInfo: 'http://ucenter.xxx.com/api/getUserInfoJsonp/', | |
}; | |
//获取用户信息 | |
requestUrl(_url.userInfo, {}, function (userInfo) { | |
globalData.user_info = userInfo; | |
globalData.user_info.uid = userInfo.id; | |
console.log(userInfo); | |
}, true); | |
}); |