Loading an iframe with ajax
I have a page with a time consuming PHP script. Someone recommended that I call that PHP script with ajax. Now the script is loaded in this way.
<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="78开发者_运维百科0px" height="691px"></iframe>
</h1>
</div> <!-- End CONTENT-BODY div -->
How should the code be modified to load the index.php page with ajax instead?
I imagine that I will need to have a javascript function call in the iframe onload function. So the HTML might look like this.
<iframe id="litcal" onload="LoadCalendar();"></iframe>
The ajax function might look like this.
<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>
I don't really know ajax. So I want to know if the code shown is right to load the iframe.
Thanks.
Executing your code via an AJAX request will not magically cause it to run faster. Slow code will still be slow, regardless of the method by which it is call.
AJAX can be used to render part of an HTML document to the user as soon as possible, while loading additional parts as needed. Successful implementation of AJAX usually requires at least some rewriting of your code.
You will need to identify which parts of the page you wish to display to the user initially, and send those with the initial page request. You can then place the slow or less-important parts of your code in a PHP script to be called via AJAX as needed. Your script should output data suitable for insertion into the larger HTML document.
The problem was that the PHP script wasn't returning a URL. So the http.responseText could not be assigned to a src. Switching to a div and assigning the http.responsetext to the div innerHTML worked. The script that works is this.
<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>
The HTML is this.
<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>
加载中,请稍侯......
精彩评论