Ich hab ein kleines Problem: Ich möchte mit Ajax Inhalte in bestimmte DIVs laden.
Bei meinem Script stimmt irgendwas nicht! Kann mir jemand helfen?
index.html:
ajax.js
test01.html
test02.html
Bei meinem Script stimmt irgendwas nicht! Kann mir jemand helfen?
index.html:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">;
<html>
<head>
<title>Ajax Loading</title>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
test
<a class="menu-link" href="javascript:load('test01.html', 'inhalt');"> TEST</a>
<a class="menu-link" href="javascript:load('test02.html', 'inhalt2');"> TEST2</a>
<div id="inhalt" style="background: red; width: 100%; height: 100px;">Test</div><br>
<div id="inhalt2" style="background: green; width: 100%; height: 100px;">Test</div>
</body>
</html>
ajax.js
Code:
function load(src, id) {
http_request = false;
if (window.XMLHttpRequest) {
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Das Request Objekt konnte nicht erzeugt werden! Bitte ueberpruefen Sie Ihre JAVA Einstellungen!');
return false;
}
document.getElementById(id).innerHTML = "...";
http_request.onreadystatechange = show;
http_request.open('GET', src, true);
http_request.send(null);
}
function show(id) {
if (http_request.readyState == 4) {
document.getElementById(id).innerHTML = http_request.responseText;
}}
test01.html
HTML:
<p>Testinhalt</p>
test02.html
HTML:
<p>Testinhalt 2</p>