javascript - How to check and recheck within ajax and wait until the value of the server message changes?

Question

I am working ona application, when the user clicks on the "save" button in the application, it saves the information and restarts the server. The form has to be successfully submitted before ajax success will fire. If the information is saved correctly from the form, i get a 200 success message from the server.

If there is success(200) the server restarts, when the Server restarts or is restarting it gives a 500 internal server message, it take about 30 to 40 sec or more to restart the server so i have await time for 30 sec.. Once the server restarts it gives a 200 success server message.

Currently I am using Ajax call 2 to check for success for data submission for server restart and the other 1st Ajax call 1 to recheck the server is restarting and the data has been updated.

I have currently the following 2 ajax codes

Ajax call 1

 $.ajax({
           // dataType : 'jsonp',
            //jsonp : 'js',
            url: "some.json",
            beforeSend : function(jqXHR, settings) {
                console.info('in beforeSend');
                console.log(jqXHR, settings);
            },
            error : function(jqXHR, textStatus, errorThrown) {
                alert(" 500 top data still loading"+ jqXHR +  " : " + textStatus +  " : " + errorThrown);
                console.info('in error');
                console.log(jqXHR, textStatus, errorThrown);
            },
            complete : function(jqXHR, textStatus) {
             alert(" complete "+ jqXHR +  " : " + textStatus);
                console.info('in complete');
                console.log(jqXHR, textStatus);
            },
            success: function(data, textStatus, jqXHR){
            alert(" success "+ jqXHR +  " : " + textStatus);
                console.info('in success');
                console.log(data, textStatus, jqXHR);
            }
        });

Ajax call 2

 $(function () {
    $("#save").click(function () {

        $.ajax({
            type: "POST",
            url: "some.json",
            data: json_data,
            contentType: 'application/json',
            success: function (data, textStatus, xhr) {
                console.log(arguments);
                console.log(xhr.status);
                alert("Your changes are being submitted: " + textStatus + " : " + xhr.status);
                $('#myModal').modal('hide');
                /*                   
        This gives a messagthat  the server is restarting iina modal window and waits for 30sec
        */
                $('#myModal-loading').modal('show');

/***  Re check bit by Ryan ***/
var restartCheck = window.setInterval(
$.ajax({
    // dataType : 'jsonp',
    //jsonp : 'js',
    url: "../../../../../rest/configuration",
    beforeSend: function (jqXHR, settings) {
        console.info('in beforeSend');
        console.log(jqXHR, settings);
    },
    error: function (jqXHR, textStatus, errorThrown) {
        alert(" 500 top data still loading " + jqXHR + " : " + textStatus + " : " + errorThrown);
        console.info('in error');
        console.log(jqXHR, textStatus, errorThrown);

    },
    complete: function (jqXHR, textStatus) {
        alert(" complete " + jqXHR + " : " + textStatus);
        console.info('in complete');
        console.log(jqXHR, textStatus);
    },
    success: function (data, textStatus, jqXHR) {
        window.clearInterval(restartCheck);
        alert(" success " + jqXHR + " : " + textStatus);
        console.info('in success');
        console.log(data, textStatus, jqXHR);
    }
}), 30000); //This will call the ajax function every 3 seconds until the clearInterval function is called in the success callback.
/*** recheck bit **/

                setTimeout(function () {
                    location.reload(true);
                }, 30000);

                $('<div id="loading">Loading...</div>').insertBefore('#myform-wiz');

            },

            error: function (jqXHR, textStatus, errorThrown) {
                alert(jqXHR.responseText + " - " + errorThrown + " : " + jqXHR.status);

            }
        });

    });
});



});

Is it possible to re-check continuously within success in Ajax call 2 , if the server is giving a 500 error message to check for restart of server and recheck for success for 200 before redirecting back to the updated page?

score 1 · Accepted Answer

您可能只使用 setInterval。不要忘记在成功回调中清除它。

var restartCheck = window.setInterval(    
$.ajax({
           // dataType : 'jsonp',
            //jsonp : 'js',
            url: "some.json",
            beforeSend : function(jqXHR, settings) {
                console.info('in beforeSend');
                console.log(jqXHR, settings);
            },
            error : function(jqXHR, textStatus, errorThrown) {
                alert(" 500 top data still loading"+ jqXHR +  " : " + textStatus +  " : " + errorThrown);
                console.info('in error');
                console.log(jqXHR, textStatus, errorThrown);

            },
            complete : function(jqXHR, textStatus) {
                alert(" complete "+ jqXHR +  " : " + textStatus);
                console.info('in complete');
                console.log(jqXHR, textStatus);
            },
            success: function(data, textStatus, jqXHR){
                window.clearInterval(restartCheck);
                alert(" success "+ jqXHR +  " : " + textStatus);
                console.info('in success');
                console.log(data, textStatus, jqXHR);
            }
        })
, 3000);  //This will call the ajax function every 3 seconds until the clearInterval function is called in the success callback.

score 0 · Accepted Answer

好吧，我的想法可能是将您的ajax请求放入一个方法中并执行以下操作：

1.发送请求以保存您的数据并重新启动服务器。

2.在这个过程中你需要验证数据在数据库中没有重复。

3.如果出现错误，则该方法会一次又一次地执行，但由于在编号 2 中实施的验证，数据不会被双重保存，只有服务器会重新启动。

为了开始这一切，我模拟了你的情况。只是要知道，我不知道您使用的是哪种服务器语言（因为问题中未指定tags），但我将使用它PHP来简化此操作...

以下示例说明了这一点：

用户在文本框中输入他/她的姓名，然后当他/她单击“保存”按钮时，数据将被发送到服务器，并50s在回调后返回到客户端。但是，如果输入名称是，oscar那么服务器将返回500 HTTP错误，您将看到代码如何再次执行以尝试再次“重新启动”服务器（记住这是一个模拟）。否则一切都会返回200 HTTPOK。

请阅读代码中的所有注释，检查浏览器控制台，如果可以的话……测试一下！

index.php：这是主页。

<html>
<head>
<title>Simulation</title>
</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('#btn').click(function() {
     save();
  });
});

function save() {

    $('#msg').text('Please wait while restarting the server...').show();
    $('#btn').hide();

    $.ajax({
        type: 'POST',
        url: 'process.php',
        data: $('form').serialize(),
        statusCode: {
            500: function() { 

                console.log('500 HTTP error present, try again...');

                /* Invoke your method again to try restarting the server. 
                 * To avoid double save of 'name' variable please 
                 * check the first comments at 'process.php' file.
                 */
                $('#msg').text('Re-trying to restart the server...');

                /* While waiting check the browser console and look that 
                 * the save method is getting invoked again and again until 
                 * you change the name from 'oscar' to another.
                 */
                save();
            },
            200: function() {
                $('#msg').text('Server restarted!').fadeOut('slow');
                $('#btn').fadeIn();
            }
        }
    });

};
</script>
<body>
<span id="msg"></span>
<br/>
<form>
Name: <input type="text" name="name" id="name"/><br/>
<input type="button" name="btn" id="btn" value="Save"/>
</form>
</body>
</html>

process.php：该文件将接收ajax来自 jQuery 的请求（只是要知道我使用的是1.7.2版本）。

<?php
if(isset($_POST['name'])){

  $name = $_POST['name'];

  /* TODO: In this case and at this point, you need to save the 
   * name into DB but only if it doesn't exist because if 500 error
   * is present, then the request have to be validated again to 
   * just restart the server (maybe doing some if/else to evaluate) and 
   * don't make a double save.
   */

  /* TODO: restart the server... 
   * I will simulate the long wait for the server to respond (50s)
   * using sleep before sending back the name variable to client side.
   *
   * But!
   * I will do a tricky thing at this point. If the name is 'oscar' then
   * I will produce a 500 HTTP error to see what happens at client side...
   */

   /* Wait first 27s */
   sleep(27);

   /* If $name is 'oscar' then return 500 error */
   if($name == 'oscar') {
    throw new Exception('This is a generated 500 HTTP server error.');
   }

   /* If $name != 'oscar' then wait 23s to simulate 
    * the long time for restarting server...
    */
    sleep(23);

    flush();

    /* Retun $name in the callback */
    echo $name;  
}
?>

希望这可以帮助：-）

javascript - How to check and recheck within ajax and wait until the value of the server message changes?

2 回答 2

Related

Reference