ajax跨域原理以及jsonp使用
jsonp介绍:
JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。
由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外。
利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。
用 JSONP 抓到的资料并不是 JSON,而是任意的JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。
默认是由与浏览器的原因使得ajax不能跨域访问:
本站域名:http://www.py_test1.com:8080/index,
跨站域名:http://www.py_test2.com:8081/index
<body><div><input type="button" οnclick="ajax_test();" value="跨域"/><p>响应:</p><div class="content"></div></div> </body> </html> <script>function ajax_test(){$.ajax({url:'http://www.py_test2.com:8081/index',dataType:'text',type:'post',data:{'k1':'v1'},success:function(data){$(".content").text(data);}})}</script>
XMLHttpRequest cannot load http://www.py_test2.com:8081/index. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.py_test1.com:8080' is therefore not allowed access.
实际上信息已经发送到跨站域名网站中,若是信息正确,可以被处理,只是在消息回复到本站时,被浏览器进行了处理报错(同源策略)
浏览器对于ajax阻止跨域,对于script块,img块,iframe块等,其中具有src属性是允许跨域(相当于发送get请求获得资源),在许多网站中资源引入都使用跨域来完成
所以可以通过这些src属性进行跨域访问
办法一:JSONP方法
<input type="button" οnclick="jsonP_test();" value="jsonP跨域"/>
function jsonP_test(){var ele=document.createElement('script');ele.setAttribute('src','http://www.py_test2.com:8081/index');//添加以后就进行跨域操作 document.head.appendChild(ele);//然后就不需要存在这个标签了 document.head.removeChild(ele);}
但是这里面获取的资源只是简单的在script中进行了添加
<script>//t2.get 通过get方法跨域到http://www.py_test2.com:8081/index中请求到的某些数据,无法使用 </script>
但是如果服务端,即跨域端发送某些函数
<script>//alert(123) 会在页面直接调用弹出窗口</script>
于是可以尝试客户端与服务端进行协商:
客户端定义好函数,服务端在传递的数据中调用该函数,并且在函数接口中传递参数
客户端定义函数:
function func(dt){console.log(dt);}
服务端调用并传参:
self.write('func([11,22,33]);')
即可在客户端对传递的数据进行处理。
方法二:对ajax进行修改
function jsonPajax2(){$.ajax({url:'http://www.py_test2.com:8081/index',dataType:'jsonp',jsonpCallback:'func',//发送成功后会自动执行这个函数,不写也会执行,只不过有时候会用到jsonp,需要和jsonpcallback联合使用//jsonp:'callback',//会把jsonpCallBack中的数据传送到服务端,服务端就可以对接收的数据进行动态处理,不需要知道客户端的函数名,直接对接收的数据和需要传递的数据进行拼接就可以 });}
这里需要客户端和服务端进行函数名称保持一致,二服务端似乎对于这个函数名并不是非常感冒,要是传入其他函数名那么久不可用了,复用性太差。所以考虑通过传参将前端的函数名传入服务端,进行灵活调用,来组成字符串
就有了
function jsonPaJax(){//是jquery对上述jsonp方法的实现和扩展 $.ajax({url:'http://www.py_test2.com:8081/index',dataType:'jsonp',jsonp:'callback',//会把jsonpCallBack中的数据传送到服务端,服务端就可以对接收的数据进行动态处理,不需要知道客户端的函数名,直接对接收的数据和需要传递的数据进行拼接就可以jsonpCallback:'funcx',//发送成功后会自动执行这个函数,不写也会执行,只不过有时候会用到jsonp,需要和jsonpcallback联合使用 });}
客户端随便定义一个函数,服务端在使用的时候只需要知道这个函数名是在参数callback中,进行调用组合,返回即可
def get(self):#print(self.request.arguments)获取全部参数callback=self.get_argument('callback',None)self.write('%s([11,22,33]);'%func)
注意若是客户端jsonpCallback大小写写错,在服务端的callback中会出现'callback': [b'jQuery20004196553791305502_1520586446327']这种情况。
总结:实际上方法二就是在传入参数中进行了修改,我们也可以写成
function jsonPaJax(){//是jquery对上述jsonp方法的实现和扩展 $.ajax({url:'http://www.py_test2.com:8081/index?callback=func',dataType:'jsonp',//jsonp:'callback',//会把jsonpCallBack中的数据传送到服务端,服务端就可以对接收的数据进行动态处理,不需要知道客户端的函数名,直接对接收的数据和需要传递的数据进行拼接就可以jsonpCallback:'func',//发送成功后会自动执行这个函数,不写也会执行,只不过有时候会用到jsonp,需要和jsonpcallback联合使用 });}
或者改变方法一:
function jsonP_test(){var ele=document.createElement('script');ele.setAttribute('src','http://www.py_test2.com:8081/index?callback=func');//添加以后就进行跨域操作 document.head.appendChild(ele);//然后就不需要存在这个标签了 document.head.removeChild(ele);}
转载于:https://www.cnblogs.com/ssyfj/p/8534169.html
ajax跨域原理以及jsonp使用相关推荐
- ajax跨域原理以及解决方案
ajax跨域原理以及解决方案 参考文章: (1)ajax跨域原理以及解决方案 (2)https://www.cnblogs.com/bojuetech/p/5895767.html (3)https: ...
- 【PHP】Ajax跨域解决方案 、jsonp、cors
[PHP]Ajax跨域解决方案 .jsonp.cors 参考文章: (1)[PHP]Ajax跨域解决方案 .jsonp.cors (2)https://www.cnblogs.com/xuzhengz ...
- vue-resource ajax跨域,ajax 跨域请求 vue-resource jsonp跨域
aj体朋几一级发等点确层数框的很屏果行4带域ax 跨域请求 vue-resource j直分调浏器代,刚求的一学础过功互有解小久宗点差维含数如数围请sonp跨域 最近在学习vue.js 碰到个ajax ...
- jsonp解决ajax跨域问题,用JSONP解决ajax跨域问题
JSONP:JSON With Padding 要点: 1.script标签 2.用script标签加载资源是没有跨域问题的 概要: 在资源加载进来之前先定义一个函数,这个函数接受一个参数(数据),函 ...
- JSON和JSONP【JS+AJAX跨域原理和实现】
前言 由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socke ...
- Ajax跨域请求解决方案——jsonp
转自:http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html 1.一个众所周知的问题,Ajax直接请求普通 ...
- [妙味Ajax]第三课:AJAX跨域解决方案:JSONP
知识点总结: JSONP(JSON with Padding): 1.script标签 2.用script标签加载资源是没有跨域问题的 在资源加载进来之前定义好一个函数,这个函数接收一个参数(数据), ...
- vue-resource ajax跨域,基于Vue-resource jsonp跨域问题的解决方法_婳祎_前端开发者
最近在学习 关于什么是jsonp,以及为什么要用jsonp我就不多说了,不明白的同学自行百度一下. 我们先来说一下 这里我以json数据为例,首先我们通过 $.get可以直接得到一个我们想要的对象,但 ...
- 前端筑基篇(一)-ajax跨域原理以及解决方案
由于内容较老,不是markdown编辑器,懒得更新了,参考最新地址: https://segmentfault.com/a/1190000012469713 转载于:https://www.cnblo ...
- ajax跨域请求Jsonp实现,使用jsonp实现ajax跨域请求
Jsonp(JSON with Padding)是资料格式 json 的一种"使用模式",可以让网页从别的网域获取资料. 由于同源策略,一般来说位于 server1.example ...
最新文章
- auto自动类型推断
- 把Spring Boot项目打为可执行jar包
- JVM 内存区域大小参数设置
- Android录制音频的三种方式
- 为何身为程序员的你,不选择开源?
- Android获取CPU信息(CPU名字和主频)
- AcWing 798. 差分矩阵
- Python中List,tuple,Dictionary之间的区别
- php 读取js文件,JS中如何读取文件
- Selenium2Library库文件的使用和简析
- excel常用快捷键
- 迷宫算法总结(最短路径)
- 如何免费将XPS转换为PDF格式
- google的搜索技巧(很全的)
- python中numpy中的shape和get_shape解析
- CNN神经网络猫狗分类经典案例
- 基于微信小程序的todo番茄钟设计与实现源码
- OJ笔记 18939 最长单词
- Icon Status CDS视图 添加信号灯状态 Fiori Element- Criticality
- poi编辑word中的chart,对图表数据替换,并刷新图表
热门文章
- matlab 分水岭法,matlab中的分水岭算法
- Tensorflow训练简单神经网络
- x.view(-1,4)
- vnr懒人版教程_凉皮懒人做法,不揉面不洗面,配方配料无保留,简单快速又好吃...
- python实现xgboost算法
- 如何手动优化机器学习模型超参数
- sublimeText3安装、激活、环境配置与代码补全神器Kite安装配置
- python实现不使用额外空间去除重复元素
- 单独学java_自学Java的几大误区是什么
- android刷新界面的几种方法,Android UI更新的几种方法