如何安全地依赖现有的Ajax数据

How to safely rely on Ajax data being present

本文关键字：Ajax 数据 依赖 何安全 安全      更新时间：2023-09-26

我目前正在开发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
}

和successHandler

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

只要您的代码处于成功或完全回调中，您就可以确保数据可用于它。

有两种方法可以获得成功并完成回调。$.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请求的"同步"，我会看到两个选项：

  1. jQuery延迟

  2. Ajax异步：请求中为false

我确实推荐第一个，它是一个更优雅、更高性能的解决方案。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调用

中执行操作

您可以在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"
    });
}
相关文章：