dongsi4815 2014-11-23 18:43
浏览 61
已采纳

向脚本添加多个AJAX调用

I need to add a function to my script that gets the current server time.

I use the PHP file below to get the server time in milliseconds.

<?php
date_default_timezone_set('Europe/London');
$serverTime = round(microtime(true) * 1000);
echo json_encode($serverTime);
?>  

Then i would like to add an Ajax request to 'get' serverTime.PHP and put it into a variable so that i can calculate the time before something ends correctly.

I currently get the clients time by using this

var now   = new Date ().getTime();

Now i want to remove that line and add my ajax request.

I have tried adding the following code into the script but i can not get it to execute

function now ()
{
    this.ajax.open('GET', 'serverTime.php',
                   true);
    this.ajax.send(null);       

    if (this.ajax.readyState != 4) return;
    if (this.ajax.status == 200)
    {
        // get response
        var now = eval ('('+this.ajax.responseText+')');
    }
}

The end result being the variable 'NOW' contains the output of serverTime.PHP

Here is my script, i have tried to add anothert ajax get request in various ways but i cant get it to function correctly.

$.ajaxSetup({
    type: 'GET',
    headers: { "cache-control" : "no-cache" }
});

var PlayList = function (onUpdate, onError)
{
    // store user callbacks
    this.onUpdate = onUpdate; 
    this.onError  = onError;

    // setup internal event handlers
    this.onSongEnd = onSongEnd.bind (this);

    // allocate an Ajax handler
    try
    {
        this.ajax = window.XMLHttpRequest
            ? new XMLHttpRequest()
            : new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch (e)
    {
        // fatal error: could not get an Ajax handler
        this.onError ("could not allocated Ajax handler");
    }
    this.ajax.onreadystatechange = onAjaxUpdate.bind(this);

    // launch initial request
    this.onSongEnd ();

    // ------------------------------------------
    // interface
    // ------------------------------------------

    // try another refresh in the specified amount of seconds
    this.retry = function (delay)
    {
        setTimeout (this.onSongEnd, delay*5000);
    }

    // ------------------------------------------
    // ancillary functions
    // ------------------------------------------

    // called when it's time to refresh the playlist
    function onSongEnd ()
    {
        // ask for a playlist update
        this.ajax.open('GET', 'playlist.php', // <-- reference your PHP script here
                       true);
        this.ajax.send(null);       
    }

    // called to handle Ajax request progress
    function onAjaxUpdate ()
    {       
        if (this.ajax.readyState != 4) return;
        if (this.ajax.status == 200)
        {
            // get response
            var list = eval ('('+this.ajax.responseText+')');

            // compute milliseconds remaining till the end of the current song
            var start = new Date(list[0].date_played.replace(' ', 'T')).getTime();  
            var now   = new Date (                                    ).getTime();
            var d = start - now + 6500
                  + parseInt(list[0].duration);
            if (d < 0)

            {
                // no new song started, retry in 3 seconds
                d = 3000;
            }
            else
            {
                // notify caller
                this.onUpdate (list);
            }

            // schedule next refresh
            setTimeout (this.onSongEnd, d);

        }
        else
        {
            // Ajax request failed. Most likely a fatal error
            this.onError ("Ajax request failed");
        }       
    }
}

var list = new PlayList (playlistupdate, playlisterror);

function playlistupdate (list)
{
for (var i = 0 ; i != list.length ; i++)
    {
        var song = list[i];

    }
{

    document.getElementById("list0artist").innerHTML=list[0].artist;
    document.getElementById("list0title").innerHTML=list[0].title;
    document.getElementById("list0label").innerHTML=list[0].label;
    document.getElementById("list0albumyear").innerHTML=list[0].albumyear;
    document.getElementById("list0picture").innerHTML='<img src="/testsite/covers/' + list[0].picture + '" width="170" height="170"/>';

    document.getElementById("list1artist").innerHTML=list[1].artist;
    document.getElementById("list1title").innerHTML=list[1].title;
    document.getElementById("list1label").innerHTML=list[1].label;
    document.getElementById("list1albumyear").innerHTML=list[1].albumyear;
    document.getElementById("list1picture").innerHTML='<img src="/testsite/covers/' + list[1].picture + '" width="84" height="84"/>';

    document.getElementById("list2artist").innerHTML=list[2].artist;
    document.getElementById("list2title").innerHTML=list[2].title;
    document.getElementById("list2label").innerHTML=list[2].label;
    document.getElementById("list2albumyear").innerHTML=list[2].albumyear;
    document.getElementById("list2picture").innerHTML='<img src="/testsite/covers/' + list[2].picture + '" width="84" height="84"/>';

    document.getElementById("list3artist").innerHTML=list[3].artist;
    document.getElementById("list3title").innerHTML=list[3].title;
    document.getElementById("list3label").innerHTML=list[3].label;
    document.getElementById("list3albumyear").innerHTML=list[3].albumyear;
    document.getElementById("list3picture").innerHTML='<img src="/testsite/covers/' + list[3].picture + '" width="84" height="84"/>';

    document.getElementById("list4artist").innerHTML=list[4].artist;
    document.getElementById("list4title").innerHTML=list[4].title;
    document.getElementById("list4label").innerHTML=list[4].label;
    document.getElementById("list4albumyear").innerHTML=list[4].albumyear;
    document.getElementById("list4picture").innerHTML='<img src="/testsite/covers/' + list[4].picture + '" width="84" height="84"/>';

$('.nowPlayNoAnimate').each(function() {
    $(this).toggleClass('nowPlayAnimate', $(this).parent().width() < $(this).width());
});

}
}

function playlisterror (msg)
{
    // display error message
    console.log ("Ajax error: "+msg);

    //retry
    list.retry (10); // retry in 10 seconds
}
  • 写回答

2条回答 默认 最新

  • dongying9712 2014-11-23 18:52
    关注

    Why not use the jquery method ?

    function getServerTime() {
      var now = null; 
      $.ajax({
        url: "serverTime.php",
        dataType: 'JSON',
        async: false,
        success: function (data) {
          now = data;
        }
      });
      return now;
    }
    

    You can start as many requests as you want in a browser-portable way.

    PS: you may also want to replace document.getElementById("list4artist").innerHTML=list[4].artist;

    by the shorter $("#list4artist").html(list[4].artist);

    Edit: Add async parameter to make the execution wait for the ajax call to simulate a non-asynchronous function call.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 如何用Thoony写ESP32温湿度检测无源蜂鸣器报警代码?
  • ¥20 部件内部的CT图像数据集
  • ¥15 Visual studio调用动态库
  • ¥15 双目摄像头标定后的校准文件
  • ¥15 powerbi举证增加度量值后出现对应关系错乱
  • ¥30 频率分析法分析绘制奈奎斯特图、波特图
  • ¥15 弹出来一万个系统找不到指定的文件框框,怎么解决
  • ¥15 ADS生成的微带线为什么是蓝色空心的
  • ¥15 求一下解题思路,完全不懂
  • ¥15 tensorflow