使用script的src实现跨域和类似ajax效果
2014-11-10 00:00
555 查看
场景
假如有两个域名不同的服务器, a.com和b.com, 在b.com/b_return_js.php这个接口里, 可以获取一些数据。 当然,假如是b.com的页面里, 可以使用ajax, 直接请求这个接口, 但如果在a.com的页面里如果请求呢。
b_return_js.php的接口代码:
简单实现
有一种简单的方法就是在a.com下的页面里, 直接
这样在a.com的页面里就能直接获取到这个接口里返回的数据了。
但这里有一个缺陷,这个数据只能在页面加载的时候获取到, 假如我们想要使用ajax那种可以随时获取新的接口数据的方式就不太适用了, 例如点击一个按钮, 从这个接口获取数据局部刷新, 这种方式就有一些不合适了。
类ajax实现
其实实现上面说的类ajax的思路就是在ajax条件触发的时候, 重新生成一遍上面的那个标签, 从而再次从接口获取数据, 但实际上实现起来还是略有难度(至少对我来说费了不少功夫)。
上代码:
假如a.com/scriptSrc.php页面下有一个按钮
<input type="button" id="ajax_request_from_b" value="来自B.com的请求"/>
每次点击都会从b.com/b_return_js.php接口获取数据, 类似ajax的实现代码:
这样你每次点击按钮, 都会重新从接口获取一遍数据, 效果就类似于ajax, 但这是一种js跨域的方法实现, 虽然有些吃力不讨好, 但不失为一种思路。
假如有两个域名不同的服务器, a.com和b.com, 在b.com/b_return_js.php这个接口里, 可以获取一些数据。 当然,假如是b.com的页面里, 可以使用ajax, 直接请求这个接口, 但如果在a.com的页面里如果请求呢。
b_return_js.php的接口代码:
$a = array( array('username'=>'tony', 'age'=>25), array('username'=>'yimeng', 'age'=>23), array('username'=>'ermeng', 'age'=>22), array('username'=>'sanmeng', 'age'=>21), ); shuffle($a); echo 'var userdata = '.json_encode($a).';'; //一般如果是b.com的站内请求就直接返回json_encode($a)了, 但如果要用src属性实现跨域, 这里我们需要将该值赋给一个js变量, 保证在script标签加载后的页面里能获取到这个数据并使用。
简单实现
有一种简单的方法就是在a.com下的页面里, 直接
<script src="http://b.com/b_return_js.php"></script>
这样在a.com的页面里就能直接获取到这个接口里返回的数据了。
但这里有一个缺陷,这个数据只能在页面加载的时候获取到, 假如我们想要使用ajax那种可以随时获取新的接口数据的方式就不太适用了, 例如点击一个按钮, 从这个接口获取数据局部刷新, 这种方式就有一些不合适了。
类ajax实现
其实实现上面说的类ajax的思路就是在ajax条件触发的时候, 重新生成一遍上面的那个标签, 从而再次从接口获取数据, 但实际上实现起来还是略有难度(至少对我来说费了不少功夫)。
上代码:
假如a.com/scriptSrc.php页面下有一个按钮
<input type="button" id="ajax_request_from_b" value="来自B.com的请求"/>
每次点击都会从b.com/b_return_js.php接口获取数据, 类似ajax的实现代码:
function createScript() { //console.log(ele); ele.src = 'http://b.com/b_return_js.php'; ele.type = 'text/javascript'; ele.language = 'javascript'; } function getData() { console.log(userdata); } $('#ajax_request_from_b').click(function(){ //每次都需要重新加载这个script标签, 因此每次都要重新生成一个新的script标 签保证能从跨域服务器获取数据 if(ele && ele.parentNode) { //ele.parentNode.removeChild(ele); //这种删除不能将ele彻底从内存删除,只是移除了在dom中的位置 for (var property in ele) { delete ele[property]; //彻底删除 } } ele = document.createElement('script'); //这是一个新的ele createScript(); document.getElementsByTagName("head")[0].appendChild(ele); ele.onload = function(){getData()}; //script元素加载后方可获取userdata, 每次获取的都是随机顺序的用户信息 });
这样你每次点击按钮, 都会重新从接口获取一遍数据, 效果就类似于ajax, 但这是一种js跨域的方法实现, 虽然有些吃力不讨好, 但不失为一种思路。
相关文章推荐
- 使用script的src实现跨域和类似ajax效果
- 使用script的src实现跨域和类似ajax效果
- 使用script的src实现跨域和类似ajax效果
- 使用javascript ajax C#实现类似百度的搜索框效果
- AJAX跨域方法之一—使用<script>实现
- ajax实例:如何使用json+ajax的方法实现类似前端特效tab切换效果
- .NET在WebForm里实现类似WinForm里面TrackBar控件的效果(AJAX Control Toolkit的使用)
- 使用AjaxPro实现ajax效果
- 【Vegas原创】使用GreyBox组件实现ajax弹出式窗口效果
- dojo的connect方法使用与源代码剖析(在JavaScript里实现类似AOP的效果)
- AJAX与Jquery实现类似Google Suggest的提示框效果
- 在Ajax中使用Flash实现跨域数据读取的实现方法
- 不使用Ajax框架实现Ajax效果
- 实现类似google搜索效果,文本框输入智能提示,没有用ajax控件和第三方控件,完全手写代码
- 在Ajax中使用Flash实现跨域数据读取的实现方法
- dojo的connect方法使用与源代码剖析(在JavaScript里实现类似AOP的效果)
- Silverlight使用DataGrid的模板列(DataGridTemplateColumn)实现类似TreeListView控件的效果
- 使用AjaxPro实现ajax效果
- 在Ajax中使用Flash实现跨域数据读取
- 如何使用IFRAME来实现类似Ajax的技术----远程脚本