... Ajax load content from another file using POST or GET ...

• Ajax load content from another file using POST or GET »»

These is a simple Ajax example that will load content into the page from another file without browser refresh.
05-Oct-2007 - We have updated the javascript to allow the use of forms to be submited using POST.

Click here for Demo »

How does it work?

First we need to create the javascript file with the following code:

var ewd_domain = ‘http://www.eire-webdesign.ie/’; //set domain
var ewd_loading_img = ewd_domain + ‘images/loading.gif’;//set image path
var ewd_loading_msg = ‘<strong>Loading Data…</strong>’;//set loading message
var xmlhttp_obj = false;

//create the XMLHttpRequest
function ewd_xmlhttp(){
if (window.XMLHttpRequest){ // if Mozilla, Safari etc
xmlhttp_obj = new XMLHttpRequest();
}else if (window.ActiveXObject){ // if IE
try{
xmlhttp_obj = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try{
xmlhttp_obj = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
}
}

}else{
xmlhttp_obj = false;
}
return xmlhttp_obj;
}

//get content via GET
function ewd_getcontent(url, containerid){
var xmlhttp_obj = ewd_xmlhttp();
document.getElementById(containerid).innerHTML = ‘<img src="http://www.eire-webdesign.ie/blog/wp-admin/’%20+%20ewd_loading_img%20+%20‘" />’ + ewd_loading_msg;
xmlhttp_obj.onreadystatechange=function(){
ewd_loadpage(xmlhttp_obj, ”, containerid);
}
xmlhttp_obj.open(‘GET’, url, true);
xmlhttp_obj.send(null);
}

function ewd_loadpage(xmlhttp_obj, content, containerid){
if ( xmlhttp_obj.readyState == 4 && xmlhttp_obj.status == 200 ){
document.getElementById(containerid).innerHTML = xmlhttp_obj.responseText;
}
}

//functions for posted values from forms vis POST
function ewd_getcontent_post(url, content, containerid){
var xinput = content;
var xmlhttp_obj = ewd_xmlhttp();
document.getElementById(containerid).innerHTML = ‘<img src="http://www.eire-webdesign.ie/blog/wp-admin/’%20+%20ewd_loading_img%20+%20‘" />’ + ewd_loading_msg;
xmlhttp_obj.open(‘POST’, url, true);
xmlhttp_obj.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);
xmlhttp_obj.onreadystatechange = function() {
ewd_loadpage(xmlhttp_obj, content, containerid);
}
xmlhttp_obj.send(content);
}

//convert form data sent to POST CONTENT
function ewd_submit_form(page_to,form_name,containerid) {
var content = ewd_convertFormDataToPostContent(form_name);
ewd_getcontent_post(page_to, content, containerid);
}

Now create the page that will hold the content to be displayed (”content_ajax.php”):

<p style="margin: 3px; background-color: #f5f5f5; border: #006633 1px solid; padding: 3px" id="header_ajax">
First we create the link that "<strong>onclick</strong>" will populate the div or span id - "div_populate".
Make sure you have the javascript source "<strong>ajax.js</strong>" included into this file.

<p style="margin: 5px; background-color: #ffffff; border: #cc0000 1px solid; padding: 5px">
<form method="post" name="formx" id="formx">
<strong>or you can use a form to submit data (using "onchange" on the form input or "onclick" on the submit button):</strong>
<input name="test" size="100" onchange="ewd_submit_form(’content_ajax.php’,'formx’,'div_populate’);" id="test" />
<input name="test1" size="100" onchange="ewd_submit_form(’content_ajax.php’,'formx’,'div_populate’);" id="test1" />
<input name="test2" type="checkbox" onclick="ewd_submit_form(’content_ajax.php’,'formx’,'div_populate’);" id="test2" />
<input type="submit" onclick="ewd_submit_form(’content_ajax.php’,'formx’,'div_populate’); return false;" />
</form>

Now and example using a form to post the data

<p style="margin: 3px; background-color: #f5f5f5; border: red 1px dashed; padding: 5px" id="div_populate">
Here is the place where the data from the "<strong>content_ajax.php</strong>" page will be displayed.

<p style="margin: 3px; background-color: #f5f5f5; text-align: left; border: #006633 1px solid; padding: 3px">
©<!–p echo date("Y")–> <a href="http://www.eire-webdesign.ie" title="web design ireland">Eire-Web Design Ireland</a>

This is the code for the file that will be called:

$datax = $_POST[‘test’];
$datax1 = $_POST[‘test1′];
$datax2 = $_POST[‘test2′];
if($datax != "" || $datax1 != "" ){
echo "<strong>data posted: </strong>" . ($datax != "" ? "<strong>first input</strong> = ".$datax : "").
($datax1 != "" ? "<strong>second input</strong> = ".$datax1 : "").
($datax2 != "" ? "<strong>checkbox input</strong> = ".$datax2 : "<strong>checkbox input</strong> = unchecked")."";
exit();
}

$data = "1";
if(isset($_GET[‘data’]) && $_GET[‘data’] != ""){
$data = $_GET[‘data’];
}
if($data =="1"){
?>
<fieldset><legend> <strong>Welcome to Web Design Dublin Ireland - Eire-WebDesign.ie</strong> </legend>
This is the second link
</fieldset>
<!–p <–>}elseif($data == "2"){
echo "This is the second data that has been sent using GET.";
}elseif($data == "3"){ $datax = htmlspecialchars($_GET[‘test’]);
echo "data posted: " . $datax;