跨域有好多种方式,会根据当前的业务逻辑选择对应方式
这里介绍了jsonp的方法的实现过程
准备工作
模拟两个不同的域(下面用a.com 和b.com 来讲解)
a.com站点下面创建一个client.html
b.com站点下面创建一个server.php
a.com站点通过js跨域请求b.com站点,我们利用script标签不受域访问限制特点进行请求(img标签同样有此特点),最主要的特点就是能执行请求返回来的js脚本
下面代码执行过程是
1、点击send按钮,创建script标签,为该标签src赋值后,添加到document中。
2、放到document中会立即请求b.com中的server.php ,请求的地址有个callback=resutl参数,这个result就是client.html中定义的一个js函数
3、server.php 返回一个'result("{\"message\",\"xxxxxx\"}")';
4、接着执行client.html中的js函数resut;
代码如下:
client.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>jsonpClient.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <script type="text/javascript"> function createScript(){ var script = document.createElement("script"); script.id="jsonid"; script.src="http://b.com/server.php?q=sss&callback=result"; document.body.appendChild(script); } function result(data){ var dataJson = eval("("+data+")"); document.write(dataJson.message); document.body.removeChild(document.getElementById("jsonid")); } <body> <input type="button" value="send" onclick="createScript()"/> </body> </html>
server.php
q = $_REQUEST['p']; callback = $_REQUEST['callback']; 处理过程省略 .... .... .... resutl="xxxxx"; echo callback+'("{\"message\",\"'+resutl+'\"}")';
相关推荐
跨域jsonp资料包.zip跨域jsonp资料包.zip跨域jsonp资料包.zip跨域jsonp资料包.zip跨域jsonp资料包.zip跨域jsonp资料包.zip跨域jsonp资料包.zip
day10单点登录Redis跨域jsonp共16页.pdf.zip
jsonp的原理 jsonp的使用,使用jsonp解决js跨域问题!
使用jsonp跨域获取json数据。Ajax获取JAVA服务器json数据。
主要介绍了SpringBoot跨域Jsonp和Cors的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
基于ajax方式的跨域请求jsonp的前后台代码
2、Javascript原生支持,后台语言几乎全部支持 3、轻量级数据格式,占用字符数量极少,特别适合互联网传递 4、可读性较强,虽然比不上XML那么一目了然,
ajax 跨域 jsonp等方式
解决跨域封装的jsonp
跨域_jsonp_原理,了解json的原理,等于我们掌握json的技术有帮助
03_跨域与JSONP
JSONP跨域和CORS跨域 什么是跨域? 跨域:指的是浏览器不能执行其它网站的脚本,它是由浏览器的同源策略造成的,是浏览器的安全限制! 同源策略 同源策略:域名、协议、端口均相同。 浏览器执行JavaScript脚本时,会...
使用JSONP完成HTTP和HTTPS之间的跨域访问
html通过 ajax jsonp跨域请求接收和传送数据 使用HTML页面与后台跨域交互,获得后台数据或传输数据给后台
该资源为ASP.NET网站开发技术中使用Ajax进行跨域请求时利用JSONP方案解决浏览器同源策略限制的源码,比较简单,仅供参考
ajax跨域CORS方案 JSONP跨域请求方案.zip
原生Js利用Jsonp跨域实现百度搜索功能
在js里使用Jsonp 实现跨域解决源代码实例
方式二:JSONP跨域 JSONP(JSON with Padding)是数据格式JSON的一种“使用模式”,可以让网页从别的网域要数据。根据 XmlHttpRequest 对象受到同源策略的影响,而利用 元素的这个开放策略,网页可以得到从其他来源...
06课 跨域、jsonp与cors