是否可以使用带有延迟对象的Jsonp进行多次调用?

时间:2012-11-20 00:26:54

标签: ajax jquery jsonp

如果可能的话,我试图同时发出两个或更多请求?我关注速度,因为在第一次请求发出后我想将这些信息显示在网页上,然后对每个额外的网址执行相同的操作。

我一直在阅读有关延迟对象和尝试一些示例,到目前为止我已经尝试过这样做了,

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script >
$(document).ready(function($) {
// - 1st link in chain - var url = 'https://www.sciencebase.gov/
catalog/items?parentId=504108e5e4b07a90c5ec62d4&max=60&offset=0&format=jsonp';
// - 2nd link in chain - var url = 'https://www.sciencebase.gov/
catalog/itemLink/504216b6e4b04b508bfd333b?format=jsonp&max=10';
// - 3rd (and last) link in chain - var url = 'https://www.sciencebase.gov/
catalog/item/4f4e4b19e4b07f02db6a7f04?format=jsonp';

// parentId url
function parentId() {

//var url = 'https://www.sciencebase.gov/catalog/items?parentId=
504108e5e4b07a90c5ec62d4&max=3&offset=0&format=jsonp';

    return $.ajax({
        type: 'GET',
        url: 'https://www.sciencebase.gov/catalog/items?parentId=
        504108e5e4b07a90c5ec62d4&max=3&offset=0&format=jsonp',
        jsonpCallback: 'getSBJSON',
        contentType: "application/json",
        dataType: 'jsonp',
        success: function(json) {},
        error: function(e) {
            console.log(e.message);
        }
    });
}

// itemLink url
function itemLink() {

    //var url = 'https://www.sciencebase.gov/catalog/itemLink
    /504216b6e4b04b508bfd333b?format=jsonp&max=10';

    return $.ajax({
        type: 'GET',
        url: 'https://www.sciencebase.gov/catalog/itemLink
        /504216b6e4b04b508bfd333b?format=jsonp&max=10',
        jsonpCallback: 'getSBJSON',
        contentType: "application/json",
        dataType: 'jsonp',
        success: function(json) {},
        error: function(e) {
            console.log(e.message);
        }
    });
}

// Multiple Ajax Requests 
$.when( parentId(), itemLink()).done(function(parentId_data, itemLink_data) {
    console.log("parentId_data.items[0].title");

});

});

但似乎功能不起作用。我希望能够在函数内部的.when()方法之后放一些东西告诉我的程序要做什么,但是我没有显示任何内容?

感谢您的帮助!

1 个答案:

答案 0 :(得分:1)

部分问题是在$ .when的done处理程序中,传递给回调的参数是每个请求的参数数组,而不仅仅是您要使用的数据。您可以使用.pipe来解决此问题,如下例所示。

另外,除非你有充分的理由,否则不要指定jsonpCallback,大多数时候你想让jQuery在内部为你管理。

以下是在JSFiddle

上测试的工作示例
jQuery(function($) {

    function parentId() {
        return $.ajax({
            url: 'https://www.sciencebase.gov/catalog/items?parentId=504108e5e4b07a90c5ec62d4&max=3&offset=0&format=jsonp',
            dataType: 'jsonp',
            error: function(e) {
                console.log(e.message);
            }
        // We'll use pipe here so that rather than the value being passed to our $.when handler
        // is simply our data rather than an array in the form of [ data, statusText, jqXHR ]
        }).pipe(function( data, statusText, jqXHR ) {
            return data;
        });
    }

    function itemLink() {
        return $.ajax({
            url: 'https://www.sciencebase.gov/catalog/itemLink/504216b6e4b04b508bfd333b?format=jsonp&max=10',
            dataType: 'jsonp',
            error: function(e) {
                console.log(e.message);
            }
        }).pipe(function(data) {
            return data;
        });
    }

    // Multiple Ajax Requests 
    $.when( parentId(), itemLink()).done(function(parentId_data, itemLink_data) {
        console.log( parentId_data, itemLink_data );
    });
});