JavaScript | JSONP

什么是 JSONP？
XMLHttpRequest(XHR) 可用于从服务器获取数据。一旦在浏览器中接收到数据，它就可以使用 JSON.parse() 方法将接收到的 JSON字符串转换为 JavaScript 对象。但是，XHR 带有同源安全问题。这意味着，从某个域请求一个页面，比方说 ADomain.com，然后该页面发出 XMLHttpRequest 从 BDomain.com 获取一些数据，浏览器拒绝此请求。这是因为请求是针对与提供页面的域不同的域发出的。仅当向 ADomain.com 发出 XMLHttpRequest 时，它才会接收回数据，因为 XHR 仅在向同一个域发出请求时才起作用。

JSONP（JSON with Padding）：这是一种通过避免跨域问题来检索数据的方法。脚本标签用于执行此操作。

JSON和JSONP的区别：

• JSON： JavaScript 使用 JSON（JavaScript Object Notation）通过网络交换数据。它仔细查看 JSON 数据，它只是一个字符串格式的 JavaScript 对象。
  例子：

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

• JSONP： JSONP 是带有 Padding 的 JSON。在这里，填充意味着在 JSON 返回请求之前将函数包装在 JSON 周围。
  例子：

  GeeksFunction({"name":"GFG", "id":1, "articlesWritten":5});

使用 JSONP 的方法：

• 在 HTML 代码中，包含 script 标签。此脚本标记的来源将是要从中检索数据的 URL。 Web 服务允许指定回调函数。在 URL 中最后包含回调参数。
• 当浏览器遇到脚本元素时，它会向源 URL 发送 HTTP 请求。
• 服务器将响应包含在函数调用中的 JSON 发送回。
• 字符串形式的 JSON 响应由浏览器解析并转换为 JavaScript 对象。调用回调函数并将生成的对象传递给它。

示例 1：

    
  
    
    
        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>" ; 
            } 
        }
    
      

    

                    

输出：

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

示例 2：使用 JavaScript 动态添加脚本元素

    
  
    
    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>" ; 
        } 
    }


                    

输出：

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