Custom Search

Monday, June 2, 2008

Simple AJAX

This a simple AJAX code. now i'm using PHP as server side programming language. there is 3 source, they are index.html, script.js and process.php

index.html

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html >
< head>
< title>Simple AJAX< /title>
< script type="text/javascript" src="script.js">< /script>
< /head>
< body onload='process()'>
Input Tutorial:
< input type="text" id="myName" />
< div id="divMessage" />
< /body>
< /html>



process.php

< ?php
// create XML output
header('Content-Type: text/xml');
// create XML header
echo '';
// create the element
echo '';
// get paramater
$name = $_REQUEST['name'];
// create output
$userNames = array('AJAX', 'WEB 2.0', 'ASP.NET');
if (in_array(strtoupper($name), $userNames))
echo 'This tutorial about ' . htmlentities($name) . '!';
else if (trim($name) == '')
echo 'Please input tutorial that you want';
else
echo ' Sorry, there is no tutorial about '.htmlentities($name).'!';
echo '
';
? >

script.js

var xmlHttp = createXmlHttpRequestObject();
// Create Request Object
function createXmlHttpRequestObject()
{
var xmlHttp;
// if Internet Explorer
if(window.ActiveXObject)
{
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
xmlHttp = false;
}
}
// if Mozilla or another browser
else
{
try
{
xmlHttp = new XMLHttpRequest();
}
catch (e)
{
xmlHttp = false;
}
}

if (!xmlHttp)
alert("Error creating the XMLHttpRequest object.");
else
return xmlHttp;
}
// Create asynchronous HTTP request with XMLHttpRequest object
function process()
{

if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
{
// get parameter input by user
name = encodeURIComponent(document.getElementById("myName").value);
var param='name='+name;

// connection to server
xmlHttp.open("POST", "process.php", true);
xmlHttp.onreadystatechange = handleServerResponse;
xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// Create request to server
xmlHttp.send(param);
}
else

setTimeout('process()', 1000);
}


function handleServerResponse()
{

if (xmlHttp.readyState == 4)
{

if (xmlHttp.status == 200)
{

xmlResponse = xmlHttp.responseXML;


xmlDocumentElement = xmlResponse.documentElement;

helloMessage = xmlDocumentElement.firstChild.data;

document.getElementById("divMessage").innerHTML ='' + helloMessage + '';
// restart sequence
setTimeout('process()', 1000);
}

else
{
alert("There was a problem accessing the server: " + xmlHttp.statusText);
}
}
}

2 comments:

Siddhartha said...

Hi! I have a question regarding AJAX application. Is it possible to configure local WAMP server to test AJAX applications? I'll start learning AJAX following your entries.

arrijal said...

sure, its possible to test AJAX app on WAMP server, just put file php, html and javascript on your directory and run it...

Free Traffic

 Join My Community at MyBloglog! Blog Flux Directory 

Web Developement Blogs - BlogCatalog Blog Directory web development blog  Internet Blogs - Blog Top Sites 

Blog Directory 

Click Here for Free Traffic!

Link2Communion.com