1. 同源策略

ajax之所以需要“跨域”,罪魁祸首就是浏览器的同源策略。即,一个页面的ajax只能获取这个页面相同源或者相同域的数据。

如何叫“同源”或者“同域”呢?——协议、域名、端口号都必须相同。例如:

http://google.comhttps://google.com 不同,因为协议不同;

http://localhost:8080http://localhost:1000 不同,因为端口不同;

http://localhost:8080https://google.com 不同,协议、域名、端口号都不同,根本不是一家的。

根据同源策略,我自己做的一个网页 http://localhost:8080/test.html 就无法通过ajax直接获取 http://google.com 的数据。

例如,我用ajax去访问一个不同域的页面,错误结果是这样的:

大家想想,这样其实也有道理。如果没有同源策略,你我都可以随便通过ajax直接获取其他网站的信息,这还不乱套了。。。我自己做一个搜索界面,搜索时直接用ajax从百度获取数据,那不成了小偷了。。。

但是跨域访问是少不了的,http://mail.163.com 的网页可能需要从 http://news.163.com 域下获取新闻信息,那怎么办?——开始咱们的跨域之旅。(当然用iframe也可以实现)

2. 从“盗链”说起

互联网的许多网站之间图片相互盗链,A网站网页的img.src直接链接到B网站的图片地址,这是常有的事儿。说到“盗链”,大家第一想到的可能是如何去防止盗链,今儿咱不管那个。

你再想想“盗链”和“同源策略”这两个词之间有什么关系?——对,矛盾!既然都“同源策略”了,怎么还能“盗链”呢?

世间万物都有矛盾,有矛盾了照样可以和谐共处,并不一定非要你死我活。

重点:<img>的src(获取图片),<link>的href(获取css),<script>的src(获取javascript)这三个都不符合同源策略,它们可以跨域获取数据。因此,你可以直接从一些cdn上获取jQuery,并且你网站上的图片也随时可能被别人盗用,所有最好加上水印!

而我们今天的主角——jsonp——就是因为<script>的src不符合同源策略而来的。

3. JSONP

例如,域名 http://a.com 下有一个 http://a.com/test.html 网页,域名 http://b.com 下有一个 http://b.com/data.html 网页和 http://b.com/alert.js 文件。

引导第一步:简单引用js

编写 http://b.com/alert.js 如下:

alert(123);

http://a.com/test.html 编写如下代码:

<script type='text/javascript' src='http://b.com/alert.js'/>

运行 http://a.com/test.html,结果很明显,就是弹出 【123】 。

引导第二步:引用js返回数据

http://b.com/alert.js 修改为:

myFn(100);

http://a.com/test.html 修改为:

<script type='text/javascript' src='http://b.com/alert.js'/>
<script>
function myFn ( data ) {
alert( data + 'px' );
}
</script>

运行 http://a.com/test.html,结果是弹出【 100px 】,这个应该也没有什么疑问。

引导第三步:已经跨域成功!

第二步中,如果data——即100——是我要跨域在http://b.com下获取的一个数据,那么咱们这不就是已经实现跨域请求了吗!!!

把这个过程再清晰的捋一遍:

  • <script>的src不符合同源策略;
  • 我通过给<script>的src赋值一个跨域的文件的网址(可能不是一个js文件),这个文件返回的字符串,浏览器会当作javascript来解析;
  • 而这段javascript中,就可以包含着我所需要的跨域服务器端的数据;
  • 最后,我在本页面定义一个myFn函数用来展示数据,而这段javascript中就可以直接调用myFn函数;

引导第四步:引用html格式

<script>的src不一定仅仅指向javascript文件,可以指向任何地址。例如:

http://a.com/test.html 修改为:

<script type='text/javascript' src='http://b.com/data.html'/>
<script>
function myFn ( data ) {
alert( data + 'px' );
}
</script>

http://b.com/data.html 编写为:(注意,data.html中就写以下一行代码,多了不写)

myFn(100);

运行 http://a.com/test.html ,结果依然是【 100px 】

其中,“100”就是我们要跨域请求的数据。

引导第五步:动态数据

如果要请求的数据是动态的,那就要在动态页面中编写。

那么我们就让 http://a.com/test.html 去调用一个动态的aspx页面:

<script type='text/javascript' src='http://b.com/data.aspx?callback=myFn'/>
<script>
function myFn ( data ) {
alert( data + 'px' );
}
</script>

大家注意,我们在 src 地址中增加了“?callback=myFn”,意思是把显示数据的函数也动态传过去了,而第二步、第四步都是静态的写在被调用的文件中的。

至于callback参数后台如何接收,如何使用,请接着看:

http://b.com 下增加一个 http://b.com/data.aspx 页面,后台代码如下:

    protected void Page_Load(object sender, EventArgs e)
{
if (this.IsPostBack == false)
{
string callback = "";
if (Request["callback"] != null)
{
callback = Request["callback"]; //服务器端要返回的数据
string data = "1024"; Response.Write(callback + "(" + data + ")");
}
}
}

代码很简单,获取callback参数,然后组成一个函数的形式返回。如果“http://b.com/data.aspx?callback=myFn”调用的话,那么返回的就是" myFn(1024) "。

返回的数据变成动态的了(“1024”),前端页面用于显示数据的函数也编程了动态的了(“callback=myFn”),但是归根结底,形式还是一样的。

引导第六步:调用封装

http://a.com/test.html 中,仅仅有一个<script>静静的躺在那里,执行一次之后,就没有作用了。

而实际情况是,http://a.com/test.html 中,可能随着用户的操作发生若干次的调用。怎么办?——动态增加呗。

function addScriptTag(src) {
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.src = src;
document.body.appendChild(script);
} //需要调用时:
addScriptTag('b.com/data.aspx?callback=myFn'); function myFn (data) {
alert(data + 'px');
}

4. 总结

以前我们引入的是函数,在script里面写的是函数的执行。

现在用jsonp相当于引入函数的执行命令, 在script里面写的是函数声明。

以上层层描述的就是JSONP,你不必去记住它的定义,看明白了上述文字,就全能理解。

重点在于:同源策略 + <script>的src不属于同源策略 + 通过<script>的src指向的文件返回服务器端数据。

【前端】直击源头的让你3秒理解并且会用Jsonp!!!的更多相关文章

  1. 阿里前端测试题--关于ES6中Promise函数的理解与应用

    今天做了阿里前端的笔试题目,原题目是这样的 //实现mergePromise函数,把传进去的数组顺序先后执行,//并且把返回的数据先后放到数组data中 const timeout = ms => ...

  2. 学习前端的菜鸡对JS 的classList理解

    classList 在早期的时候要添加,删除类 需要用className去获取,然后通过正则表达式去判断这个类是否存在. 代码上去会有点麻烦,现在有了classList 就方便了很多. ——————— ...

  3. html页面3秒后自动跳转的方法有哪些

    在进行web前端开发实战练习时,我们常常遇到一种问题就是,web前端开发应该如何实现页面N秒之后自动跳转呢?通过查找相关html教程,总结了3个方法: 方法1: 最简单的一种:直接在前面<hea ...

  4. 精读《Serverless 给前端带来了什么》

    1. 引言 Serverless 是一种 "无服务器架构",让用户无需关心程序运行环境.资源及数量,只要将精力 Focus 到业务逻辑上的技术. 现在公司已经实现 DevOps 化 ...

  5. web前端优化

    在谈到Web优化之前,我们回到一个更原始的问题,Web前端的本质是什么.我的理解是: 将信息快速并友好的展示给用户并能够与用户进行交互.快速的意思就是在尽可能短的时间内完成页面的加载,试想一下当你在淘 ...

  6. BAT 前端开发面经 —— 吐血总结 前端相关片段整理——持续更新 前端基础精简总结 Web Storage You don't know js

    BAT 前端开发面经 —— 吐血总结   目录 1. Tencent 2. 阿里 3. 百度 更好阅读,请移步这里 聊之前 最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘, ...

  7. 收益 or 挑战?Serverless 究竟给前端带来了什么

    作者 | 黄子毅(紫益) 阿里前端技术专家 导读:前端开发者是最早享受到 "Serverless" 好处的群体,因为浏览器就是一个开箱即用.甚至无需为计算付费的环境!Serverl ...

  8. Web前端开发推荐阅读书籍

    前言 前端工程师在中国兴起也就5年左右,以前公司里没有专门前端工程师的这个职位,很多前端方面的任务都是由全栈工程师来完成,有的基础一点的后台或者设计的帮助分担一些.但是随着互联网的快速发展,特别是所谓 ...

  9. 前端代码标准最佳实践:CSS

    前端工程师对写标准的前端代码的重视程度很高.这些最佳标准实践并不是那个权威组织发布的,而是由大量的前端工程师们在实践过程中的经验总结,目的在于提高代码的可读性,可维护性和性能.那么接着上一篇,我们再来 ...

随机推荐

  1. [转帖]Linux 下 DD 命令的使用详解

    https://blog.csdn.net/noviblue/article/details/56012275 一.dd命令的解释 dd:用指定大小的块拷贝一个文件,并在拷贝的同时进行指定的转换. 注 ...

  2. [51CTO]反客为主 ,Linux 成为微软 Azure 上最流行的操作系统

    反客为主 ,Linux 成为微软 Azure 上最流行的操作系统 [世界上唯一确定不变的就是世界在不停的变化] 三年前,微软云计算 Azure 平台 CTO Mark Russinovich 说有四分 ...

  3. 聚合函数count里面加条件

    聚合函数中如果想汇总某一类数据,可以在括号中增加条件: sum(case when 字段>0 then 1 else 0 end) as 字段 *注意:count(case when 字段> ...

  4. Java多线程(二) —— 深入剖析ThreadLocal

    对Java多线程中的ThreadLocal类还不是很了解,所以在此总结一下. 主要参考了http://www.cnblogs.com/dolphin0520/p/3920407.html 中的文章. ...

  5. Java Junit测试框架

    Java    Junit测试框架 1.相关概念 Ø JUnit:是一个开发源代码的Java测试框架,用于编写和运行可重复的测试.它是用于单元测试框架体系xUnit的一个实例(用于java语言).主要 ...

  6. Missing $ inserted解决方法

    目录 问题描述 解决 参考 问题描述 在学习LaTex Tutorial的时候,按照教程输入矩阵的时候发现出现了 ! Missing $ inserted的错误. 解决 在矩阵前后要加上$,如图所示 ...

  7. Codeforces 914F. Substrings in a String(bitset)

    比赛的时候怎么没看这题啊...血亏T T 对每种字符建一个bitset,修改直接改就好了,查询一个区间的时候对查询字符串的每种字符错位and一下,然后用biset的count就可以得到答案了... # ...

  8. 解题:CQOI 2017 小Q的棋盘

    题面 由树的结构我们可以知道,最终要么是连一条(最长的)链都没走完,要么是走了一些点最后走了最长的链.为什么总是说最长的链呢,因为在树上这样走的过程中(最后不要求返回的话)除了一条链都会被走两次,显然 ...

  9. 【纪中集训2019.3.11】Cubelia

    题目: 描述 给出长度为\(n\)的数组\(a\)和\(q\)个询问\(l,r\). 求区间\([l,r]\)的所有子区间的前缀和的最大值之和: 范围: $n \le 2 \times 10^5 , ...

  10. bzoj2300【HAOI2011】防线修建

    题目描述 近来A国和B国的矛盾激化,为了预防不测,A国准备修建一条长长的防线,当然修建防线的话,肯定要把需要保护的城市修在防线内部了.可是A国上层现在还犹豫不决,到底该把哪些城市作为保护对象呢?又由于 ...