PHPスクリプトの実行中に読み込みイメージを追加する

Question

URLのリストからメタデータを取得するPHPスクリプト（以下に貼り付け）があります。読み込みに時間がかかることがあります。彼らがbroswerタブの読み込みアイコンに目を留めない限り）

私は長い間オンラインを見てきましたが、これに対する解決策を見つけることができませんでした。私はAjaxを使用することができますが、このスクリプトで使用しますか？

ありがとうございました！

<script type="text/javascript"> 
function showContent(vThis) 
{ 
    // http://www.javascriptjunkie.com 
    // alert(vSibling.className + " " + vDef_Key); 
    vParent = vThis.parentNode; 
    vSibling = vParent.nextSibling; 
    while (vSibling.nodeType==3) { // Fix for Mozilla/FireFox Empty Space becomes a TextNode or   Something 
     vSibling = vSibling.nextSibling; 
    }; 
    if(vSibling.style.display == "none") 
    { 
     vThis.src="collapse.gif"; 
     vThis.alt = "Hide Div"; 
     vSibling.style.display = "block"; 
    } else { 
     vSibling.style.display = "none"; 
     vThis.src="expand.gif"; 
     vThis.alt = "Show Div"; 
    } 
    return; 
} 

</script> 



<form method="POST" action=<?php echo "'".$_SERVER['PHP_SELF']."'";?> > 
<textarea name="siteurl" rows="10" cols="50"> 
<?php //Check if the form has already been submitted and if this is the case, display the submitted content. If not, display 'http://'. 
echo (isset($_POST['siteurl']))?htmlspecialchars($_POST['siteurl']):"http://";?> 
</textarea><br> 
<input type="submit" value="Submit"> 
</form> 
</div> 

<div id="nofloat"></div> 
<div style="margin-top:5px;"> 
<h4><img src="expand.gif" alt="Show Div" border="0" style="margin-right:6px; margin- top:3px; margin-bottom:-3px; cursor:pointer;" onclick="showContent(this);" />Show me the script working!</h4> 
<div style="margin-top:5px; display:none;"> 
<table class="metadata" id="metatable_1"> 
<?php 
ini_set('display_errors', 0); 
ini_set('default_charset', 'UTF-8'); 
error_reporting(E_ALL); 
//ini_set("display_errors", 0); 
function parseUrl($url){ 
    //Trim whitespace of the url to ensure proper checking. 
    $url = trim($url); 
    //Check if a protocol is specified at the beginning of the url. If it's not,  prepend 'http://'. 
    if (!preg_match("~^(?:f|ht)tps?://~i", $url)) { 
      $url = "http://" . $url; 
    } 
    //Check if '/' is present at the end of the url. If not, append '/'. 
    if (substr($url, -1)!=="/"){ 
      $url .= "/"; 
    } 
    //Return the processed url. 
    return $url; 
} 
//If the form was submitted 
if(isset($_POST['siteurl'])){ 
    //Put every new line as a new entry in the array 
    $urls = explode("\n",trim($_POST["siteurl"])); 
    //Iterate through urls 
    foreach ($urls as $url) { 
      //Parse the url to add 'http://' at the beginning or '/' at the end if not already there, to avoid errors with the get_meta_tags function 
      $url = parseUrl($url); 
      //Get the meta data for each url 
      $tags = get_meta_tags($url); 
      //Check to see if the description tag was present and adjust output accordingly 
      $tags = NULL; 
$tags = get_meta_tags($url); 
if($tags) 
echo "<tr><td>$url</td><td>" .$tags['description']. "</td></tr>"; 
else 
echo "<tr><td>$url</td><td>No Meta Description</td></tr>"; 
    } 
} 
?> 
</table> 
</div> 
<script type="text/javascript"> 
     var exportTable1=new ExportHTMLTable('metatable_1'); 
    </script> 
<div> 
     <input type="button" onclick="exportTable1.exportToCSV()" value="Export to CSV"/> 
     <input type="button" onclick="exportTable1.exportToXML()" value="Export to XML"/> 
    </div> 
</div> 

Answer 1

アイデア：

異なるファイルにPHPコードを追加します

のロードイメージ

を表示し、この機能は、いずれかの呼び出し、あなたのjavascriptの場所に行く

function Load() 
{ 
    var xmlhttp; 
    var url; 

    if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp=new XMLHttpRequest(); 
    } 
    else 
    {// code for IE6, IE5 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 

    xmlhttp.onreadystatechange=function() 
    { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) 
     {   
      //(optional)do something with response: xmlhttp.responseText 
      document.getElementById("area").innerHTML=xmlhttp.responseText; 
      document.getElementById("loadingimage").src = "afterloading.gif"; 
     } 
    } 

    xmlhttp.open("GET","phpfile.php",true); 
    xmlhttp.send(); 
} 

この関数を呼び出しますドキュメントの読み込みが完了した後でjqueryを使用するか、

<body onload="Load()"> 

とボディの場所に

<img id="loadingimage" src="loading.gif"/> 
<div id="area">...</div> 

Answer 2

、ワーク（<?php ini_set [...] ?>）を行い一部を抽出し（例えばGetMetaData.php）別のファイルに格納して、JSON又はXMLを返すします。

これで、送信イベントをキャプチャし、ユーザーがGetMetaDataスクリプトに入力したURLを非同期で送信することができます。その呼び出しが返ってくると、スクリプトが返したデータを使用してテーブルにデータを取り込むことができます。

Answer 3

のようなもの、私は私のコメントで述べたように、2つのオプションが、ここで基本的にあります。最初のスクリプトは作業するJavaScriptに依存し、2番目のスクリプトは出力バッファリングに依存して、何が起こっているのかを示す「実行中の解説」を提供します。

AJAXのアプローチでは、重い作業をしてAJAX上に組み込まれる独自のPHPスクリプトに配置するコードを取り入れるだけです。メインページは、単にAJAXを介して作業を行うスクリプトを呼び出すjavascriptと読み込み画面です。 AJAXスクリプトが完了すると、返された結果をHTML形式でフォーマットし、読み込み画面の代わりに表示するコールバック関数を呼び出すことができます。

他のアプローチでは、スクリプトのメインループで出力バッファリングとフラッシュを使用します。

while ($task_not_complete) 
{ 
    do_some_more_work(); 
    echo ('<p>Something indicating how much progress has been made goes here</p>'); 
    ob_flush(); 
    flush(); 
} 

このアプローチではjavascriptは必要ありませんが、それ自体の欠点があります。まず、Webサーバーやクライアントとサーバーの間に存在する可能性のあるプロキシでバッファリングが設定されている場合、スクリプトが完了するまではまったく機能しない可能性があります。第2に、サーバー上のスクリプトが終了し、ブラウザが閉じる</html>タグを受け取るまで、DOMツリーは有効ではありません。つまり、実行中のプロセスが完了するまで、ページが使用するjavascriptは確実にDOM操作を行うことができません。