|| Beitrag erstellt von: develop am 30. September ||
JavaScript - Reload Page
We want to load content when a user clicks on the "Load Content" button. So we need to bind a click event to that button first and make AJAX request only after it is fired.
$("btnLoad").click(function(){
// Make AJAX call
$("content").load("http://example.com");
});
The above code loads contents from http://example.com into the
http://jquery-howto.blogspot.com/2009/04/display-loading-gif-image-while-loading.html
$("btnLoad").click(function(){
// Make AJAX call
$("content").load("http://example.com");
});
The above code loads contents from http://example.com into the
. While the page is being loaded we want to display our animated GIF image in the "content". So we could further improve our code like so:
$("btnLoad").click(function(){
// Put an animated GIF image insight of content
$("content").empty().html('
');
// Make AJAX call
$("content").load("http://example.com");
});
The .load() function would replace our loading image indicator with the loaded content.
$("btnLoad").click(function(){
// Put an animated GIF image insight of content
$("content").empty().html('
'); // Make AJAX call
$("content").load("http://example.com");
});
The .load() function would replace our loading image indicator with the loaded content.
http://jquery-howto.blogspot.com/2009/04/display-loading-gif-image-while-loading.html
|| Beitrag erstellt von: develop am 23. September ||
JavaScript - Div automatisch aktualisieren
script.js
<***script type="text/javascript">
function load_data() {
http_request = false;
if (window.XMLHttpRequest) {
http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Ende :( Kann keine XMLHTTP-Instanz erzeugen');
return false;
}
document.getElementById("loading").style.display='';
document.getElementById("content2").style.display='none';
http_request.open('GET', 'newload.php', true);
http_request.onreadystatechange = InhaltPost;
http_request.send(null);
}
function InhaltPost() {
if (http_request.readyState == 4){
var answer = http_request.responseText;
document.getElementById("loading").style.display='none';
document.getElementById("content2").style.display='block';
if(document.getElementById("content2").innerHTML != answer){
document.getElementById("content2").innerHTML = answer;
}
}
}
window.onload = "load_data()";
interval = window.setInterval("load_data();", 20000);
function load_data() {
http_request = false;
if (window.XMLHttpRequest) {
http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Ende :( Kann keine XMLHTTP-Instanz erzeugen');
return false;
}
document.getElementById("loading").style.display='';
document.getElementById("content2").style.display='none';
http_request.open('GET', 'newload.php', true);
http_request.onreadystatechange = InhaltPost;
http_request.send(null);
}
function InhaltPost() {
if (http_request.readyState == 4){
var answer = http_request.responseText;
document.getElementById("loading").style.display='none';
document.getElementById("content2").style.display='block';
if(document.getElementById("content2").innerHTML != answer){
document.getElementById("content2").innerHTML = answer;
}
}
}
window.onload = "load_data()";
interval = window.setInterval("load_data();", 20000);
<***/script>
newload.php
DIESER INHALT WIRD NEU GELADEN
content.php
<***body onload="load_data()">
<***div id="loading" style="display:none">
loading...
<***img src="ajax-loader.gif" border="0" >
<***/div>
<***/div>
<***div id="content2" >
<***/div>