【问题标题】:Query JSON data from Azure Blob Storage with jQuery使用 jQuery 从 Azure Blob 存储中查询 JSON 数据
【发布时间】:2011-07-26 06:12:41
【问题描述】:

我在 Azure blob 存储中有一些数据。数据为 JSON,并以“application/json”内容类型保存。

我的应用程序将托管在“myapp.com”,这是一个包含“myapp.cloudapp.net”的 CNAME 的域。我想我应该创建一个指向我的 Azure 存储的自定义域名,例如“storage.myapp.com”。

然后呢?我可以使用 JSONP 或其他方式对 Azure 存储进行 JSON ajax 调用吗?

如何更好地做到这一点?

非常感谢。

【问题讨论】:

    标签: jquery json azure jsonp azure-blob-storage


    【解决方案1】:

    嗯,显然 Azure blob 存储不直接支持 JSONP,但可以做到。

    例如,如果我将此 JSON 存储在 Azure blob 中:

    {"Name":"Valeriano","Surname":"Tortola"}
    

    我试试:

    <script type="text/javascript">
    
        $.getJSON("https://myaccount.blob.core.windows.net/jsonptests/data?jsoncallback=?",
                 function (data) {
                     alert(data.Name);
                 });
    </script>
    

    它不起作用。好吧,实际上浏览器下载数据但没有回调。所以,考虑到 JSONP 的工作原理,如果我用回调函数保存这个 JSON:

    dataCallback({"Name":"Valeriano","Surname":"Tortola"})
    

    我愿意:

    <script type="text/javascript">
    
        function dataCallback(data) {
            alert(data.Name);
        }
    </script>
    
    <script type="text/javascript" src="https://myaccount.blob.core.windows.net/jsonptests/data"></script>
    

    然后dataCallBack 被执行:) 缺点是回调函数名称必须被编码,但总比没有好。

    快乐的日子,但如果有人有更好的方法,那就太好了。

    干杯。

    【讨论】:

    • 进行跨域 JSON 请求的唯一方法是使用 JSONP。 Azure TS 不支持 JSONP,因此这是一种使用与 JSONP 相同的原理的解决方法。
    • 还可以使用此选项使用 jQuery ajax 设置自定义回调函数名称 - { jsonp: false, jsonpCallback: "callbackName" } api.jquery.com/jQuery.ajax
    【解决方案2】:

    Windows Azure Blob Storage REST 接口返回 XML (POX),而不是 JSON...但是从 JavaScript 查询很简单!用 restype=container 和 comp=list 调用你的容器 URL:

    $(document).ready(function () {         
        // Retrieve list of Blobs
        var containerUrl = 'http://tcontepub.blob.core.windows.net/json/';
        $.ajax({
            type: 'GET',
            url: containerUrl + '?restype=container&comp=list',
            dataType: 'xml',
            success: listBlobs
        });
    });
    

    然后您可以对返回的 XML 进行基本解析。这里我会提取 URL 并显示在一个 div 中。

    function listBlobs(xml) {
        $(xml).find('Blob').each(function() {
            var url = $(this).find('Url').text();
            $('#panel').append(url + '<br />');
        });
    }
    

    我在一个本身存储为 Blob 的 HTML 页面中对此进行了测试。

    不幸的是,我担心 JavaScript “同源策略”会使其在实践中相当难以使​​用。

    【讨论】:

    • 如果您的页面位于 www.whatever.com 并且您存储在 storage.whatever.com 中,它是否有效?
    • 不幸的是,我担心 JavaScript“同源策略”会妨碍。
    • 这就是问题所在。我认为 Azure Blob 应该支持 JSONP,可惜他们不支持。
    猜你喜欢
    • 2015-08-03
    • 1970-01-01
    • 2015-11-04
    • 2020-04-03
    • 2019-08-26
    • 2022-11-15
    • 2018-05-07
    • 2016-12-07
    • 2017-09-16
    相关资源
    最近更新 更多