Ajax:批量url列表在文本区发送请求一个接一个，并显示重复的答案 - Ajax: bulk url list in textarea sending requests one after another and display answers repetitive

Ajax: bulk url list in textarea sending requests one after another and display answers repetitive

我想在文本区输入大量url列表(每行包含1个url)。提交表单后，ajax应该获取一个url，用这个url做php操作，返回结果，获取另一个url，重复相同的操作。当洞的事情是工作，应该显示一个加载圈("ajax-loader.gif")，结果应该一个接一个地显示，如:

[Submit] -> loading -> result1st -url -> loading ->在result1st -url -> loading ->在result2url ->…下添加result3rd -url一行

我做这整个ajax/js的东西从昨天开始-所以我不是很有经验的方式- php工作没有错误。我的主要问题是js/ajax请求;如何接收结果，用它做事情，…这是我到目前为止写的:

js/ajax (w.o. jquery，因为我不喜欢这个符号):

function send (){
  var url = document.getElementById('comment').value.split(''n'); //split input from textarea in array
  document.getElementById("load").innerHTML='<img src="ajax-loader.gif" />';
for(var i=0;i<url.length;i++) {
  http = new XMLHttpRequest();
  http.open("POST", "check.php", true);
  http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
  http.send("name=" + url[i]);
  http.onreadystatechange=function() {
    if (http.readyState == 4) {
      document.getElementById("result").innerHTML=http.responseText;
    }
  }
}   
}

html:

<form method="post" action="" name="Formular">
<textarea cols="100" rows="10" id="comment"></textarea><br/>
<input type="button" value="Absenden" onClick="send()">
</form>
<div id="load"></div>
<div id="result"></div>

php:

<?php
$url = $_POST['name']; //get url
..do funky stuff..
echo $result; //result is a simple string if an element on that url exists
?>

您需要做的是使您的ajax函数递归，例如，在完成时，它调用自己，而不是使用循环。

下面是一个完整的示例，包含在一个php文件中，名为ajax-example.php:

<?php
if($_SERVER['REQUEST_METHOD']=='POST'){
    sleep(1);
    echo $_POST['name'];
    die();
}
?>
<html>
<head></head>
<body>
<div id="load">doin nothin</div>
<textarea name="n" id="comment" cols="30" rows="10"></textarea>
<br/>
<button onclick="send()">send</button>
<div id="result"></div>

<script type="application/javascript">
    function send (){
        var url = document.getElementById('comment').value.split(''n'); //split input from textarea in array
        var current = 0;
        var total = url.length;
        document.getElementById("load").innerHTML='loading';//'<img src="ajax-loader.gif" />';
        //call ajax for 1st time
        ajax();
        function ajax(){
            //if there are urls left to process
            if(current < total){
                var http = new XMLHttpRequest();
                http.open("POST", "/ajax-example.php", true);
                http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
                http.send("name=" + url[current]);
                //increment current marker
                current++;
                http.onreadystatechange=function() {
                    if (http.readyState == 4) {
                        var res = document.getElementById("result");
                        res.innerHTML=res.innerHTML + http.responseText +"</br>";
                        //recursive call
                        ajax();
                    }
                }
            }else{
                //we are done, remove the loading img
                document.getElementById("load").innerHTML='finished';
            }
        }
    }
</script>
</body>
</html>

再补充一点，不要因为你不喜欢jQuery的语法就不喜欢它，它可以让你的生活更容易进行非琐碎的dom操作