如何在页面上没有提交按钮的情况下调用JS / ajax？

Question

我有一个网站页面，其中仅包含其中一个字段给出收件箱中邮件数量的数据，并且我需要刷新此内容，因为新邮件可以随时添加，因此用户在此页面上可以看到新消息。 我如何打电话给我的JS / ajax进行刷新？

我试过标题（“ Refresh：10”）; 但是客户不满意，因为它刷新了整个页面，他只希望消息进来时没有消息刷新……有人可以帮忙吗？ 谢谢

我对此页的代码：

<?php use_stylesheets_for_form($search_form) ?>
<?php use_javascripts_for_form($search_form) ?>
<div id='div_longgray_gradient2'>
<div id='div_float_img'>
<br/>
<table width='96%' border='0'>
<tr>
   <td colspan='2' align='right'>
    <form action="<?php echo url_for('profiles/search' ) ?>" method="post" > 
      <table>
      <tr>
      <td>
      <span class='spn_med_lightblue_rbc'>Profile Search &nbsp;&nbsp; 
      </span> 
      <?php echo $search_form['uc_other']->render(array('default')); ?>     </td>
      <td><input class='submit_img' type="image" src="/images/rainbow/gobuttonbluesmall.png" value="Submit" alt="Submit"></td>
    </tr>
            </table>
            </form>
    </td>
  </tr>
  <tr>
    <td rowspan='2' width='40px' align='left'>
        <img src='/images/rainbow/arrow.png'>
    </td>
    <td align='left'>
        <span class='spn_big_black_rbc'>WELCOME <?php echo $usr_profile->getName() ?></span>
    </td>
    <td align='left'>
    <?php     
       if (0)
        {
        // $filename = $usr_profile->getMsisdn();
        $filename = $usr_profile->getProfilePicPath();
        if ($filename && file_exists($filename))
        {                
            $source = imagecreatefromjpeg($filename);
        }
        else
        {                
            $filename = $usr_profile->getDefaultProfilePicPath();
            $source = imagecreatefromjpeg($filename);
            echo "<span class='spn_big_black_rbc'>You have not uploaded an image yet</span>";                
        }

    }
    if($usr_profile->existsProfilePic()==FALSE) 
    {
        echo "<span class='spn_big_black_rbc'>You have not uploaded an image yet</span>";     
        echo "</br>";           
    }

    if($usr_profile->checkForMissingInfo()== 1)
    {
        echo "<span class='spn_big_black_rbc'>You have some missing info</span>";  
        echo "&nbsp;&nbsp;&nbsp;&nbsp;";
        echo link_to('Edit','profile/edit','class=link_medium');
    }
    ?>

    </td>
</tr>
<tr>
<td align='left'>
    <span class='spn_med_lightblue_rbc'>TO RAINBOW</span>
    <span class='spn_med_black_rbc'>CODE</span>
    <span class='spn_med_lightblue_rbc'>...SHINE ON</span>
    </td>
    <td>
    </td>
</tr>
 </table>
 <br/>
 <table class='table_border_light' width='820px'>
<tr>
    <td class='td_header_blue' colspan='3' align='left'>
      <span class='spn_big_black_rbc'>
        MY FEEDS
      </span>
    </td>
    <td class='td_header_blue' colspan='3' align='left'>
        <span class='spn_big_black_rbc'>
            RAINBOWCODE NEWS
      </span>
    </td>
</tr>
<tr>
    <td valign='top' colspan='3' width='50%' align='left'>              
    <span class='spn_med_black_rbc'>You have <?php echo $new_mail_cnt ?> new </span>
    <?php echo link_to('Messages','messagebox/list','class=link_medium_blue'); ?>       
        </br>
        <span class='spn_med_black_rbc'>You have 
            <?php 
               echo sizeof($block_records); 
            ?> blocked users </span>
    </td>
    <td valign='top'colspan='3'  width='50%' align='left'>
            <ul>                
            <li>
               <a href="http://spreadsheets.google.com/a/miranetworks.net/spreadsheet/viewform?formkey=dEVlYTdJTzZiU0JPTnZqYWlZQTJRZ0E6MQ" class='link_medium_blue'> Rate us! Complete the online questionnaire</a></b>
            </li>
            <?php 
                foreach($news as $news_item)
                {
                    echo "<li>".$news_item->getNews(). "</li>";
                    $newsId = $news_item->getId();
                    if ($newsId == 1)
                    {
                       //some echos here to display text  
                    }
                }
            ?>
            </ul>   
    </td>   
</tr>
<tr>
    <td colspan='3' align='left'>
        <span class='spn_big_black_rbc'>
        MOOD BAROMETER
        <?php echo link_to('how does it work?','util/barometer','class=link_medium_blue'); ?>
      </span>
        <?php 
            include_component('profile','moodmetershow');  
        ?>
    </td>
    <td colspan='3' align='left'> 
        <?php
            include_component('profile','moodmeter'); 
        ?>
    </td>
</tr>
<tr>
    <td colspan='3' align='left'>
     &nbsp;
    </td>
</tr>
</table>
</div>
</div>

我为此添加了$ new_mail_cnt：

echo $new_mail_cnt = '<script type="text/javascript">getMessages();</script>';

然后我有：

<script language="JavaScript" type="text/javascript">
    var receiveReq = getXmlHttpRequestObject();
    var mTimer;

    function getXmlHttpRequestObject()
    {
        if (window.XMLHttpRequest)
        {
            return new XMLHttpRequest();
        } 
        else if(window.ActiveXObject)
        {
            return new ActiveXObject("Microsoft.XMLHTTP");
        } 
        else 
        {
            document.getElementById('p_status').innerHTML = 
            'Status: Cound not create XmlHttpRequest Object.' +
            'Consider upgrading your browser.';
        }
    }

    function getMessages()
    {
        receiveReq = getXmlHttpRequestObject();
        if (receiveReq.readyState == 4 || receiveReq.readyState == 0)
        {                    
            receiveReq.open("POST", 'getMessage.php', true);
            receiveReq.onreadystatechange = handleReceiveMessage();   
            receiveReq.send(null);
            document.getElementById('new_messages').innerHTML = receiveReq.responseXML;  //not sure here   
        }  
        mTimer = setTimeout('getMessage();',2000);  
    }

    function handleReceiveMessage()
    {
        if (receiveReq.readyState == 4)
        {
            var chat_div = document.getElementById('div_chat');
            var xmldoc = receiveReq.responseXML;
            var message_nodes = xmldoc.getElementsByTagName("message"); 
        }
    }    
 </script>

Answer 1

在javascript http://www.w3schools.com/js/js_timing.asp中尝试计时器

Answer 2

AJAX是一项允许您在页面加载后向服务器启动Web请求的技术。 使用AJAX请求时，不必重新加载页面（实际上，用户甚至不会注意到正在发生请求）。

您应该向服务器启动AJAX请求，该请求将检查是否有新消息。

要连续检查新消息，可以使用window.setTimeout或window.setInterval方法创建计时器，以在指定时间段启动AJAX请求。

当我不提倡使用库时，如果一个问题未提及对库的任何使用，我并不喜欢，但您可能会发现，使用库（例如jQuery ）将大大简化管理AJAX请求的过程，因为它附带了完整的文档。该模块为您完成了艰苦的工作。

无论您是否选择使用库来执行AJAX请求，该解决方案的工作流程都如下：

1. 在计时器上（例如，每10秒启动一个AJAX请求）到服务器上的网页（例如checkfornewmessages.php ）。
2. 在您的服务器上，检查是否有新消息，并在输出中包括要显示给用户的内容（例如，新消息的数量，消息的标题等）。
3. 在AJAX请求的回调中，将AJAX调用的响应（将包含您在PHP代码中创建的输出）设置为页面上DOM元素之一的内容（例如<span class='spn_med_black_rbc'>You have <?php echo $new_mail_cnt ?> new </span> ）。

Answer 3

我假设在您的use_javascripts_for_form（$ search_form）中，如果没有jQuery引用，您可以下载它并将其包含在标题中

======注意未完成======

更改以下行

     <span class='spn_med_black_rbc'>You have <?php echo $new_mail_cnt ?> new </span>

至

     <span class='spn_med_black_rbc'>You have <div id='newMessageDiv'><?php echo $new_mail_cnt ?></div> new </span>

将类似以下内容的内容添加到HEAD标记中

     $(document).ready(function() {
         $("#newMessageDiv").load
    ("newMessageCheck.php");
       var refreshId = setInterval(function() {
          $("#newMessageDiv").load('newMessageCheck.php?randval='+ Math.random());
       }, 10000);
       $.ajaxSetup({ cache: false });
    });

这将尝试每隔10秒使用newMessageCheck.php的内容刷新div，此文件应仅输出一个与当前新消息量相同的值。

Answer 4

你把：

setTimeout(samefunction,milliseconds)

在您要自动充电并调用相同功能的功能中

这将创建一个无限循环，等待x毫秒