js 跨域访问 找了好长时间
一直没时间玩js,看到douban网的开放api后,查了些文档,了解了一下 jsonp 跨域请求方式.跟大家分享一下。
其实 jsonp 是个很简单的一个东西。
主要是利用了 <script/> 标签对 javascript 文档的动态解析来实现。(其实也可以用eval函数)
来个超简单的例子:
首先是准备客户端的代码,
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" >
- <head>
- <title>Test Jsonp</title>
- <script type="text/javascript">
- function jsonpCallback(result)
- {
- alert(result.msg);
- }
- </script>
- <script type="text/javascript" src="http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback"></script>
- </head>
- <body>
- </body>
- </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>Test Jsonp</title><script type="text/javascript">function jsonpCallback(result){alert(result.msg);}</script><script type="text/javascript" src="http://www.goudiannao.com/jsonServerResponse?jsonp=jsonpCallback"></script>
</head>
<body>
</body>
</html>
其中 jsonCallback 是客户端注册的,获取跨域服务器上的json数据后,回调的函数。
http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback
这个 url 是跨域服务器取 json 数据的接口,参数为回调函数的名字,返回的格式为
- jsonpCallback({msg:'this is json data'})
jsonpCallback({msg:'this is json data'})
Jsonp原理:
首先在客户端注册一个callback, 然后把callback的名字传给服务器。
此时,服务器先生成 json 数据。
然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 jsonp.
最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。
客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时数据作为参数,传入到了客户端预先定义好的 callback 函数里.(动态执行回调函数)
转载于:https://www.cnblogs.com/wangdetian168/archive/2010/07/26/js-kuayu.html
js 跨域访问 找了好长时间相关推荐
- js跨域访问,No 'Access-Control-Allow-Origin' header is present on the requested resource
js跨域访问提示错误:XMLHttpRequest cannot load http://...... No 'Access-Control-Allow-Origin' header is prese ...
- JS跨域访问(ajax跨域)
好吧,国庆有点不务正业,玩了几天游戏,咳咳 感觉还不错,放松下,本来是打算学angular2的,国庆的时候刚好也看到vue2的正式版本发布,恩,最后都没看.. 正言 为什么会出现跨域? 跨域的产生是因 ...
- js 跨域访问问题解决方法
什么引起了ajax不能跨域请求的问题? ajax本身实际上是通过XMLHttpRequest对象来进行数据的交互,而浏览器出于安全考虑,不允许js代码进行跨域操作,所以会警告. 有什么完美的解决方案么 ...
- js跨域访问获取json数组并解析
跨域访问需要在服务器端配置,客户端才能够访问 服务器端: <?php //服务端返回JSON数据 $arr="[{'quesTitle':'关于专利申请','quesAskTi ...
- ASP.NET解决PDF.js跨域访问问题
PDF.js在访问pdf文件的时候,有时候会涉及到跨域问题,介绍一种.NET和PDF.js配合使用的方法. 前端代码: <script type="text/javascript&qu ...
- [Vue.js]跨域访问四种解决方法
2019独角兽企业重金招聘Python工程师标准>>> 报错: has been blocked by CORS policy: Response to preflight requ ...
- 什么是JS跨域访问 如何实现跨域访问
>什么是跨域? A网站想要获取B网站服务器上的资源,网站通过AJAX发送请求的时候,本地服务器地址与请求地址.协议类型(http).IP地址(域名).端口,三者有其一不同都称之为跨域请求资源. ...
- 关于JS跨域访问介绍
>什么是跨域? A网站想要获取B网站服务器上的资源,网站通过AJAX发送请求的时候,本地服务器地址与请求地址.协议类型(http).IP地址(域名).端口,三者有其一不同都称之为跨域请求资源. ...
- 什么是JS跨域访问?
>什么是跨域? A网站想要获取B网站服务器上的资源,网站通过AJAX发送请求的时候,本地服务器地址与请求地址.协议类型(http).IP地址(域名).端口,三者有其一不同都称之为跨域请求资源. ...
- 利用cors,实现js跨域访问Tomcat下资源
第一步:页面js代码: function createCORSRequest(method, url){var xhr = new XMLHttpRequest();if ("withCre ...
最新文章
- 从Python脚本判断服务器不可达,到Zabbix报警
- 《openssl编程》之BIO
- SiteServer CMS 新版本 V6.15(2020年6月1日发布)
- you are not authorized to view this page
- jQuery图片水平滑动延迟加载动画
- await原理 js_深入浅出node.js异步编程 及async await原理
- 又议android中的manifest清单文件
- [转载]U盘文件夹乱码无法删除的原因及解决方案
- GAN详解与PyTorch MINIST手写数字生成实战
- html5video拼接屏一部分黑屏,拼接屏常见问题与解决方法
- 天翼云服务器80、443等特殊端口无法访问原因记录
- vSphere虚拟网络02 - 虚拟交换机
- vin码识别(车架号识别)的工具
- 陶哲轩论文解析:从特征值到特征向量
- 免费好用的英语单词统计软件(带翻译功能)
- 机器学习第五章之决策树模型
- 【073】首届工控中国大会|翼辉为自主生态共建发声
- Lr_debug_message,Lr_output_message,Lr_error_message,Lrd_stmt,Lrd_fetch
- Bootstrap里的圆角outline
- BootStrap工具使用