javascript - 每个循环内的 Ajax 调用

Question

我发现了很多关于这个主题的帖子。但是我找到的解决方案并没有太多不适合我的地方。一些专家建议更改代码结构，但我不确定该怎么做。

我想要的:
1) 从 SQL 数据库中获取电影列表
2) 从网站获取每部电影的信息

我面临的问题:PHP MAX_TIMEOUT 发生。

我想到的解决方案:分别为每部电影调用异步请求

瓶颈异步请求过多

您能否建议如何实现它(如果可能，请只使用 JS，而不是 jquery)？

部分解决方案来自网络:

1) 使用 ASYNC = FALSE....我不想使用 SYNC 请求，那么使用 Ajax 毫无意义
2) 收集所有数据，然后进行一次 Ajax 调用……好吧，我首先这样做了……但它是一个很长的脚本(从 Web 获取电影信息)，所以最终导致 PHP MAX_TIMEOUT
3) 增加PHP MAX_TIMEOUT ...不可行，我不知道增加多少。

JS

function loadData(mArray){
    mArray = [{"movieid":"1","title":"10 Things I Hate About You"},{"movieid":"2","title":"100 Girls"}]; // TO SIMLYFY, I PUT THIS CODE HERE .. NORMALLY I GET THIS ARRAY USING ANOTHER AJAX CALL
    for (var i = 0; i < mArray.length; i++) { 
        var obj = mArray[i];
        webAjaxcall(obj["mid"],obj["title"]);  // DEFINITELY NOT A GOOD IDEA
    }
    return true;
}

function webAjaxcall(mid,title){
    var xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
            //DO SOMETHING
        }
    }
    xmlhttp.open("POST","file2.php",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    params = "title="+title+"&mid="+mid;
    xmlhttp.send(params);
}

以防万一有人想知道我是如何填充 JS 数组的:

文件 1

$sql = "SELECT `movieid`,`title` FROM movielist";
    $result = mysql_query($sql) or die(mysql_error());
    while($row=mysql_fetch_assoc($result)){
    $output[] = $row;
    }
    exit(json_encode($output));

文件 2

$json=file_get_contents("http://www.website.com/?t=".rawurlencode($moviename));
$info=json_decode($json);
DO SOMETHING

通过 AJAX 获取电影列表

var xmlhttp=new XMLHttpRequest();
var myarr;
xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
        myarr = xmlhttp.responseText;
        loadData(JSON.parse(myarr));
    }
}
xmlhttp.open("POST","file1.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
params = "fname=<?php echo $ses_id;?>";
xmlhttp.send(params);

Answer 1

注意: ASYNC = FALSE 表示同步，表示一切按顺序发生，一个调用等待前一个调用，并且最终导致阻塞代码。

解决方案/意见:假设您提取数据的站点(或 API)无法在单个请求中处理多个结果，这是您能够处理此问题的唯一方法循环 ajax 请求的数量是将 ajax 结果直接缓存在您的 SQL 数据库中:

::伪架构::

让我们假设以下 PHP 文件:

index.php

• 显示你的结果
• 处理循环逻辑以使用单个 SQL 查询显示您的电影
• 未缓存的结果显示“正在加载”指示器
• 编写一个 $(document).ready() 函数，循环遍历所有“未缓存”的电影，使用适当的 异步调用 get.php GET 尚未缓存的每个条目的参数。这样它就不会影响页面加载时间，因为它发生在页面已经加载之后。

::伪代码::

for movie in movies
    if object has cached data and date retrieved is less than [some time ago]
        return data from SQL db
    else
        display a "caching in progress" notification for that title
        send GET request to get.php

注意:您可能需要排队/延迟对 get.php 的请求，具体取决于您的服务器有多强大，以免同时运行 1000 个单独的线程。

get.php

• 示例网址:http://www.yoursite.com/get.php?name=superman&year=1980
• 检索从您的 index.php 的 ajax 循环发送的 $_GET 参数，并将请求转发到您的第 3 方 API/网站。
• 您希望这是异步的，尽快抛出一个连接关闭 (see how to do that)
• 将其视为 API“代理”

::伪代码::

send 200 ok status code and connection-close header
get $_GET parameters
retrieve API data for your movie by sending $_GET parameters
cache to your SQL db once data is returned

最终，页面会实时加载，并且为了查看新数据，您需要刷新页面(或者如果您真的想变得很花哨，可以使用通知客户端的 WebSockets 做一些事情)。