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

场景

假如有两个域名不同的服务器， a.com和b.com,在b.com/b_return_js.PHP这个接口里，可以获取一些数据。当然，假如是b.com的页面里，可以使用ajax,直接请求这个接口，但如果在a.com的页面里如果请求呢。

b_return_js.PHP的接口代码：

代码如下:

'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下的页面里，直接

代码如下:

这样在a.com的页面里就能直接获取到这个接口里返回的数据了。

但这里有一个缺陷，这个数据只能在页面加载的时候获取到，假如我们想要使用ajax那种可以随时获取新的接口数据的方式就不太适用了，例如点击一个按钮，从这个接口获取数据局部刷新，这种方式就有一些不合适了。

类ajax实现

其实实现上面说的类ajax的思路就是在ajax条件触发的时候，重新生成一遍上面的那个标签，从而再次从接口获取数据，但实际上实现起来还是略有难度(至少对我来说费了不少功夫)。

上代码：

假如a.com/scriptSrc.PHP页面下有一个按钮

PHP接口获取数据，类似ajax的实现代码：

代码如下:

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上送src,使用script的src实现跨域和类似ajax效果相关推荐

Django 【第十九篇】JS实现的ajax、同源策略和前端JSONP解决跨域问题
一.回顾jQuery实现的ajax 首先说一下ajax的优缺点优点:AJAX使用Javascript技术向服务器发送异步请求: AJAX无须刷新整个页面: 因为服务器响应内容不再是整个页面,而是页面 ...
ajax跨域情况解决方案,ajax跨域解决方案.docx
ajax跨域解决方案 ajax跨域解决方案篇一:使用JSONP解决Ajax跨域访问问题使用JSONP解决Ajax跨域访问问题 JSONP(JSON with Padding)是JSON的一种&qu ...
jsonp跨域的缺点ajax缺点,浅析JSONP解决Ajax跨域访问问题的思路详解
前几天,工作上有一新需求,需要前端web页面异步调用后台的Webservice方法返回信息.实现方法有多种,本例采用jQuery+Ajax,完成后,在本地调试了一切ok,但是部署到服务器上以后就出现问 ...
ajax跨域服务器404,Ajax和跨域
集成用多了连这都忘了系列(三) AJAX 1.什么是Ajax ajax=异步js和XML,是一种用于创建快速动态网页的的技术,可以在整个网页不刷新的情况下对网页的某一部分进行更新. 2.ajax工作原 ...
Ajax（jQuery封装），表单form提交（Ajax），art-template模板引擎，原生Ajax，XML和JSON，axios，跨域和JSONP，防抖和节流，HTTP协议
目录服务器基本概念 1.URL 2.URL地址的组成部分 3. 图解客户端与服务器的通信过程 4.网页中如何请求数据 5.资源的请求方式 Ajax jQuery中的Ajax 1. $.get()函数 ...
Ajax入门笔记（原生Ajax、jQuery、axios、fetch、跨域SONP、CORS）
文章目录一.基础知识 1.1AJAX简介 1.2 AJAX的特点 1.2.1 AJAX 的优点 1.2.2 AJAX 的缺点 1.3 XML简介 1.4 HTTP简介 1.4.1 请求报文 1.4. ...
原生ajax（常见的http状态码/同源-跨域）
原生ajax原理: ajax:一种请求数据的方式,不需要刷新整个页面: ajax的技术核心是 XMLHttpRequest 对象: ajax 请求过程:创建 XMLHttpReques ...
用Dojo实现Ajax请求：XH“.NET研究”R、跨域、及其他
在任何浏览器上方便地实现Ajax请求是每一个Ajax框架的初衷.Dojo在这方面无疑提供了非常丰富的支持.除了XMLHttpRequest之外,动态script.iframe.RPC也应有尽有,并且接 ...
php p3p跨域登录,php+ajax实现多域名跨域登录例子(基于P3P)
在以前如果我们要实现php+ajax实现多域名跨域登录的话很多朋友都碰到无法正常跨域登录问题,下面我来给大家解决跨域名登录问题,有需要的参考. 该同步登陆需求需满足以下三个关键点: 1)A域名下登陆的 ...

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

ajax上送src,使用script的src实现跨域和类似ajax效果相关推荐

最新文章

热门文章