在浏览器上创建ajax更新值而不刷新

时间:2014-05-14 13:51:19

标签: javascript php jquery ajax xml

我使用ajax jquery从XML文件中读取一个值,并在浏览器中显示问题,当我更改我的xml文件的值时,我无法弄清楚如何在浏览器中自动更改它 xml(counter.xml)文件:

    <?xml version="1.0"?>
    <count><number>5</number></count>

php(slideshow.php):

 <!doctype html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <style>
            body { font-family: Helvetica, Arial, sans-serif; line-height: 1.3em; -webkit-font-smoothing: antialiased; }
            .container {
                width: 90%;
                margin: 20px auto;
                background-color: #FFF;
                padding: 20px;
            }
            pre, code {
            font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
            font-size: 12px;
            color: #333;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
          }
          pre { border: 1px solid #CCC; background-color: #EEE; color: #333; padding: 10px; overflow: scroll; }
          code { padding: 2px 4px; background-color: #F7F7F9; border: 1px solid #E1E1E8; color: #D14; }
        </style>
    </head>
    <body>
        <div id="result">
    <script type="text/javascript">

    function ajaxRequest(){
     var activexmodes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"] //activeX versions to check for in IE
     if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
      for (var i=0; i<activexmodes.length; i++){
       try{
        return new ActiveXObject(activexmodes[i])
       }
       catch(e){
        //suppress error
       }
      }
     }
     else if (window.XMLHttpRequest) // if Mozilla, Safari etc
      return new XMLHttpRequest()
     else
      return false
    }

    var mygetrequest=new ajaxRequest()
    if (mygetrequest.overrideMimeType)
     mygetrequest.overrideMimeType('text/xml')
    mygetrequest.onreadystatechange=function(){
     if (mygetrequest.readyState==4){
      if (mygetrequest.status==200 || window.location.href.indexOf("http")==-1){
       var xmldata=mygetrequest.responseXML //retrieve result as an XML object
       var rssentries=xmldata.getElementsByTagName('Count')
       var output='<ul>'
       for (var i=0; i<rssentries.length; i++){
        output+='<li>'
        output+='<a href="'+rssentries[i].getElementsByTagName('Number')[0].firstChild.nodeValue+'">'
        output+=rssentries[i].getElementsByTagName('Number')[0].firstChild.nodeValue+'</a>'
        output+='</li>'
       }
       output+='</ul>'
       document.getElementById("result").innerHTML=output
      }
      else{
       alert("An error has occured making the request")
      }
     }
    }

    mygetrequest.open("GET", "counter.xml", true);
    mygetrequest.send(null);
    </script>
    <script type="text/javascript">
    refreshdiv();
    </script>
        </div>
    </body>    
        <script src="../libs/jquery/jquery.js"></script>
        <script src="../src/jquery.backstretch.js"></script>
        <script>
            $.backstretch([
              <?php
                    $directory = "images/";
                    //get all image files with a .jpg extension.
                    $images = glob($directory . "*.j*");
                    //print each file name
                    $output="";
                    //$nbrImages= 0;
                    foreach($images as $image)
                        {
                            $output.="'".$image."',";
                            //$nbrImages = $nbrImages + 1;
                        }
                    echo substr_replace($output,"",-1); 
              ?>
            ], {
                fade: 750,
                duration: 4000
            });
        </script>
    </body>
    </html>

3 个答案:

答案 0 :(得分:0)

尝试这个

setTimeout(function(){
 //your ajax code
},100);

答案 1 :(得分:0)

你需要这样的东西

setInterval(
    function(){
        //your ajax call
    }
    ,100 //The time in milliseconds that should repeat the ajax call 
);

setInterval函数设置一个逻辑,该逻辑将在您设置的时间内重复给定任务。因此,您可以每隔x秒检查并加载.xml文件。

你可以像这样停止重复

var interval = setInterval(function(){ //your function }, 100);
clearInterval(interval);

其他来自@pratik nagariya提到了

setTimout()

功能只会延迟您的通话,但不会重复。

答案 2 :(得分:0)

我刚做了一些快速搜索,发现你可以使用这段代码:

reloadinterval=window.setInterval(function(){
    old=rssentries;
    // your ajax reqest code
    if(!(rssentries==old)){window.reload();}

}, 3000 //the time interval in milliseconds);