当前位置: 首页 > 编程笔记 >

使用script的src实现跨域和类似ajax效果

狄玮
2023-03-14
本文向大家介绍使用script的src实现跨域和类似ajax效果,包括了使用script的src实现跨域和类似ajax效果的使用技巧和注意事项,需要的朋友参考一下

场景

假如有两个域名不同的服务器, 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跨域的方法实现, 虽然有些吃力不讨好, 但不失为一种思路。

 类似资料:
  • 本文向大家介绍ajax跨域调用webservice的实现代码,包括了ajax跨域调用webservice的实现代码的使用技巧和注意事项,需要的朋友参考一下   最近ajax访问webservice遇到跨域的问题,网上搜索资料,总结如下(很多都是觉得人家总结不错的复制下来)   <<用JSON来传数据,靠JSONP来跨域>>   先上我的已实现代码:   前端代码:   服务端代码:   c#   

  • 本文向大家介绍jQuery Ajax实现跨域请求,包括了jQuery Ajax实现跨域请求的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了jQuery Ajax跨域请求的具体代码,供大家参考,具体内容如下 html 代码清单: 服务端 validate.php 代码清单: 效果图: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍JQuery Ajax跨域调用和非跨域调用问题实例分析,包括了JQuery Ajax跨域调用和非跨域调用问题实例分析的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JQuery Ajax跨域调用和非跨域调用问题。分享给大家供大家参考,具体如下: 现在的互联网技术发展的越来越快,我们在开发过程中遇到的问题也越来越多。比如当我们需要进行跨域访问数据的时候该如何进行开发?本篇博文就

  • 我们先从这么一个问题来引入我们本章节的学习 —— 什么是跨域请求? 1.跨域请求 简单来说,跨域请求就是一个域下的资源请求另外一个域下的资源。 同一个域,指的是,协议名、域名、端口号都一致。 举个例子来说,假如 “http://www.a.com” 下的 JavaScript 脚本发起 Ajax 请求 “http://www.a.com/ajax” ,由于 协议名 http 、域名 www.a.c

  • 问题内容: 我了解AJAX跨域策略。因此,我不能仅通过ajax HTTP请求调用“ http://www.google.com ”,并将结果显示在我的网站上。 我使用dataType“ jsonp”进行了尝试,这实际上可以工作,但是出现语法错误(显然是因为接收到的数据不是JSON格式的) 还有其他可能性可以从外部域接收/显示数据吗?iFrame是否遵循相同的政策? 问题答案: 使用AJAX获取跨域

  • 问题内容: Firefox和Internet Explorer都具有用户可以启用禁止的跨域调用的设置。 Safari和/或Chrome中是否有类似的设置或选项? 问题答案: 不确定野生动物园,但Chrome为此提供了命令行开关: 您可以在此处查看chrome命令行选项的完整列表(截至发布时!)。