Opdaterter en div med AJAX

Simon, AJAX er meget simple men du skal nok havde fat i et framework til AJAX. Jeg vil forslår du bruger Prototype > http://prototypejs.org/

Jeg bruger så noget til at gøre Prototype lidt nemmer at bruge...

Javascript.

/* Helper function */
function AJAX_Complete(divName, msg)
{
	var status = $(divName);
	status.innerHTML = msg;
}

function AJAX_Failed(divName, msg)
{
	var status = $(divName);
	status.innerHTML = msg;
}

/* Send a mail */
function sendMail()
{
	
	var author = $("contact_name").value;
	var mail = $("contact_mail").value;
	var body = $("contact_message").value;
	var status = $("status");
	
	if(author != "" && body != "" && mail != "")
	{
		
		var url = '/scripts/actions.php';
		var pars = 'action=sendMail&author='+escape(author)+'&mail='+mail+'&body='+escape(body);		
		
		new Ajax.Request(url, {
			method:'post',
			postBody: pars,
			onLoading: function(request) {
				nowLoading(status);
			},
			onSuccess: function(request) {
				AJAX_Complete(status, request.responseText);
			},
			onFailure: function(request) {
				AJAX_Failed(status, "Der opstod en fejl!")
			}
		});
	} else {
		status.innerHTML = "Du skal udfylde alle felterne.";
	}
}

/* Ajax status: Now Loading */
function nowLoading(divName)
{
	var status = $(divName);
	var loading = "/style/img/loader.gif";
	status.innerHTML = "<img id=\\"loading\\" src=\\""+loading+"\\" title=\\"Loading..\\" alt=\\"Loading...\\" />";
}

HTML:

form method="post" action="#" onSubmit="sendMail(); return false;">
<table cellpadding="2" cellspacing="0" border="0">
	<tr><td style="color:#0E85C9;font-size:12px;">Besked</td></tr>
	<tr>
		<td><textarea id="contact_message" cols="65" rows="15"></textarea></td>
		<td>
			<table border="0" cellpadding="2" cellspacing="0">
				<tr><td style="color:#0E85C9;font-size:12px;">Navn</td></tr>
				<tr>
					<td><input id="contact_name" type="text" maxlength="25" /></td>
				</tr>
				<tr><td style="color:#0E85C9;font-size:12px;">Mail</td></tr>
				<tr>
					<td><input id="contact_mail" type="text" maxlength="75" /></td>
				</tr>
				<tr>
					<td><input class="knap" id="contact_submit" type="submit" value="Indsend" /> <input class="knap" name="sletalt" type="reset" value="Slet alt" /></td>
				</tr>
				<tr>
					<td id="status"></td>
				</tr>
			</table>
		</td>
	</tr>
</table>
</form>

PHP:

<?php
sleep(5);
header('Content-Type: text/html; charset=ISO-8859-1');
if (isset($_POST['action'])) $action = $_POST['action'];
if (isset($_POST['author'])) $author = $_POST['author'];
if (isset($_POST['mail'])) $mail = $_POST['mail'];
if (isset($_POST['body'])) $body = $_POST['body'];
if (isset($_POST['id'])) $id = $_POST['id'];
if (isset($_POST['action']) && $_POST['action'] == 'sendMail') $sendMail = 'http://mullep.dk/Kontakt.html';
$referer = $_SERVER['HTTP_REFERER']

if ($action === 'sendMail' && $referer == $sendMail) {
	if ($calc == $calcr) {
		$message = "IP: ".$_SERVER['REMOTE_ADDR']."\\nName: ".$author."\\nMail: ".$mail."\\n\\n".$body;

		$headers = 'From:'. $mail . "\\r\\n" . 'X-Mailer: PHP/' . phpversion();

		if(mail("mail@mail.dk","Kontakt-Form Mullep.dk", stripslashes($message), $headers)) echo 'Din mail blev sendt afsted, og du vil få svar hurtigste muligt.';
		else echo 'Din mail blev ikke sendt afsted.';
	} else echo 'Regne stykket var forkert, om igen.';
} else echo 'Der opstod en fejl!';
?>

Jeg har desværre ikke uploadede scriptede endnu, så du kan ikke se den fulde effekt.

Prototype giver nogen muligheder, $("ID") er en function som bare erstatter document.getElementById("ID").
Prototype her, sender det i post. Den kan både post og get, så intet problem der.

Det er forholdvis meget simple at forstå, men spørg endlig hvis der er noget du vil havde svar på.

Jeg kan forstå det du vil med AJAX er noget andet, men det kan lade sig gøre. =)

Jeg har lavet mit eget lille AJAX framework, og det må du da hjertens gerne få en kopi af og bruge hvis du har lyst.

Kopier dette ind i en js fil.

function queue()
{
    this.innerQueue = new Array();
    this.position = 0;
    this.length = 0;
}

queue.prototype.enqueue = function(obj)
{
    this.innerQueue.push(obj);
    this.length++;
}

queue.prototype.dequeue = function()
{   
    if (this.innerQueue.length > 0)
    {
        var obj = this.innerQueue[this.position];
        if (++this.position*2 >= this.innerQueue.length)
        {
            for(var i = this.position; i < this.innerQueue.length; ++i)
                this.innerQueue[i - this.position] = this.innerQueue[i];
                
            this.innerQueue.length -= this.position;
            this.position = 0;
        }
        
        this.length--;   
        return obj;
    }
    else
    {
        return null;
    }   
}

httpmethod = { get : "GET", post : "POST", head : "HEAD" };

function httprequest()
{
    this.http = null;
    this.onrequestcomplete = null;
    this.requestqueue = new queue();
    
    try
    {
        this.http = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch(ex)
    {
        try
        {
            this.http = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch(ex)
        {            
            this.http = new XMLHttpRequest();
        }
    }
}

httprequest.prototype.get = function(url, async)
{
    this.send(httpmethod.get, url, null, async);
}

httprequest.prototype.post = function(url, data, async)
{
    this.send(httpmethod.post, url, data, async);
}

httprequest.prototype.send = function(method, url, data, async)
{
   
    if (this.http.readyState == 4 || this.http.readyState == 0)
    {
        var ref = this;
        
        this.http.open(method, url, async);
        this.http.onreadystatechange = function() { ref.callback(); }
        
        if (method == httpmethod.post)
            this.http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            
        this.http.send(data);
    }
    else
    {   
        var rq = new Object();
        
        rq.method = method;
        rq.url = url;
        rq.data = data;
        rq.async = async;
        
        this.requestqueue.enqueue(rq);
    }
}

httprequest.prototype.callback = function()
{
    if (this.http.readyState == 4)
    {
        if (this.http.status == 200)
        {
            if (this.onrequestcomplete != null)
                this.onrequestcomplete(this.http.responseXML);
       
            this.onrequestcomplete = null;
        }

        if (this.requestqueue.length > 0)
        {
            var rq = this.requestqueue.dequeue();           
            if (rq == null)
                return;
            
            this.send(rq.method, rq.url, rq.data, rq.async);
            
            delete rq;
        }
    }
}

Som du kan se er det meget simpelt, og min AJAX klasse sørger for at ligge requests i en kø og sende dem senere hvis "forbindelsen" skulle være "optaget".

Eksempel på brugen:

var http = new httprequest();

http.onrequestcomplete = function(xml) { alert("data!!!") }
http.get("myurl.aspx", true);

Håber du kan bruge noget af det ..

Du kan vel bare bruge en iframe til dette formål?

Nej, frames er forældede ifølge W3C!

Nej, frames er forældede ifølge W3C!

... Fordi de giver vanskeligheder med navigationen på sider. At udskifte indholdet dynamisk med Javascript vil normalt gøre navigationen endnu værre.

@ MulleP: Jeg har bare aldrig forstået meningen med XML. ALt det andet kan jeg eller, CSS, JavaScript og DOM.

Jeg har lavet mit eget lille AJAX framework, og det må du da hjertens gerne få en kopi af og bruge hvis du har lyst.

Kopier dette ind i en js fil.

Kode 

function queue()
{
    this.innerQueue = new Array();
    this.position = 0;
    this.length = 0;
}

queue.prototype.enqueue = function(obj)
{
    this.innerQueue.push(obj);
    this.length++;
}

queue.prototype.dequeue = function()
{   
    if (this.innerQueue.length > 0)
    {
        var obj = this.innerQueue[this.position];

        if (++this.position*2 >= this.innerQueue.length)
        {
            for(var i = this.position; i < this.innerQueue.length; ++i)
                this.innerQueue[i - this.position] = this.innerQueue[i];
                
            this.innerQueue.length -= this.position;
            this.position = 0;
        }
        
        this.length--;   
        return obj;
    }
    else
    {
        return null;
    }   
}

httpmethod = { get : "GET", post : "POST", head : "HEAD" };

function httprequest()
{
    this.http = null;
    this.onrequestcomplete = null;
    this.requestqueue = new queue();
    
    try
    {
        this.http = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch(ex)
    {
        try
        {
            this.http = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch(ex)
        {            
            this.http = new XMLHttpRequest();
        }
    }
}

httprequest.prototype.get = function(url, async)
{
    this.send(httpmethod.get, url, null, async);
}

httprequest.prototype.post = function(url, data, async)
{
    this.send(httpmethod.post, url, data, async);
}

httprequest.prototype.send = function(method, url, data, async)
{
   
    if (this.http.readyState == 4 || this.http.readyState == 0)
    {
        var ref = this;
        
        this.http.open(method, url, async);
        this.http.onreadystatechange = function() { ref.callback(); }
        
        if (method == httpmethod.post)
            this.http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            
        this.http.send(data);
    }
    else
    {   
        var rq = new Object();
        
        rq.method = method;
        rq.url = url;
        rq.data = data;
        rq.async = async;
        
        this.requestqueue.enqueue(rq);
    }
}

httprequest.prototype.callback = function()
{
    if (this.http.readyState == 4)
    {
        if (this.http.status == 200)
        {
            if (this.onrequestcomplete != null)
                this.onrequestcomplete(this.http.responseXML);
       
            this.onrequestcomplete = null;
        }

        if (this.requestqueue.length > 0)
        {
            var rq = this.requestqueue.dequeue();           
            if (rq == null)
                return;
            
            this.send(rq.method, rq.url, rq.data, rq.async);
            
            delete rq;
        }
    }
}

Som du kan se er det meget simpelt, og min AJAX klasse sørger for at ligge requests i en kø og sende dem senere hvis "forbindelsen" skulle være "optaget".

Eksempel på brugen:

Kode 

var http = new httprequest();

http.onrequestcomplete = function(xml) { alert("data!!!") }
http.get("myurl.aspx", true);

Håber du kan bruge noget af det ..

Jeg tror desværre ikke at jeg forstår.

Hvad er det du ikke forstår?

Det hele...