web前端学习历程--跨域问题
一、同源策略
一个页面的ajax只能获取这个页面相同源(协议、域名、端口号都必须相同)的数据。
二、jsonp方法
1、json和jsonp
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式
JSONP是JSON with Padding的略称。它是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问
2、解决跨域的原理:
首先,<script>标签的src属性并不被同源策略所约束,所以可以获取任何服务器上脚本并执行。创建一个回调函数(function callback(data)
),然后在远程服务上调用这个函数(callback({message:"success"})
)并且将JSON 数据形式作为参数传递,完成回调。
将JSON数据填充进回调函数,这就是JSONP的JSON+Padding的含义.
3、jquery实现jsonp
可以使用$.getJSON(url,[data],[callback])方法:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$.getJSON("http://localhost:20002/MyService.ashx?callback=?",function(data){//这样getJSON方法才会知道是用JSONP方式去访问服务,会自动生成一个函数名
alert(data.name + " is a a" + data.sex);
});
</script>
如需自定义函数名
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$.ajax({
url:"http://localhost:20002/MyService.ashx?callback=?",
dataType:"jsonp",
jsonpCallback:"person",//自定义的函数名
success:function(data){
alert(data.name + " is a a" + data.sex);
}
});
</script>
web前端学习历程--跨域问题的更多相关文章
- 【Java Web开发学习】跨域请求
[Java Web开发学习]跨域请求 ================================================= 1.使用jsonp ===================== ...
- web前端学习历程--排序
一.js排序方法 1.按字母顺序排列: arr.sort() 2.按数值从小到大: function sortNumber(a,b)//排序函数 { return a - b } var arr = ...
- Web前端学习笔记之前端跨域知识总结
0x00 前言 相信每一个前端er对于跨域这两个字都不会陌生,在实际项目中应用也是比较多的.但跨域方法的多种多样实在让人目不暇接.老规矩,碰到这种情况,就只能自己总结一篇博客,作为记录. 0x01 什 ...
- web前端学习就这9个阶段,你属于哪个阶段?
第一阶段:HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础:Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAsc ...
- Web前端学习攻略
HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础: Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAscript ...
- 【前端】Web前端学习笔记【1】
... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...
- Web前端学习笔记(001)
....编号 ........类别 ............条目 ................明细....................时间 一.Web前端学习笔记 ...
- 使用Web代理实现Ajax跨域
目前的工作项目分为前端和后台,双方事先约定接口,之后独立开发.后台每天开发完后在测试服务器上部署,前端连接测试服务器进行数据交互.前端和后台分开的好处是代码不用混在一个工程里一起build,互不干涉. ...
- 每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
随机推荐
- 【NLP】MT中BLEU评分机制
参考博客:https://blog.csdn.net/guolindonggld/article/details/56966200 原著论文:http://www.aclweb.org/antholo ...
- 字符集之在UTF-8中,一个汉字为什么需要三个字节?
(一)在UTF-8中,一个汉字为什么需要三个字节? UNICODE是万能编码,包含了所有符号的编码,它规定了所有符号在计算机底层的二进制的表示顺序.有关Unicode为什么会出现就不叙述了,Unico ...
- Houdini技术体系 过程化地形系统(一):Far Cry5的植被系统分析
背景 在大世界游戏里,植被(biome)是自然环境非常重要的组成部分,虽然UE4里的也有比较不错的地形+植被系统,但相比国外AAA级游戏的效果,还是有不少的差距,简介如下: UE4的植被分为( ...
- c++ 格式字符串说明
C++的格式化字符串经常用作格式化数字的输出.字符串合并和转换等等很多场合. 1. 格式化规定符 ━━━━━━━━━━━━━━━━━━━━━━━━━━ 符号 作用 ─ ...
- minicom for Mac 配置
安装:brew install minicom 配置: 串口是:dev/tty.usbserial minicons -s 配置一下: 流控要关掉,不然输入不了
- could not resolve property: leader_id of: pojo.Project
https://www.cnblogs.com/zhaocundang/p/9211270.html hibernate 双向1对多 出现问题 外键解析错误! log4j:WARN No append ...
- PXE:偷梁换柱,成功 启动 centos live
default menu.c32 timeout 1 ### 偷梁换柱,成功 label centos76-live menu label centos76-live from ftp kernel ...
- GoLang之错误处理
错误处理 error Go语言引入了一个错误处理的标准模式,即error接口,该接口定义如下: type error interface { Error() string } 对于大多数函数,如果要返 ...
- python设计模式之猴子补丁模式
1.所有书中都没有把猴子补丁作为一种设计模式来看待.因为设计模式的模式的命名是根据java中提炼出来的,语言方式决定了java绝对不会有也不需要有这种操作,不存在的.那自然设计模式不会包括猴子补丁模式 ...
- 赵雅智_Swift(4)_断言
可选能够让你推断值是否存在.你能够在代码中优雅地处理值缺失的情况.然而,在某些情况下,假设值缺失或者值并不满足特定的条件.你的代码可能并不须要继续执行.这时.你能够在你的代码中触发一个断言(asser ...