一、同源策略

一个页面的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前端学习历程--跨域问题的更多相关文章

  1. 【Java Web开发学习】跨域请求

    [Java Web开发学习]跨域请求 ================================================= 1.使用jsonp ===================== ...

  2. web前端学习历程--排序

    一.js排序方法 1.按字母顺序排列: arr.sort() 2.按数值从小到大: function sortNumber(a,b)//排序函数 { return a - b } var arr = ...

  3. Web前端学习笔记之前端跨域知识总结

    0x00 前言 相信每一个前端er对于跨域这两个字都不会陌生,在实际项目中应用也是比较多的.但跨域方法的多种多样实在让人目不暇接.老规矩,碰到这种情况,就只能自己总结一篇博客,作为记录. 0x01 什 ...

  4. web前端学习就这9个阶段,你属于哪个阶段?

    第一阶段:HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础:Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAsc ...

  5. Web前端学习攻略

    HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础: Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAscript ...

  6. 【前端】Web前端学习笔记【1】

    ... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...

  7. Web前端学习笔记(001)

    ....编号    ........类别    ............条目  ................明细....................时间 一.Web前端学习笔记         ...

  8. 使用Web代理实现Ajax跨域

    目前的工作项目分为前端和后台,双方事先约定接口,之后独立开发.后台每天开发完后在测试服务器上部署,前端连接测试服务器进行数据交互.前端和后台分开的好处是代码不用混在一个工程里一起build,互不干涉. ...

  9. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

随机推荐

  1. gsoap使用总结

    WebService.soap.gsoap基本概念 WebService服务基本概念:就是一个应用程序,它向外界暴露出一个可以通过web进行调用的API,是分布式的服务组件.本质上就是要以标准的形式实 ...

  2. (笔记)ubuntu下安装jdk

    注:此文章转自“http://www.cnblogs.com/a2211009/p/4265225.html”,本人使用的是第二种方式. ubuntu 安装jdk 的两种方式: 1:通过ppa(源) ...

  3. jsp中相对路劲

    .代表当前目录 ..代表上一层目录 例如:如下文件,aliCashier.html要引入images下的图片,应该写成../../static/images/logo.png,此处会找到本地静态路径. ...

  4. Android 官方独立 adb / fastboot 工具包

    https://dl.google.com/android/repository/platform-tools-latest-darwin.zip https://dl.google.com/andr ...

  5. Java基础知识点总结

    前言 本文主要是我之前复习Java基础原理过程中写的Java基础知识点总结.Java的知识点其实非常多,并且有些知识点比较难以理解,有时候我们自以为理解了某些内容,其实可能只是停留在表面上,没有理解其 ...

  6. 1.11 flask

    2019-1-11 16:14:34 还有一天flask剩下的就是爬虫了! 越努力,越幸运!永远不要高估自己! 别人玩,你在默默努力!上帝不会亏待你的! Flask-SQLAlchemy参考连接 ht ...

  7. rmq区间最值

    时间复杂度O(NlogN)+O(Q) int a[N]; int dpmax[N][20],dpmin[N][20]; void first(int n) { mm(dpmax,0); mm(dpmi ...

  8. jquery操作checkBox 一次取消选中后不能再选中

    $("input[type='checkbox']").each(function(){ $(this).attr("checked","checke ...

  9. EF Unknown column 'Project1.FamilyMembers_ID' in 'field list'

    产生成的查询语句中有:Project1.FamilyMembers_ID 字段 原因:就是对象主键对象中有一个属性!

  10. fiddler 修改

    很多新手学习fiddler抓包的同学们都会对https网站抓包难或者抓不起来的问题无所适从,想寻求解决办法,没问题,这节课就来解决你的疑问! 最典型的网站就是目前的百度网站了,百度在近些年采用了htt ...