javascript - 如何为对象数组运行 ajax？

Question

我不确定这是否是使用 ajax 的有效方法，但我正在使用 for 循环遍历信息数组:

loadProfiles.js

var tempString = "";
var searchPeople = function(sv){
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function(){
        if(xhttp.readyState == 4 && xhttp.status == 200){
            tempString = xhttp.responseText;
            loadPeople(tempString, sv);
        }
    }

    var searchvalue = sv;
    searchvalue = searchvalue.join(" ");

    xhttp.open("GET", "php/searchProfiles.php?searchvalue=" + searchvalue, true);
    xhttp.send();
}

var loadPeople = function(people, sv){
    loadedPeople = [];
    var normList = people.split(",");
    var list = people.toLowerCase().split(",");
    list.splice(list.length - 1, 1);
    var zsearch = sv;
    for(var i = 0; i < list.length; i++){
        loadedImageId[i] = list[i].split("_")[1];
        if(loadedImageId[i] == 0){
            loadedImageId[i] = "images/GrayProfilePic.png";
        }
        else{///////////////////////////////////This is what I need to fix
            var grabPic = new XMLHttpRequest();
            grabPic.onreadystatechange = function(){
                if(grabPic.readyState == 4 && grabPic.status == 200){
                    console.log("ready to go");
                    loadedImageId[i] = grabPic.responseText;
                    if(loadedImageId[i] == "Error1"){
                        loadedImageId[i] = "images/GrayProfilePic.png";
                    }
                }
            }

            grabPic.open("GET", "php/grabProfPics.php?imageid=" + loadedImageId[i], true);
            grabPic.send();
        }//////////////////////////////////////////////
        list[i] = list[i].split("_")[0];
        for(var j = 0; j < zsearch.length; j++){
            if(list[i].indexOf(zsearch[j]) > -1){
                if(loadedPeople.indexOf(list[i]) == -1){
                    if(loadedPeople.indexOf(normList[i].split("_")[0]) == -1){
                        loadedPeople.push(normList[i].split("_")[0]);
                    }
                }
            }
        }
    }
    console.log(loadedPeople);
    console.log(loadedImageId);

}

searchProfiles.php

$query = "SELECT username, imageid FROM `memberHandler`";
    $result = mysqli_query($connect, $query) or die("Could not query");
    while($row = mysqli_fetch_assoc($result)){
        echo $row['username'] . "_" . $row['imageid'] . ",";
    }

grabProfPics.php

$query = "SELECT image, mime_type FROM memberProfilePictures WHERE `id`='$imageid'";
    $result = mysqli_query($connect, $query);
    if(mysqli_num_rows($result) != 0){
        $row = mysqli_fetch_assoc($result);

        $imagesrc = $row['image'];
        $imagesrc = base64_encode($imagesrc);
        $imagetype = $row['mime_type'];

        echo "data:" . $imagetype . ";base64," . $imagesrc . "";
    }
    else{
        echo "Error1";
    }

然而，服务器需要一些时间来发送它的返回代码，此时 for 循环中的变量 i 早已被更改。有没有一种方法可以有效地做到这一点，并根据当前数组值使用新信息更新数组？我希望这个问题有意义!感谢您的帮助=)

基本上我试图循环遍历图像id，如果id不为零(意味着他们已经为其个人资料设置了图像 - 否则他们还没有并且id为0)，那么它将使用ajax来连接到图像数据库，获取与特定 ID 相关的图像，然后返回图像源并更新数组。很抱歉，在我认为我可以使用更简化的版本之前，我没有更具体地说出这一点。

Answer 1

发布问题更新:我在您粘贴所有代码之前写了这篇文章。它仍然适用，但还有一些想法:

• 您似乎只是将数据转储到 SQL 查询字符串中。 Little Bobby Tables会很自豪，但您应该担心 SQL 注入(inject)。
• 如果您坚持自己编写 std new XMLHttpRequest(); 代码(而不使用 fetch 或 jquery 之类的库)，则应该将其包装在 function(url,data,method ，成功Cb，错误Cb)。图书馆会提供帮助。
• 在您标记的错误代码中，以下是真正让您困扰的错误代码:

i 早已移动，并且与用于进行调用的索引不匹配。

loadedImageId[i] = grabPic.responseText;

继续，原始的 aysnc 解释:

异步代码

您将了解如何处理常规异步任务，其中包括 ajax 调用。

有很多方法可以解决这个问题，特别是 callbacks和 promises .

虽然您可以以同步方式执行此操作，但对于玩具或快速破解之外的任何其他内容，最好选择异步数据。

示例

首先，定义我们的服务。在这种情况下，它不会离开我们的机器，但原理是相同的。您发送一些内容(个人资料 ID)并获取一些内容(个人资料图片 URL)。

// After ~1-2 seconds, answer the callback with the evenness of the input
var isEvenAjax = function(num,cb) {
  setTimeout(function(){
    var isEven = num % 2 === 0;
    cb(num + " is " + (isEven ? "Even" : "Odd"));
  },(Math.floor(Math.random() * 12) + 3) * 150);
};

你可以有不同的签名，但这是关键。您将数据放入某物中，等待一段时间，然后得到响应。

例如:

isEvenAjax(2,console.log);
isEvenAjax(3,console.log);
isEvenAjax(7,console.log);

可能会产生以下反馈:

"7 is Odd"
"2 is Even"
"3 is Odd"

以及我们的测试数据:

var information = [
  10,11,12,
];

现在将我们的数据发送到服务并取回一些内容。一个简单的 foreach 就可以处理这个问题(注意:这是为了简单的演示目的。这可能很快就会变得非常困惑。Promise 是一个很好的方法)。

var getInformationResponses = function(information,cb) {
  var responses = [];
  information.forEach(function(i){
    isEvenAjax(i,function(response){
      console.log("Feedback for " + i + " is: " + response);
      responses.push({num:i,response:response});
      if (responses.length >= information.length){
        cb(responses);
      }
    });
  });
};

请注意，包装所有异步调用的函数本身就是异步的(并且，在我们的回调样式下，它需要“完成”回调)。

分解:

声明响应数组(我们将所有结果放入其中)后，循环遍历所有信息元素:

var responses = [];
information.forEach(function(i){

对于每个元素，进行异步调用。

isEvenAjax(i,function(response){

对于每个元素的回调(例如，当从长时间运行的服务返回数据时)，请使用 console.log(用于演示)进行记录，并将结果和推送到响应数组。维护源数据可能对所有应用程序来说并不重要，但在某些情况下(例如哪个配置文件 ID 对应于哪个配置文件 URL)它会。回想一下:异步调用永远不会保证顺序。

console.log("Feedback for " + i + " is: " + response);
responses.push({num:i,response:response});

现在，检查响应数量是否与请求匹配。如果不是，那么并不是所有的结果都在并且什么也不做。如果是，则触发主回调并将完整数据发送回主调用者。

if (responses.length >= information.length){
  cb(responses);
}

举个例子:

getInformationResponses(information,console.log);

可以返回诸如以下内容:

"Feedback for 10 is: 10 is Even"
"Feedback for 12 is: 12 is Even"
"Feedback for 11 is: 11 is Odd"
[[object Object] {
  num: 10,
  response: "10 is Even"
}, [object Object] {
  num: 12,
  response: "12 is Even"
}, [object Object] {
  num: 11,
  response: "11 is Odd"
}]

promise

本练习纯粹是为了探索如何处理异步调用，但在生产中效果不佳。此处未解决诸如错误处理(ajax 调用将失败)之类的问题。

正如 CallMeNorm 所提到的，promises可以很棒。我现在没有时间介绍它们。