javascript - 如何根据服务器上的内容更新客户端 JavaScript？

Question

我对此进行了研究，但是当您不知道最好的方法甚至不知道如何开始时，就很难找到一些东西。我显然没有任何代码，所以我将描述我的问题，希望有人能指出我解决此问题的正确方法:

好吧，假设我有一个页面，其中有一个名为“myfunction1”的 JavaScript 函数，该函数通过在 js 中使用 setinterval 每 x 秒触发一次。我想要它做的是，(也许使用 AJAX？)当调用“myfunction1”时，调用一个 php 脚本来检查数据库中的某些内容。如果某个条件为 TRUE，我希望在客户端的 javascript 中调用特定函数。如果为 FALSE，我希望它调用不同的函数。

我的直觉让我认为这样做的方法是让 ajax 调用 php 检查脚本，然后根据 true 或 false 回显正确的 javascript 代码。但我该怎么做呢？我知道如何使用ajax来更改标签的.innerhtml，但是你可以用这种方式使用它来重写脚本标签吗？我头晕目眩，希望我说得有道理，你们中的一个人能给我指出正确的方法

Answer 1

AJAX 可能是最简单的解决方案，可用于评估返回的脚本，或者您可以手动验证/显示服务器处理的XmlHttpRequest 的响应。

例如使用 jQuery.ajax 时您可以将 dataType 选项更改为 script。否则，您可以使用 JSON 在 success 回调中手动编程验证，如下所示。

javascript (jQuery)

jQuery(function($) {
   'use strict';
   var element = $('#myElement');
   var ajax = null;
   var ajaxTimeout = 0;

   function myFunction1() {
       if (null !== ajax) {
          //prevent overlapping ajax requests
          ajax.abort();
          ajax = null;
       }
       ajax = $.ajax({
         url: '/response.php',
         method: 'post',
         dataType: 'json',
         success: function(data) {
            //parse the server side response
            if (data.result === true) {
               trueFunction(data);
            } else {
               falseFunction(data);
            }
            ajax = null;
         }
      });
   }

   //custom functions for true or false and setInterval.
   function trueFunction(data) {
      element.html('Success: ' + data.value);
   }

   function falseFunction(data) {
      element.html('Failed: ' + data.value);
   }

   ajaxTimeout = window.setInterval(myFunction1, 1000);
});

response.php

<?php 

header('Content-Type: application/json');
$date = new \DateTime;
echo json_encode((object) [
    'value' => 'Hello World ' . $date->format('Y-m-d h:i:s a'), 
    'result' => true
]);
exit;