ajaxでiframeを読み込む

私は時間がかかるPHPスクリプトがあるページがあります。誰かが私はajaxでPHPスクリプトを呼び出すことをお勧めします。これでスクリプトはこのようにロードされます。ajaxでiframeを読み込む

<div id="content-body" style="margin-top: 0px;"><a name="top"></a> 
    <h1> 
    <iframe src="calendar/index.php?cP=2" style="position: absolute; top: 0px; padding: 0px 0px 0px 0px; border: 1px solid #404040;" width="780px" height="691px"></iframe> 
    </h1> 
</div> <!-- End CONTENT-BODY div -->

代わりにajaxを使用してindex.phpページを読み込むためにコードを変更する必要がありますか？

私は、iframe onload関数でjavascript関数呼び出しを行う必要があると思います。したがって、HTMLはこのように見えるかもしれません。

<iframe id="litcal" onload="LoadCalendar();"></iframe>

ajax関数は次のようになります。

<script type="text/javascript"> 
    var http = false; 

    if(navigator.appName == "Microsoft Internet Explorer") { 
     http = new ActiveXObject("Microsoft.XMLHTTP"); 
    } else { 
     http = new XMLHttpRequest(); 
    } 

    function LoadCalendar() { 
     http.abort(); 
     http.open("GET", "calendar/index.php?cP=2", true); 
     http.onreadystatechange=function() { 
     if(http.readyState == 4) { 
      document.getElementById('litcal').src = http.responseText; 
     } 
     } 
     http.send(null); 
    } 
    </script>

私は本当にajaxを知らない。だから、表示されたコードがiframeをロードするのが正しいかどうかを知りたい。

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

出典

2011-07-07 user823527

問題は、PHPスクリプトがURLを返さなかったことです。したがって、http.responseTextをsrcに割り当てることができませんでした。 divに切り替え、http.responsetextをdiv innerHTMLに割り当てました。動作するスクリプトはこれです。

<script type="text/javascript"> 
    var http = false; 
    if(navigator.appName == "Microsoft Internet Explorer") { 
     http = new ActiveXObject("Microsoft.XMLHTTP"); 
    } else { 
     http = new XMLHttpRequest(); 
    } 
    function LoadCalendar() { 
     http.abort(); 
     http.open("GET", "luxcal/index.php?cP=2", true); 
     http.onreadystatechange=function() { 
     if(http.readyState == 4) { 
      /* document.getElementById('litcal').src = http.responseText; */ 
      document.getElementById('litcal').innerHTML = http.responseText; 
     } 
     } 
     http.send(null); 
    } 
</script>

HTMLはこれです。

<body onload="appendTitle('Calendar');"> 

<div id="content-body"><a name="top"></a> 
    <h1> 
    <!-- iframe src="luxcal/index.php?cP=41" style="padding: 0px 0px 0px 0px; border: 1px solid #404040;" width="690px" --> 
    <!-- iframe id="litcal" onload="LoadCalendar();" style="padding: 0px 0px 0px 0px; border: 1px solid #404040;" width="690px" 
height="691px"> <div id="litdiv"> </div></iframe --> 
    <div id="litcal" style="padding: 0px 0px 0px 0px; border: 1px solid #404040; width: 690px; 
height: 691px;"> </div> 

<script type="text/javascript"> 
    LoadCalendar(); 
</script> 
    </h1> 
</div> <!-- End CONTENT-BODY div --> 

</body>

出典

2011-07-08 00:22:03 user823527

AJAXリクエストでコードを実行しても、魔法のように速く実行されるわけではありません。遅いコードは、呼び出し元のメソッドに関係なく、遅いです。

AJAXを使用すると、HTMLドキュメントの一部をできるだけ早くユーザーに表示し、必要に応じて追加の部品を読み込むことができます。 AJAXの実装が成功するには、通常、コードの書き換えが少なくとも必要です。

最初にページに表示する部分を特定して、最初のページリクエストでそれらを送信する必要があります。その後、必要に応じてAJAXを介して呼び出されるPHPスクリプトに、コードの遅い部分またはそれほど重要でない部分を配置することができます。スクリプトは、より大きなHTML文書に挿入するのに適したデータを出力する必要があります。

出典

2011-07-07 15:20:58

私の質問は、ajaxコードのようになります。要素srcの代わりにajaxをロードするために表示されるコードには、どのような変更が必要なのでしょうか。 – user823527

@ user823527： 'calendar/index.php？cP = 2'が返す内容によって異なります。 URLを返した場合、コードは正しいです。 URL以外のデータを返す場合は、iframeのsrc属性にそのデータを配置したくない場合があります。代わりに、divを使用して、innerHTMLまたはinnerTextを使用してデータを設定します。 –

あなたはiframeにdivを置くべきだと言っていますか？ divには、ajax関数を呼び出すonloadイベントはありません。 – user823527

答えて

関連する問題