CodersHELL.org - Developing Community

Neuste Nachrichten

Weiterer pic24 Server eingebunden

Nachtsichtgeräte: Kinobesucher müssen

Neue Wandfarbe hält WLAN-Strahlung im Z

Malware soll mit digitalen Ameisen besei

Kernel-Log: Hauptentwicklungsphase von L

Neuste Beiträge

Eggdrop Interface - ein paar Fragen

Nach Egg Anlegen FTP-login Fehler

HowTo: mit wget ein DirectoryIndex Webve

G-MoN Output -> Excel

Uploadscript ohne FTP-Verbindung

Ajax / Javascript » AJAX Dynamic Page Request

Seiten: 1

[ Sie müssen angemeldet sein, um einen Beitrag zu verfassen. ]

Geschrieben von rizzn2k am 10.03.2009 um 17:34 Uhr.
Beiträge: 19 / #1885

Kontakt:

Mailen |

WWW

Überflüssiges Reloaden der Page beim Seitenwechsel per Klick auf einen Link lässt sich hiermit leicht umgehen.

Mit dieser Kombination tauschen wir den Inhalt unseres Contents (DIV Container) ganz einfach ohne Reload der Seite aus.

Betroffene Files:
- index.php (Hauptseite)
- functions.js (Javascript Request)
- include.php (Einbinden der Unterseiten)

STEP 1: Anlegen der functions.js
Wichtig wäre hier noch zu erwähnen, dass auch JavaScripte auf den Unterseiten welche später eingebunden werden, mitgeladen werden. Über var searchElement legen wir fest welcher DIV-Container später vom Request betroffen ist.

CODE

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.

function requestPage(inc) {
    var request = false;
    
    try {
        request = new XMLHttpRequest();
    } catch (e) {
        try{
            request = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
                alert("Error loading file.");
                return false;
            }
        }
    }

    request.onreadystatechange = function() {
        if(request.readyState == 4) {
            if(request.status == 200) {
                var searchElement = document.getElementById("content");
				searchElement.innerHTML=request.responseText;
				var scripts = searchElement.getElementsByTagName("script");
				for (var i=0;i<scripts.length;i++) {
					eval(scripts[i].innerHTML);
				}
            }
        }
    }

    request.open("GET", "include.php?inc=" + inc, true);
    request.send(null); 
}

STEP 2: Anlegen der include.php
Die $inc Variable wird vom JavaScript and unsere Include File übergeben.

PHPCODE

<?php
$inc = $_GET["inc"];
if (!file_exists($inc.".php"))
{
echo "Error loading file.";
}
else {
include($inc.".php");
}
?>

STEP 3: Anlegen der index.php
Nun legen wir die Startseite an. Falls diese schon vorhanden ist wird folgendes hinzugefügt. Wichtig ist die richtige Bezeichnung des Containers durch das ID-Attribut, welches zuvor in unserer functions.js festgelegt wurde.

CODE

1.
2.
3.

<div id="content">
	include("home.php");
</div>

Beim ersten Seitenaufruf wird hier optional eine home.php geladen.

STEP 4: Einbinden der functions.js in unsere Hauptseite

CODE

1.
2.
3.

<script language="javascript" type="text/javascript" src="functions.js"></script>

STEP 5: Seitenwechsel durch requestPage über einen Hyperlink
Nun führen wir den eigentlichen Request (via Hyperlink) durch und tauschen somit den Inhalt unseres DIV-Containers. Geladen wird in diesem Fall die newsletter.php und unser Content-DIV wechselt nun den Inhalt.

CODE

1.
2.
3.

<a href="newsletter.php" onclick="javascript:requestPage('newsletter'); return false;">

Zitieren

Beitrag melden

[ Sie müssen angemeldet sein, um einen Beitrag zu verfassen. ]

Seiten: 1

Passwort zurücksetzen