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 » OR DOWNLOAD THE AJAX SAMPLE

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 = 'Loading Data...';//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 = '' + 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 = '' + 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);
}       

function ewd_convertFormDataToPostContent(form_y){
var f=document.getElementById(form_y);
var content_to_submit = '';
var form_element;
var last_element_name = '';
for (i = 0; i < f.elements.length; i++){
form_element = f.elements[i];
switch (form_element.type){
// text fields, hidden form elements
case 'text':
case 'hidden':
case 'password':
case 'textarea':
case 'select-one':
content_to_submit += form_element.name + '=' + escape(form_element.value) + '&';
break;
// radio buttons
case 'radio':
if (form_element.checked){
content_to_submit += form_element.name + '=' + escape(form_element.value) + '&';
}
break;
// checkboxes
case 'checkbox':
if (form_element.checked){
// Continuing multiple, same-name checkboxes
if (form_element.name == last_element_name){
// Strip of end ampersand if there is one
if (content_to_submit.lastIndexOf('&') == content_to_submit.length - 1){
content_to_submit = content_to_submit.substr(0, content_to_submit.length - 1);
}
// Append value as comma-delimited string
content_to_submit += ',' + escape(form_element.value);
}else{
content_to_submit += form_element.name + '=' + escape(form_element.value);
}
content_to_submit += '&';
last_element_name = form_element.name;
}
break;
}//end switch
} //end for
// remove trailing separator
content_to_submit = content_to_submit.substr(0, content_to_submit.length - 1);
return content_to_submit;
}

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

	First we create the link that "onclick" will populate the div or span id - "div_populate".
	Make sure you have the javascript source "ajax.js" included into this file.

	• Get Data 1 »
	  
	• Get Data 2 »

	or you can use a form to submit data (using "onchange" on the form input or "onclick" on the submit button):




	

Now and example using a form to post the data

	Here is the place where the data from the "content_ajax.php" page will be displayed.

		© Eire-Web Design Ireland

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

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

$data = "1";
if(isset($_GET['data']) && $_GET['data'] != ""){
$data = $_GET['data'];
}
if($data =="1"){
?>

 Welcome to Web Design Dublin Ireland  - Eire-WebDesign.ie  

	This is the second link
	

}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;   

}
?>

Tags: ajax using post or get

This entry was posted on Monday, October 15th, 2007 at 9:00 am and is filed under Ajax. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

(1 votes, average: 4.00 out of 5)

 Loading ...