DMOZ中文网站分类目录-免费收录各类优秀网站的中文网站目录.
  • DmozDir.org
DMOZ目录快速登录入口-免费收录各类优秀网站的中文网站目录.由人工编辑,并提供网站分类目录检索及地区分类目录检索,是站长免费推广网站的有力平台!

JSONP是什么

  • JSONP是什么

  • 已被浏览: 22 次2020年09月26日    来源:  DMOZ中文网站分类目录
  • JSONP代表“带填充的JSON”。JSONP是一种跨源传递Javascript表达式的方法;可以让网页从别的域名(网站)那获取资料,即跨域读取数据。它是一种获取数据的替代方法,可以绕过普通的AJAX调用无法绕过同源策略。
    JSONP代表“带填充的JSON”。JSONP是一种跨源传递Javascript表达式的方法;可以让网页从别的域名(网站)那获取资料,即跨域读取数据。它是一种获取数据的替代方法,可以绕过普通的AJAX调用无法绕过同源策略。

    JSONP允许我们快速跨域使用API,但缺点是无法在旧版浏览器中执行错误检查;它也不允许我们发出POST请求。只有在浏览器中使用Javascript评估接收数据而产生的跨域调用才需要JSONP;实现CORS的接口不需要JSONP。例如,Twitter API和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]

    以上就是JSONP是什么的详细内容,更多请关注DMOZ中文网站分类目录其它相关文章!


    以上信息来源于网络,如有侵权,请联系站长删除。

    TAG:JSONP json

  • 上一篇:JSON是什么?
  • 与“JSONP是什么”相关的资讯
  • Cassandra + JSON?答案就是Stargate Documents API
  • JSON&amp;AJAX
  • [.Net Core 3.0+/.Net 5] System.Text.Json中时间格式化
  • 一款珍藏多年的在线json格式化工具
  • Python抓包并解析json爬虫