2018-04-09 JSONP入门

1. 必考面试,什么是JSONP

原生JS:

button.addEventListener('click',(e)=>{
  let script = document.createElement('script');
  let functionName = 'frank'+parseInt(Math.random()*100000,10);
  window[functionName] = function (result) {
    if(result === 'success'){
      amount.innerText = amount.innerText - 1
    }else {
      alert(`fail`)
    }
  };

  script.src = 'http://jack.com:8002/pay?callback=' + functionName;
  document.body.appendChild(script);
  script.onload = function (e) {
    e.currentTarget.remove();
    delete window[functionName]
  };
  script.onerror = function (e) {
    alert('fail');
    e.currentTarget.remove();
    delete window[functionName]
  }
});

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

  1. 请求方创建一个script标签,它的src指向服务器的ip地址,同时传一个查询参数(?callback=functionName)
  2. 服务器通过
    response.write(`
      ${query.callback}.call(undefined,'success')
    `)
    
    这句话是精髓
    'success'是JSON,左边的叫左padding,右边的括号叫右padding,合起来叫JSONP
    这样来调用请求方的callback函数,名字是functionName
  3. 浏览器接到success的响应就会执行functionName函数

2. 必考面试题:JSONP为什么不支持POST请求

答:JSONP是通过动态创建script的方法进行的,而script只能发送get请求不能发送post请求。

3. jquery的写法

jsonp不是ajax

$.ajax({
  url:"http://jack.com:8002/pay",
  dataType: "jsonp",
  success:function (response) {
    if(response === 'success'){
      amount.innerText = amount.innerText-1;
    }
  }
})
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 页面数据交互的发展过程 付款是我们日常中常见的一种金钱交易,用户在页面中点击付款按钮,网页提交请求给服务器,服务器...
    鹧鸪少阅读 946评论 0 0
  • 本文是在了解了浏览器的同源规则之后,并学习一个破解这个规则的一个简单有效的方法JSONP。主要通过阮一峰老师的博客...
    吴少在coding阅读 692评论 0 2
  • 1. JSONP的实现原理 JSONP是通过动态创建script实现的。请求方:frank.com 的前端程序员(...
    王童孟阅读 491评论 0 2
  • 1.一些开放性题目 1.自我介绍:除了基本个人信息以外,面试官更想听的是你与众不同的地方和你的优势。 2.项目介绍...
    55lover阅读 646评论 0 6
  • 你好,简书。初次见面,请多支持。希望在这里,可以是我的一个树洞。
    小粒儿的世界阅读 222评论 0 1