使用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跨域的方法实现， 虽然有些吃力不讨好， 但不失为一种思路。

赞 (0)

相关推荐

  • 跨域请求之jQuery的ajax jsonp的使用解惑

    跨域请求之jQuery的ajax jsonp的使用解惑

    直接执行了error方法提示错误--ajax jsonp之前并没有用过,对其的理解为跟普通的ajax请求差不多,没有深入了解:出现了这种错误,几经调试(检查后台的代码和js部分的属性设置)还是不行,让我感觉很是意外和不解.于是,决定仔细研究下ajax jsonp的使用,并将最后测试成功的学习经验和大家分享下! 首先,贴出可以成功执行的代码: (页面部分) 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional

  • Ajax跨域查询完美解决通过$.getJSON()实现

    原因:浏览器安全上做了限制,禁止ajax跨域获得数据. 解决方法:通过jquery提供的$.getJSON()可以跨域获得JSON格式的数据.优点:兼容性强. Java后台代码: 复制代码 代码如下: protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String callback =req.getParameter("cal

  • 用jQuery与JSONP轻松解决跨域访问的问题

    时间过得好快,又被拉回js战场时, 跨域问题这个伤疤又开疼了. 好在,有jquery帮忙,跨域问题似乎没那么难缠了.这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅了相关资料,算是解决了跨域问题..有必要记下来备忘. 跨域的安全限制都是指浏览器端来说的.服务器端是不存在跨域安全限制的,所以通过本机服务器端通过类似httpclient方式完成"跨域访问"的工作,然后在浏览器端用AJAX获取本机服务器端"跨域访问"对应的url.来间接完成跨域访问也是可以的

  • js跨域和ajax 跨域问题的实现思路

    js 要跨域的话,可以用: <script src="别的网站的js地址(这里的内空可以是动态生成的,如:aaa.jsp.bbb.aspx)都可以."></script>这样是可以从别的网站里面读取出数据的. 关键是看你灵不灵活,会不会用了. ajax要跨域的话,可以用服务器去别的网站取内容,如asp.net的: 复制代码 代码如下: public string GetUrlData(string url) { System.Net.HttpWebRequest

  • jquery的ajax和getJson跨域获取json数据的实现方法

    很多开发人员在使用jquery在前端和服务器端进行数据交互,所以很容易会认为在前端利用jquery就可以读取任何站点的数据了.近日在进行开 发时,因为要和第三方公司的一个项目进行数据的共享,因为考虑多不占用服务器的资源,遂决定直接在html进行数据的读取,不走服务器端进行中转了.然后 正好就遇到了浏览器端跨域访问的问题. 跨域的安全限制都是指浏览器端来说的,服务器端不存在跨域安全限制的问题. 目前浏览器端跨域访问常用的两种方法有两种: 1.通过jQuery的ajax进行跨域,这其实是采用的jso

  • JS跨域总结

    javascript跨域有两种情况: 1.基于同一父域的子域之间,如:a.c.com和b.c.com 2.基于不同的父域之间,如:www.a.com和www.b.com 3.端口的不同,如:www.a.com:8080和www.a.com:8088 4.协议不同,如:http://www.a.com和https://www.a.com 对于情况3和4,需要通过后台proxy来解决,具体方式如下: a.在发起方的域下创建proxy程序 b.发起方的js调用本域下的proxy程序 c.proxy将请

  • jquery下利用jsonp跨域访问实现方法

    复制代码 代码如下: $.ajax({ async:false, url: '', // 跨域URL type: 'GET', dataType: 'jsonp', jsonp: 'jsoncallback', //默认callback data: mydata, //请求数据 timeout: 5000, beforeSend: function(){ //jsonp 方式此方法不被触发.原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了 }, success: fu

  • 使用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',

  • js实现跨域的几种方法汇总（图片ping、JSONP和CORS）

    跨域 虽然有同源策略的存在,但是在js中跨域也依然很常见,有document.domain.window.name.图片ping.jsonp.CORS,在这里简单总结下图片ping.jsonp和CORS备忘. 图片ping 图片可以从任何URL中加载,所以将img的src设置成其他域的URL,即可以实现简单的跨域,可以使用onload和onerror事件来确定是否接受到了响应. var img=new Image(); img.src='http://www.jb51.net'; img.one

  • JSONP跨域GET请求解决Ajax跨域访问问题

    前几天,工作上有一新需求,需要前端web页面异步调用后台的Webservice方法返回信息.实现方法有多种,本例采用jQuery+Ajax,完成后,在本地调试了一切ok,但是部署到服务器上以后就出现问题了,后台服务调用没有响应,怎么回事?代码没怎么改动,唯一修改的地方就是jQuery的ajax方法中的url地址.难道是这里的问题,经过检查和调试,发现原来是同源策略在作怪,我们知道,JavaScript或jQuery是在Web前端开发中经常使用的动态脚本技术.在JavaScript中,有一个很重要

  • extjs_02_grid显示本地数据、显示跨域数据

    extjs_02_grid显示本地数据、显示跨域数据

    1.显示表格 http://img.blog.csdn.net/20140622133941015?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYWRhbV93enM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast <%@ page language="java" import="java.util.*" pag

  • jquery中ajax处理跨域的三大方式

    由于JS同源策略的影响,因此js只能访问同域名下的文档.因此要实现跨域,一般有以下几个方法: 一.处理跨域的方式: 1.代理 2.XHR2 HTML5中提供的XMLHTTPREQUEST Level2(及XHR2)已经实现了跨域访问.但ie10以下不支持 只需要在服务端填上响应头: header("Access-Control-Allow-Origin:*"); /*星号表示所有的域都可以接受,*/ header("Access-Control-Allow-Methods:G

  • JQuery 的跨域方法推荐_可跨任何网站

    因发现有不少博友发园内短信问及JS的跨域问题,我想很多程序员的脑海里面还认为JS是不能跨域的,其实这是一个错误的观点:有很多人在网上找其解决方法,教其用IFRAME去解决的文章很多,真有那么复杂吗?其实很简单的,如果你用JQUERY,一个GETJSON方法就搞定了,而且是一行代码搞定. 下面开始贴出方法. //跨域(可跨所有域名) $.getJSON("http://user.hnce.com.cn/getregion.aspx?id=0&jsoncallback=?",fun

  • AJAX的跨域与JSONP(为文章自动添加短址的功能)

    AJAX的跨域与JSONP(为文章自动添加短址的功能)

    什么是AJAX的跨域请求 出于安全的考虑,如果你要从www.a.com通过Ajax来请求另外一个网站www.b.com的内容,浏览器是不允许你这样做的(不理解这里的安全是指什么?想想如果没有这个限制的话,黑客可以做些什么).那什么样的情况下算是跨域?域名不同那当然算是跨域了,例如a.com向b.com发送请求,这当然就是跨域了,不允许的.不过子域名不同(例如sub.a.com向www.a.com发送请求)甚至是同域名不同端口(例如a.com:80向a.com:8080)也算是跨域的. 下面演示一

  • AJAX跨域请求之JSONP获取JSON数据

    Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索.使用 XMLHttpRequest 函数获取数据,它是一种 API,允许客户端 JavaScript 通过 HTTP 连接到远程服务器.Ajax 也是许多 mashup 的驱动力,它可将来自多个地方的内容集成为单一 Web 应用程序. 不过,由于受到浏览器的限制,该

  • 深入分析JSONP跨域的原理

    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为"Same- Origin Policy"(同源策略).这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档 在同一域下的内容. JavaScript这个安全策略在进行多iframe或多窗口编程.以及Ajax编程时显得尤为重要.根据这个策略,在baidu.com下的 页面中包含的JavaScript

随机推荐