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
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);
}
}
}
Custom Search
Monday, June 2, 2008
Simple AJAX
Subscribe to:
Post Comments (Atom)
2 comments:
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.
sure, its possible to test AJAX app on WAMP server, just put file php, html and javascript on your directory and run it...
Post a Comment