一、同源策略

一个页面的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. 微信OAuth2.0网页授权设置一个域名需多个域名使用的问题

    最近遇到一个问题,一个微信公众号,需要在多个域名上使用OAuth2.0网页授权,但微信OAuth2.0网页授权回调域名只能设置一个. 解决办法: 通过多一次的跳转,解决了微信限制回调域名只能设置一个的 ...

  2. win2003远程桌面怎么切换到多用户?

    怎么用远程桌面切换server2003的多用户的问题?server2003操作系统的远程桌面是多用户的,就是你的机子远程桌面到服务器而其它机子也可以远程桌面,所以往往有时候你看不到原始的桌面的样子,所 ...

  3. 使用Nginx反向代理绕过域名备案详解

    之前笔者在景安云搞过一个Wordpress博客,然后域名备案也是在景安云上面搞的,后来又搞了一个阿里云的服务器,想把博客迁移到阿里云并且使用Ghost博客,然后使用二级域名链接到阿里云,结果出事了.景 ...

  4. mvc 根据模板导出excel,直接导出文件流

    1.c# /// <summary> /// 导出员工 /// </summary> /// <returns></returns> [HttpGet] ...

  5. maven jdk 版本配置

    一种是配置 pom.xml,一种是配置 settings.xml. 方式一:settings.xml 配置 打开 %maven%/conf/settings.xml 文件并编辑它(%maven% 表示 ...

  6. Dynamic attention in tensorflow

    新代码在contrib\seq2seq\python\ops\attention_decoder_fn.py 和之前代码相比 不再采用conv的方式来计算乘,直接使用乘法和linear 给出了两种at ...

  7. 【面试题】java面试题整理(有空再贴答案)

    面试题+基础 各家的面试题其实都大同小异, 掌握基础和原理,走到哪都不怕. 基础 leetcode上有一些总结,star数非常高了.贴上url https://github.com/CyC2018/C ...

  8. 从composer上在本地创建一个项目

    在想要创建项目的目录下,输入以下代码

  9. Java课程课后作业02之动手动脑

    一.编写一个方法,使用以上算法生成指定数目(比如1000个)的随机整数 数学算法原理: 可以使用的方法:Math中的random类以及random类,区别:Math中的random类只能用于生成随机数 ...

  10. 两矩阵各向量余弦相似度计算操作向量化.md

    余弦相似度计算: \cos(\bf{v_1}, \bf{v_2}) = \frac{\left( v_1 \times v_2 \right)}{||v_1|| * ||v_2|| } \cos(\b ...