AJAX PHP Function

[ello]

Hey guys, I'm having some AJAX troubles that hopefully someone can help me with. I have some PHP code, which works fine. And I'm trying to call the PHP function with AJAX. But I've never used AJAX at all so I'm a little confused. I've tried to fiddle around with some code but it's just not working. Wondered if anyone could help. The code is bellow:

PHP:

<?php
 
if($_GET['act'] == "generate_quotes") {

$db = mysql_connect("*", "*", "*") or die ("Unable to connect to database.");
mysql_select_db("quote") or die ("Unable to select database.");


$result = mysql_query( " SELECT * FROM `quote`  ORDER BY RAND() LIMIT 0,1 " );
$fetch = mysql_fetch_array($result); 


echo "<blockquote>".$fetch['q_quote']."</blockquote>";
mysql_close($db);

} else { 

echo "<img src=\"1.png\">";

}
?>

The link which I want to call the function:

<div id="ajaxlink"><a href='gengen.php?act=generate_quotes'>Generate</a></div>

The AJAX:

function loadurl(dest) {
try {
("Microsoft.XMLHTTP");
} catch (e) {
}
xmlhttp.onreadystatechange = triggered;
xmlhttp.open("GET", dest);
xmlhttp.send("null");
}
function triggered() {
if ((xmlhttp.readyState == 4) (xmlhttp.status == 200)) {
document.getElementById("ajaxlink").innerHTML = xmlhttp.responseText;
}
}

The AJAX maybe completley wrong, I'm really not sure, but if so could somone show me how to go about doing this?

Thanks alot for any help :)

[Graphix]

Well the AJAX is completely wrong ;) , let me explain how AJAX works:

- You create a XMLHTTP request object
- You define a function that is triggered when the readystate is changed of the XMLHTTP object
- You open a url using the XMLHTTP object
- You send some data via the XMLHTTP object
- Everytime the readystate and status change, the function you defined at step 2 is called

Here is an example of an AJAX function (that loads the url):

function loadurl(url) {

var ajax = false;

// Create the object:

// Choose the objecttype, depending on what is supported:
if (window.XMLHttpRequest) {

    // IE 7, Mozilla, Safari, Firefox, Opera, most browsers:
    ajax = new XMLHttpRequest();

} else if (window.ActiveXObject) { // Old IE-browsers

    // Make the type Msxml2.XMLHTTP, if possible:
    try {
        ajax = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e1) { // Else use the other type:
        try {
            ajax = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e2) { }
    }

}

// Retrieving the data from the page

 if (ajax) {

   alert("url: " + url);

   ajax.open('GET', url);

   // Sends request
   ajax.send(null);
   
   // Function that handles response
   ajax.onreadystatechange=function(){
    // If everything is OK:
     if ( (ajax.readyState == 4) && (ajax.status == 200) ) {
          // Returns the value to the document
          alert(ajax.responseText);
	 }
    }


 } else { // AJAX is not useable
     alert('It is not possible to connect, please update your browser.');
 }

}

~G

[ello]

Hey thanks so much, I would have put money on that code being wrong, but thanks alot, clears it up wonderfully. But would the link remain the same on the HTML side of things?

E.g:

<div id="ajaxlink"><a href='gengen.php?act=generate_quotes'>Generate</a></div>

?

Or would you need something more like:

<div id="ajaxlink" onclick="loadurl('ajax_function.php')">Click Here</div>

?

[Graphix]

You need the second one, the href isn't going to work. However when a element is clicked the page is reloaded. But not if you do it like the following example:



<div id="ajaxlink"><a onclick="loadurl('ajax_function.php'); return false;">Click Here</a></div>


~G

[ello]

Thanks alot for all your help, worked a treat :)