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前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
随机推荐
- gsoap使用总结
WebService.soap.gsoap基本概念 WebService服务基本概念:就是一个应用程序,它向外界暴露出一个可以通过web进行调用的API,是分布式的服务组件.本质上就是要以标准的形式实 ...
- (笔记)ubuntu下安装jdk
注:此文章转自“http://www.cnblogs.com/a2211009/p/4265225.html”,本人使用的是第二种方式. ubuntu 安装jdk 的两种方式: 1:通过ppa(源) ...
- jsp中相对路劲
.代表当前目录 ..代表上一层目录 例如:如下文件,aliCashier.html要引入images下的图片,应该写成../../static/images/logo.png,此处会找到本地静态路径. ...
- Android 官方独立 adb / fastboot 工具包
https://dl.google.com/android/repository/platform-tools-latest-darwin.zip https://dl.google.com/andr ...
- Java基础知识点总结
前言 本文主要是我之前复习Java基础原理过程中写的Java基础知识点总结.Java的知识点其实非常多,并且有些知识点比较难以理解,有时候我们自以为理解了某些内容,其实可能只是停留在表面上,没有理解其 ...
- 1.11 flask
2019-1-11 16:14:34 还有一天flask剩下的就是爬虫了! 越努力,越幸运!永远不要高估自己! 别人玩,你在默默努力!上帝不会亏待你的! Flask-SQLAlchemy参考连接 ht ...
- rmq区间最值
时间复杂度O(NlogN)+O(Q) int a[N]; int dpmax[N][20],dpmin[N][20]; void first(int n) { mm(dpmax,0); mm(dpmi ...
- jquery操作checkBox 一次取消选中后不能再选中
$("input[type='checkbox']").each(function(){ $(this).attr("checked","checke ...
- EF Unknown column 'Project1.FamilyMembers_ID' in 'field list'
产生成的查询语句中有:Project1.FamilyMembers_ID 字段 原因:就是对象主键对象中有一个属性!
- fiddler 修改
很多新手学习fiddler抓包的同学们都会对https网站抓包难或者抓不起来的问题无所适从,想寻求解决办法,没问题,这节课就来解决你的疑问! 最典型的网站就是目前的百度网站了,百度在近些年采用了htt ...