JSONP学习笔记

1. parseInt(n,10)

以10进制的方式把字符串n转换为整型

2. git 回到以前的状态

git log
git reset 7fagfgdfgdfgdsf --hard

3. 随机数

Math.random() > 0.5

4. 图片加载成功和图片加载失败

image是图片便签
image.onload = function(){
    加载成功就执行这里的代码
}
imgae.onerror = function(){}

5. 怎么刷新当前页面?

window.location.reload()

6. 怎么用图片发请求?

利用图片的src发送get请求,不过注意要返回一个真的图片


7. 通过script的src也可以发请求

不过要在body里面创建script标签,并且注意server.js里要写application/javascript。好处是不用发送一张图片。这个方案叫SRJ:server render JavaScript

8. 监听一个标签,成功加载后就删掉

label.onload = function(e){
    e.currentTarget.remove()
}

9. srj只能用get请求。

10. script的src可以向不同源的网站发送请求。

11. 为什么JSONP不支持POST方法?

  1. 因为JSONP的原理是通过动态地创建script标签来发送数据
  2. 我们动态创建script的时候只能用get,不能用POST

JSONP只支持GET请求,CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器,以及可以向不支持CORS的网站请求数据。

12. 什么是jsonp

JSONP是服务器与客户端跨源通信的常用方法。
最大特点就是简单适用,老式浏览器全部支持,服务器改造非常小。
它的基本思想是,网页通过添加一个script元素,向服务器请求json数据,这种做法不受同源政策限制;服务器收到请求后,将数据放在一个指定的回调函数里传回来。

JSONP

请求方:frank.com 的前端程序员(浏览器)
响应方:jack.com 的后端程序员(服务器)

请求方创建 script,src 指向响应方,同时传一个查询参数 ?callbackName=yyy
响应方根据查询参数callbackName,构造形如yyy.call(undefined, '你要的数据')
yyy('你要的数据')这样的响应.
浏览器接收到响应,就会执行 yyy.call(undefined, '你要的数据')
那么请求方就知道了他要的数据
这就是 JSONP

约定:

callbackName -> callback
yyy -> 随机数 frank12312312312321325()
jQuery 用法

 $.ajax({
 url: "http://jack.com:8002/pay",
 dataType: "jsonp",
 success: function( response ) {
     if(response === 'success'){
     amount.innerText = amount.innerText - 1
     }
 }
 })

13.实现yjq.com向mayun.com发送请求


  1. 在yjq.com:8001处发送http://localhost:8002/pay请求
pay.addEventListener('click', function (e) {
            var script = document.createElement('script')
            document.body.appendChild(script)
            script.src = 'http://localhost:8002/pay'
            e.curretTarget.remove()
        })
  1. 在mayun.com的server.js处修改代码:
if(path === '/pay'){
            response.statusCode = 200
            var number = fs.readFileSync('./db','utf-8')
            var newNumber = number - 1
            fs.writeFileSync('./db',newNumber)
            response.setHeader('Conttent-Type','application/javascript')
            response.write(`
            alert('这是来自jmayun.com的代码')
            `)
            response.end()
  1. 最后开启两个server.js,成功接收到来自mayun.com的代码
    [图片上传失败...(image-ad72f6-1553065991823)]

14. 总结

前端一开始只能使用form表单向服务器发送请求,但后来发现用img标签的src也发送get请求,但用img发送请求还需要返回一张图片,因此又使用动态地创建script元素来发送请求,衍生出了JSONP。由于script标签的src是可以跨域的,因此jsonp发送的请求也是可以跨域发送,且对老式浏览器兼容。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,558评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,002评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,036评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,024评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,144评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,255评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,295评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,068评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,478评论 1 305
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,789评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,965评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,649评论 4 336
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,267评论 3 318
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,982评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,223评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,800评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,847评论 2 351

推荐阅读更多精彩内容

  • 原始时代 在最早的时候,当我们需要向服务器提交请求时,用的是 表单提交到服务器,服务器接收到请求并且返回响应后,浏...
    Criya阅读 2,203评论 0 0
  • 1. JSONP的实现原理 JSONP是通过动态创建script实现的。请求方:frank.com 的前端程序员(...
    王童孟阅读 470评论 0 2
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,457评论 1 45
  • 请先了解:《阮一峰:浏览器同源政策及其规避方法》 注意:请首先更新之前用过的 nodejs-test 代码,否则会...
    格林姆大师阅读 434评论 0 0
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,094评论 1 32