前端百题斩之浏览器出让安全性造就Jsonp

[[432964]]

1 JSONP基础

众所周知，JSONP是一种跨域解决方案，下面来一步步剖析一下为什么JSONP能够解决跨域问题。

创新互联主要从事做网站、网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务辛集,十载网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220

基本思想

JSONP基本思想是在网页中添加一个< script >元素，向服务器请求数据，服务器收到请求后，将数据放在一个指定名字的回调函数中传回来。这应该是经常看到的一种解释JSONP请求的思路，但是同源策略不是不允许向非同源发送请求的，那怎么又怎么可以通过JSONP解决跨域呢?看起来是一个很矛盾的点。

为什么JSONP能够实现跨域

从同源策略的角度考虑，确实嵌入的< script >发起的请求(非同源)违背了同源策略，但其实这是由于浏览器为了便利性让出了部分安全性，允许js文件、css文件、图片等资源来自于非同源服务器，这也就解释了为什么script请求的资源分明跨域了但是仍有内容返回的原因，也正是由于浏览器出让了部分安全性(允许页面中可以嵌入第三方资源)，采用了JSONP的诞生。

2 手撕JSONP

上述聊了什么是JSONP、其基本思想以及为什么JSONP能够实现跨域，下面一起来实现JSONP。

全局挂载一个接收数据的函数;
创建一个script标签，并在其标签的onload和onerror事件上挂载对应处理函数;
将script标签挂载到页面中，向服务端发起请求;
服务端接收传递过来的参数，然后将回调函数和数据以调用的形式输出;
当script元素接收到影响中的脚本代码后，就会自动执行它们。

 
 
 
  
  
  function createScript(url, charset) { 
  
  
      const script = document.createElement('script'); 
  
  
      script.setAttribute('type', 'text/javascript'); 
  
  
      charset && script.setAttribute('charset', charset); 
  
  
      script.setAttribute('src', url); 
  
  
      script.async = true; 
  
  
      return script; 
  
  
  } 
  
  
   
  
  
  function jsonp(url, onsuccess, onerror, charset) { 
  
  
      const hash = Math.random().toString().slice(2); 
  
  
      window['jsonp' + hash] = function (data) { 
  
  
          if (onsuccess && typeof(onsuccess) === 'function') { 
  
  
              onsuccess(data); 
  
  
          } 
  
  
      } 
  
  
   
  
  
      const script = createScript(url + '?callback=jsonp' + hash, charset); 
  
  
   
  
  
      // 监听加载成功的事件，获取数据，这个位置用了两个事件onload和onreadystatechange是为了兼容IE，因为IE9之前不支持onload事件，只支持onreadystatechange事件 
  
  
      script.onload = script.onreadystatechange = function() { 
  
  
          //若不存在readyState事件则证明不是IE浏览器，可以直接执行，若是的话，必须等到状态变为loaded或complete才可以执行 
  
  
          if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') { 
  
  
              script.onload = script.onreadystatechange = null; 
  
  
              // 移除该script的DOM对象 
  
  
              if (script.parentNode) { 
  
  
                  script.parentNode.removeChild(script); 
  
  
              } 
  
  
   
  
  
              // 删除函数或变量 
  
  
              window['jsonp' + hash] = null; 
  
  
          } 
  
  
      }; 
  
  
   
  
  
      script.onerror = function() { 
  
  
          if (onerror && typeof(onerror) === 'function') { 
  
  
              onerror(); 
  
  
          } 
  
  
      } 
  
  
   
  
  
      // 添加标签，发送请求 
  
  
      document.getElementsByTagName('head')[0].appendChild(script); 
  
  
  }

本文转载自微信公众号「前端点线面」，可以通过以下二维码关注。转载本文请联系前端点线面公众号。

新闻标题：前端百题斩之浏览器出让安全性造就Jsonp
URL标题：http://www.shufengxianlan.com/qtweb/news6/107256.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容