让知识连接你我
投稿赚钱
当前位置: 首页 > 前端开发 > JSONP是什么?JSONP是某种跨源传送Javascript表达式的方式
  • 101
  • 微信分享

    扫一扫,在手机上查看

JSONP是什么?JSONP是某种跨源传送Javascript表达式的方式

2019.09.11 10:00 250 浏览 举报

  JSONP象征“带安置的JSON”。JSONP是某种跨源传送Javascript表达式的方式 ;能够让网页从其他域名(网站)那得到资料,即跨域传输数据。那是某种读取数据的取代方式 ,能够避过普通级的AJAX启用不能避过同源策略。

5d1485c95900c724.jpg

  JSONP准许让我们迅速跨域应用接口文档,但缺陷是不能在旧版浏览器中实施不正确检验;它就不准许让我们发出POST恳求。只能在浏览器中应用Javascript评估接收数据而形成的跨域启用才必须JSONP;建立CORS的接口不用JSONP。比如说,Twitter 接口文档和Google Maps API不用JSONP。

  JSONP的其它缺陷是它使您的应用程序易于得到您恳求的外由来的XSS进攻。假如JSONP源的远程操作端不会受到信任感,则您的应用程序将对XSS进攻开放。

  JSON和JSONP相互间的差异:

  JSON: JavaScript应用JSON(JavaScript Object Notation)根据网络互相交换统计数据。它认真查阅JSON统计数据,它仅仅一个字符数组文件格式的JavaScript目标。

  例:

  {"name":"zww", "id":1, "articlesWritten":5}

  JSONP: JSONP是带安置的JSON。在这里,安置代表着在返回恳求以前将函数包装在JSON周边。

  例:

  HzwwFunction({"name":"zww", "id":1, "articlesWritten":5});

  应用JSONP的方式 :

  ● 在HTML编码中,包括脚本标记。此脚本制作标记的由来将是要从这当中检索统计数据的URL。Web服务准许特定回调函数。在URL中包括最终的回调参数。

  ● 当浏览器碰到script元素时,它会向源URL推送HTTP恳求。

  ● 服务器根据函数调用中包括的JSON推送回反应。

  ● JSON反应运用字符数组方式,由浏览器详细分析并转化为JavaScript目标。启用回调函数,并将生成的目标传送给它。

  示例1:

  <!DOCTYPE html>
      <html>
      <body>
          <p id="paragraphElement"></p>
          <!-- The server returns a call to the callback function
          (processData) that will handle the JSON data -->
      <script>
          function processData(myObj) {
          console.log(myObj);
          var para= document.getElementById("paragraphElement");
          for(var i=0; i<myObj.resultCount; i++){
              para.innerHTML= para.innerHTML + myObj.results[i].trackName
              + "<br>" ;
              }
          }
      </script>
          <!-- Calling the iTunes API to search for Jack Johnson's songs and return
          the first five items -->
          <script src="https://itunes.apple.com/search?term=jack+johnson&limit=5
          &callback=processData"></script>
      </body>
  </html>

  输出:

  Better Together
  Banana Pancakes
  Sitting, Waiting, Wishing
  Upside Down
  Good People

  示例2:应用JavaScript动态加上脚本制作元素


  <!DOCTYPE html>
      <html>
      <body>
          <p id="paragraphElement"></p>
      <script>
          window.onload = createScriptDynamically();
          function createScriptDynamically() {
          // Set the url to the web service API from where
          // the data to be retrieve
          var url =
          "https://itunes.apple.com/search?term=taylor+swift&limit=5&callback=processData";
          // Create the script element dynamically through JavaScript
          var scriptElement = document.createElement("script");
          // Set the src and id attributes of the script element
          scriptElement.setAttribute("src", url);
          scriptElement.setAttribute("id", "jsonp");
          var oldScriptElement= document.getElementById("jsonp");
          // Get the head element
          var head = document.getElementsByTagName("head")[0];
          if(oldScriptElement == null) {
              /* If there is no script element then append
              a new element to the head. */
          head.appendChild(scriptElement);
          }
      else {
           /* If there is already a element in the head,
           then replace it with the new script element. */
           head.replaceChild(scriptElement, oldScriptElement);
          }
      }
      function processData(myObj) {
          console.log(myObj);
          /* Function to display the track name and the
          genre name from the received data. */
      var para = document.getElementById("paragraphElement");
      for(var i = 0; i < myObj.resultCount; i++){
              para.innerHTML = para.innerHTML + myObj.results[i].trackName
              + "[" + myObj.results[i].primaryGenreName + "]" + "<br>" ;
             }
          }
          </script>
  </body>
  </html>

  输出:

  Delicate [Pop]
  Look What You Made Me Do [Pop]
  Shake It Off [Pop]
  You Belong With Me [Country]
  Blank Space [Pop]


本文首次发布于开创者素材 ,转载请注明出处,谢谢合作!

相关文章推荐