Javascript 如何安全地依赖当前的Ajax数据

我目前正在开发SharePoint 2013解决方案，我们广泛使用Javascript和jQuery。我遇到了一个相当恼人的问题，我似乎无法解决。请记住，我过去很少使用Javascript

我的SharePoint解决方案中有一个图片库列表，其中包含使用Slides.js框架显示图片的Web部件的图片。要检索图片，我必须使用Ajax从库列表中获取图片，然后将slidesjs应用于.ascx文件中的div容器

由于Ajax会在准备就绪时返回数据，因此在将slides.js框架应用于标记中无序列表时，我无法确定数据是否存在。数据可能存在，也可能不存在。正如你可能猜到的；如果它不在那里，它就根本不起作用

为了绕过这个问题进行演示，我添加了一个setTimeout，这样slides.js就不会被应用，直到300ms过去，但这是一个丑陋的修复，我想去掉它。而且，它不稳定

总而言之，我的问题基本上是；是否可以安全地依赖Ajax数据一次出现，如果可以，如何做到

请随时询问更多信息

提前谢谢

编辑：添加了代码

以下是我的ajax选项

var ajaxOpts = {
    url: web + endpoint,
    type: "GET",
    headers: { "accept": "application/json;odata=verbose" },
    success: successHandler,
    error: errorHandler
}

和成功者

function successHandler (response) {
    // Do response parsing

    setTimeout(function () {
        runSlider(); // basically jQuery("#slider").slidesjs(slidesOpts)
    }, 300);
}

---

如果需要对ajax请求进行某种“同步”，我可以看到两种选择：

：你的要求是错误的

我确实推荐第一个，因为它是一个更优雅、更高性能的解决方案。async:false可以冻结浏览器

用法示例：

jQuery延期：

$.when(ajaxRequest).done(function(){
...//do stuff with sliders
});

or using async false:

$.ajax({
    url : "/controller/action",
    async : false,
    ...
    success: function(){
    ...// do stuff 
    }
})

---

如果您没有复杂的需求，只需按照其他答案的建议去做，并在ajax

success

call

中做一些事情。如果您需要对ajax请求进行某种“同步”，我可以看到两种选择：

：你的要求是错误的

我确实推荐第一个，因为它是一个更优雅、更高性能的解决方案。async:false可以冻结浏览器

用法示例：

jQuery延期：

$.when(ajaxRequest).done(function(){
...//do stuff with sliders
});

or using async false:

$.ajax({
    url : "/controller/action",
    async : false,
    ...
    success: function(){
    ...// do stuff 
    }
})

---

如果您没有复杂的需求，只需按照其他答案的建议进行操作，并在ajax

success

call

中进行操作。您可以在ajax请求中使用

success

或

complete

回调。AJAX完成后，运行函数将幻灯片放入滑块

$.ajax({
   type:'POST',
   url: myURL.php,
   dataType: "html",
   complete: function (data) {
       if (data !== null && data !== undefined) { // make sure data has been returned
           // add slides here
       } else {
           alert("Slides not available");
       }
   }, error: function() {
       alert("Slides not available");
   }
});

然后您可以确定，当AJAX已经运行并且成功后，您的添加幻灯片功能将按预期工作

你也可以做一些像这样的事情，作为替代。如果您正在调用多个AJAX请求，并且希望在执行工作之前知道这两个请求何时都已完成，那么这将非常有用

$.when(ajax1(), ajax2()).done(function(a1, a2) {
    // the code here will be executed when both AJAX requests complete
    // a1 & a2 contain lists of 3 items; the response text [0],
    // the status [1], and an jqXHR object [2] for each of the listed AJAX calls
    if (a1[0]) {
        // add slides here
    }
    if (a2[0]) {
        // do something else here
    }
});

function ajax1() {
    $.ajax({
        type:'POST',
        url: myURL.php,
        dataType: "html"
    });
}

function ajax2() {
    $.ajax({
        type:'POST',
        url: myURL.php,
        dataType: "html"
    });
}

---

您可以在AJAX请求中使用

success

或

complete

回调。AJAX完成后，运行函数将幻灯片放入滑块

$.ajax({
   type:'POST',
   url: myURL.php,
   dataType: "html",
   complete: function (data) {
       if (data !== null && data !== undefined) { // make sure data has been returned
           // add slides here
       } else {
           alert("Slides not available");
       }
   }, error: function() {
       alert("Slides not available");
   }
});

然后您可以确定，当AJAX已经运行并且成功后，您的添加幻灯片功能将按预期工作

你也可以做一些像这样的事情，作为替代。如果您正在调用多个AJAX请求，并且希望在执行工作之前知道这两个请求何时都已完成，那么这将非常有用

$.when(ajax1(), ajax2()).done(function(a1, a2) {
    // the code here will be executed when both AJAX requests complete
    // a1 & a2 contain lists of 3 items; the response text [0],
    // the status [1], and an jqXHR object [2] for each of the listed AJAX calls
    if (a1[0]) {
        // add slides here
    }
    if (a2[0]) {
        // do something else here
    }
});

function ajax1() {
    $.ajax({
        type:'POST',
        url: myURL.php,
        dataType: "html"
    });
}

function ajax2() {
    $.ajax({
        type:'POST',
        url: myURL.php,
        dataType: "html"
    });
}

---

只要代码处于success或complete回调中，就可以确保数据对它可用

有两种方法可以获得成功并完成回调。在$.ajax的选项中：

$.ajax("foo.php",{
    type: "get",
    success: function(data){
        // do something with data, it is available within this scope
    },
    complete: function(data){
        // do something with data, it is available within this scope
    }
})

或者使用jqXHR的方法

$.ajax("foo.php",{
    type: "get"
}).done(function(data){
    // do something with data, it is available within this scope
}).always(function(data){
    // do something with data, it is available within this scope
});

注意，您还可以根据需要在代码中传递xhr，以便在其他地方安全地使用数据

var jqXHR = $.ajax("foo.php",{
    type: "get"
});
$("#someEl").click(function(){
    jqXHR.done(function(data){
        // do something with data
        alert(data);
    });
});

---

只要代码处于success或complete回调中，就可以确保数据对它可用

有两种方法可以获得成功并完成回调。在$.ajax的选项中：

$.ajax("foo.php",{
    type: "get",
    success: function(data){
        // do something with data, it is available within this scope
    },
    complete: function(data){
        // do something with data, it is available within this scope
    }
})

或者使用jqXHR的方法

$.ajax("foo.php",{
    type: "get"
}).done(function(data){
    // do something with data, it is available within this scope
}).always(function(data){
    // do something with data, it is available within this scope
});

注意，您还可以根据需要在代码中传递xhr，以便在其他地方安全地使用数据

var jqXHR = $.ajax("foo.php",{
    type: "get"
});
$("#someEl").click(function(){
    jqXHR.done(function(data){
        // do something with data
        alert(data);
    });
});

---

你能为你的AJAX调用和你应用slider的时候包含代码吗？通常你会把所有的代码放进回调中，一旦AJAX出现，回调就会执行。或者，如果它从未出现过，例如，由于网络中断，则从未出现过。那是安全的。关键词：面向事件的编程您可以包含AJAX调用的代码以及应用滑块时的代码。通常，您会将所有代码放入回调中，回调在AJAX出现后执行。或者，如果它从未出现过，例如，由于网络中断，则从未出现过。那是安全的。关键词：面向事件的编程但是成功回调不会只说“是的，这是一个成功，您将收到数据-如果可用。”而不是“这是一个成功，您现在有数据了”？我可能已经完全疯了！一旦到达成功回调，意味着请求结束时没有任何错误，通常这将导致返回您想要的数据。但是成功回调不会只说“是的，这是一个成功，您将收到数据-如果可用。”而不是“这是一个成功，您现在有了数据”？我可能已经完全疯了！一旦到达成功回调，意味着请求结束时没有任何错误，通常这将导致获得您想要的数据。回答不错，Kevin。请允许我指出一些非常次要的事情。OP提出了这样的问题：“是否可以安全地依赖Ajax数据，如果可以，如何？”。不幸的是，您的示例都不能保证响应数据。成功回调将让客户端知道它连接正常（状态200OK），并在完成时完成，但不一定返回任何数据。也许你可以扔掉一些IF语句，以确保返回数据。小调，我知道，但很少有新手…如果数据是空字符串或未定义的，那仍然是数据。它仍然是数据，是的，但它不是OP想要的幻灯片。没关系，我承认这是一个很小的建议。