Question

我有一个耗时的PHP脚本页面。有人建议我用ajax调用那个PHP脚本。现在脚本以这种方式加载。

 <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。

感谢。

Answer 1

通过AJAX请求执行代码不会神奇地导致它运行得更快。慢速代码仍然会很慢，无论调用它的方法如何。

AJAX可用于尽快向用户呈现HTML文档的一部分，同时根据需要加载其他部分。成功实现AJAX通常至少需要对代码进行一些重写。

您需要确定最初要向用户显示的页面部分，并发送带有初始页面请求的部分。然后，您可以将代码中较慢或不太重要的部分放在PHP脚本中，以便根据需要通过AJAX调用。您的脚本应输出适合插入较大HTML文档的数据。

Answer 2

问题是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>

使用ajax加载iframe

2 个答案: