M
Moses
Hi All,
I have created a prototype to make ajax Calls,
I have done this to my knowledge,
Please go through it and I am looking forward for all your comments
and suggestions and tips to improments.
Below the html I have a few php codings copy that and make as
(test.php). and run the html file.
Thanks and Regards
Moses
<html>
<head>
<title>Ajax-Test</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<script language="JavaScript" >
//////////////////////////////////////////////////////////////
/////Purpose :This Prototype is used to make ajax calls
/////Date :FEB 12 2007
/////Autor :Moses Dinakran
///////////////////////////////////////////////////////////////
// Sample Ajax Call
/*
<input type="button" value="Submit" onClick="ajaxCall(
{
url:'test.php', -- the Url (required)
method:'POST', -- (POST,GET)the Method (optional)
query_string:{name:'Elvis',no:1002}, -- the query_string to the
(optional)
type:'HTML', -- (HTML,XML)the method Type default (HTML)
(optional)
placeholder:'placeholder', -- the place holder element where the
responseText should be displayed (optional) If(type=='HTML') then
required
indicator:'indicator', -- the Indicator element (optional)
custom_function_start:getStart, -- the Custom function which will
be called when the request is opened (optional)
custom_function_end:getStart, -- the Custom function which will
be called when the request is Completed (optional)
handle_xml:handleXML -- if type is XML then required else optional
});"
*/
var http_request;// Global Variable
// Create the Request
var Ajax = {
request :function(){
if (window.XMLHttpRequest){
return new XMLHttpRequest();
}
else if (window.ActiveXObject) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
return new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
}
}
}
},
overRideMime: function(){
http_request.overrideMimeType('text/xml');
}
}
//Based Upon the user Prameters Call either of this two functions
transportData =
{
getHTML : function(){
if (http_request.readyState == 4) {
if (http_request.status == 200) {
setIndicator(0);
setPlaceHolder(1);
}
}
else{
ajaxRequest.customFunctionStart();
setIndicator(1);
}
},
getXML : function()
{
if (http_request.readyState == 4) {
if (http_request.status == 200){
setIndicator(0);
ajaxRequest.handle_xml();
}
}
else{
setIndicator(1);
}
}
};
//Assign the response from the server to the place holder
function setPlaceHolder(mode){
switch (mode)
{
case 1:
if(setPlaceHolder.placeholder){
setPlaceHolder.placeholder.innerHTML =
http_request.responseText
}
break;
case 0:
if(setPlaceHolder.placeholder){
setPlaceHolder.placeholder.innerHTML = '';
}
break;
}
}
//Handle the Indicator
function setIndicator(mode)
{
switch (mode){
case 1:
if(setIndicator.indicator){
setIndicator.indicator.style.display = 'block';
}
break;
case 0:
if(setIndicator.indicator){
setIndicator.indicator.style.display = 'none';
}
break;
}
}
//This is the function responsible for opening the connection to the
server
function ajaxRequest()
{
http_request = Ajax.request();
http_request.onreadystatechange = function() {
if(ajaxRequest.type=='HTML'){
transportData.getHTML();
}
else if(ajaxRequest.type=='XML'){
if (http_request.overrideMimeType) {
Ajax.overRideMime();
}
transportData.getXML();
}
};
http_request.open(ajaxRequest.method, ajaxRequest.url, true);
http_request.setRequestHeader('Content-Type', 'application/x-www-form-
urlencoded');
http_request.send(ajaxRequest.query_string);
}
function ajaxCall(pars)
{
try{
init(pars);
ajaxRequest();
}
catch(e){
alert(e);
}
}
//Do the Validation and Initilize the parameters to the correspong
methods
function init(pars)
{
ajaxRequest.url = false;
query_string = false;
ajaxRequest.query_string = false;
ajaxRequest.method = false;
ajaxRequest.type = false;
ajaxRequest.format_elements = false;
ajaxRequest.custom_function = false;
ajaxRequest.form_name = false;
setPlaceHolder.placeholder = false;
//Fetch all the parameters from the argument Object
for(i in pars){
switch(i){
case 'url':
ajaxRequest.url = pars;
break;
case 'query_string':
query_string = pars;
break;
case 'method':
ajaxRequest.method = pars;
break;
case 'type':
ajaxRequest.type = pars;
break;
case 'placeholder':
setPlaceHolder.placeholder = document.getElementById(pars);
break;
case 'indicator':
setIndicator.indicator = document.getElementById(pars);
break;
case 'custom_function_start':
ajaxRequest.customFunctionStart = pars;
break;
case 'custom_function_end':
ajaxRequest.format_elements = pars;
break;
case 'handle_xml':
ajaxRequest.handle_xml = pars;
break;
}
}
ajaxRequest.url = !ajaxRequest.url? throwError(1) :ajaxRequest.url;
ajaxRequest.method = !ajaxRequest.method?
ajaxRequest.method='GET':ajaxRequest.method;
ajaxRequest.type = !ajaxRequest.type?
ajaxRequest.type='HTML':ajaxRequest.type;
if((ajaxRequest.type=='post' || ajaxRequest.type=='POST') && !
ajaxRequest.form_name ){
throwError(4);
}
if(ajaxRequest.type=='HTML' && !setPlaceHolder.placeholder ){
throwError(2);
}
if(ajaxRequest.type=='XML' && !ajaxRequest.handle_xml ){
throwError(3);
}
if(ajaxRequest.method=='post' || ajaxRequest.method=='POST'){
ajaxRequest.query_string = queryString.postData();
if(query_string)
{
if(typeof(query_string)=='object'){
ajaxRequest.url += '?' + queryString.getData(query_string);
}
else{
throwError(7);
}
}
}
if((ajaxRequest.method=='get' || ajaxRequest.method=='GET' ) &&
query_string){
if(typeof(query_string)=='object'){
ajaxRequest.url += '?' + queryString.getData(query_string);
}
else{
throwError(7);
}
}
}
function throwError(err_no)
{
errors = new Array();
errors[1] = 'Please Mention The Url';
errors[2] = 'Error: Please mention the placeholder element';
errors[3] = 'Since your response is XML , Please mention the Custom
Funciton';
errors[4] = 'Please Mention the Form Name';
errors[7] = 'Error: Query String should be an object ex {name
in,no:
1001}';
throw(errors[err_no]);
}
//Format The query String both post and get
var queryString =
{
postData : function(){
var qs = '';
form_count = document.getElementsByTagName('form').length;
for(i=0;i<form_count;i++){
for(j=0; j<document.forms.elements.length; j++){
name = document.forms.elements[j].name;
value = document.forms.elements[j].value;
if(name!='')
{
qs += name+'='+value+'&'
}
}
}
return qs.substring(0,qs.length-1);
},
getData : function(query_string){
var qs = '';
for(i in query_string){
qs += i+'='+query_string+'&'
}
return qs.substring(0,qs.length-1);
}
}
///////////////////////////////////////////////////////////////////////////////////////
/////////////Custom
Functions /////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////
function getStart()
{
//Specify the task need to be done when the request Starts
ph = document.getElementById('placeholder');
ph.style.backgroundColor = 'red';
}
function getEnd()
{
//Specify the task need to be done when the request is completed
ph = document.getElementById('placeholder');
ph.style.backgroundColor = '#999999';
}
function handleXML()
{
alert(http_request.responseXML);
//If the response is XML do the process here
}
</script>
</head>
<body>
<div id='indicator' style="width:200px;display:none;border:1px solid
#000000;background-color:#990000;color:#FFFFFF;"><strong>Loading....</
strong></div>
<div id='placeholder'> This is the Place Holder where Data Will be
stored</div>
<br />
<form name="myform" action="test.php" method="post" >
<input type="text" name="myform_name" >
<input type="text" name="myform_id" >
</form>
<form name="myform1" id="myform1" action="test.php" >
<input type="text" name="myform1_name" >
<input type="text" name="myform1_id" >
</form>
<input type="button" value="Submit" onClick="ajaxCall(
{
url:'test.php',
method:'POST',
query_string:{name:'Mose',no:1231232},
type:'XML',
placeholder:'placeholder',
indicator:'indicator',
custom_function_start:getStart,
custom_function_end:getStart,
handle_xml:handleXML
});"
</body>
</html>
// The PHP File (test.php)
<?php
echo "<pre>";
echo "<div style='border:1px solid #000000;background-
color:#3333FF;color:#FFFFFF;font:bold 14px Arial, Helvetica, sans-
serif'>POST DATA</div>";
print_r($_POST);
echo "<div style='border:1px solid #000000;background-
color:#3333FF;color:#FFFFFF;font:bold 14px Arial, Helvetica, sans-
serif'>POST DATA</div>";
print_r($_GET);
?>
I have created a prototype to make ajax Calls,
I have done this to my knowledge,
Please go through it and I am looking forward for all your comments
and suggestions and tips to improments.
Below the html I have a few php codings copy that and make as
(test.php). and run the html file.
Thanks and Regards
Moses
<html>
<head>
<title>Ajax-Test</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<script language="JavaScript" >
//////////////////////////////////////////////////////////////
/////Purpose :This Prototype is used to make ajax calls
/////Date :FEB 12 2007
/////Autor :Moses Dinakran
///////////////////////////////////////////////////////////////
// Sample Ajax Call
/*
<input type="button" value="Submit" onClick="ajaxCall(
{
url:'test.php', -- the Url (required)
method:'POST', -- (POST,GET)the Method (optional)
query_string:{name:'Elvis',no:1002}, -- the query_string to the
(optional)
type:'HTML', -- (HTML,XML)the method Type default (HTML)
(optional)
placeholder:'placeholder', -- the place holder element where the
responseText should be displayed (optional) If(type=='HTML') then
required
indicator:'indicator', -- the Indicator element (optional)
custom_function_start:getStart, -- the Custom function which will
be called when the request is opened (optional)
custom_function_end:getStart, -- the Custom function which will
be called when the request is Completed (optional)
handle_xml:handleXML -- if type is XML then required else optional
});"
*/
var http_request;// Global Variable
// Create the Request
var Ajax = {
request :function(){
if (window.XMLHttpRequest){
return new XMLHttpRequest();
}
else if (window.ActiveXObject) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
return new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
}
}
}
},
overRideMime: function(){
http_request.overrideMimeType('text/xml');
}
}
//Based Upon the user Prameters Call either of this two functions
transportData =
{
getHTML : function(){
if (http_request.readyState == 4) {
if (http_request.status == 200) {
setIndicator(0);
setPlaceHolder(1);
}
}
else{
ajaxRequest.customFunctionStart();
setIndicator(1);
}
},
getXML : function()
{
if (http_request.readyState == 4) {
if (http_request.status == 200){
setIndicator(0);
ajaxRequest.handle_xml();
}
}
else{
setIndicator(1);
}
}
};
//Assign the response from the server to the place holder
function setPlaceHolder(mode){
switch (mode)
{
case 1:
if(setPlaceHolder.placeholder){
setPlaceHolder.placeholder.innerHTML =
http_request.responseText
}
break;
case 0:
if(setPlaceHolder.placeholder){
setPlaceHolder.placeholder.innerHTML = '';
}
break;
}
}
//Handle the Indicator
function setIndicator(mode)
{
switch (mode){
case 1:
if(setIndicator.indicator){
setIndicator.indicator.style.display = 'block';
}
break;
case 0:
if(setIndicator.indicator){
setIndicator.indicator.style.display = 'none';
}
break;
}
}
//This is the function responsible for opening the connection to the
server
function ajaxRequest()
{
http_request = Ajax.request();
http_request.onreadystatechange = function() {
if(ajaxRequest.type=='HTML'){
transportData.getHTML();
}
else if(ajaxRequest.type=='XML'){
if (http_request.overrideMimeType) {
Ajax.overRideMime();
}
transportData.getXML();
}
};
http_request.open(ajaxRequest.method, ajaxRequest.url, true);
http_request.setRequestHeader('Content-Type', 'application/x-www-form-
urlencoded');
http_request.send(ajaxRequest.query_string);
}
function ajaxCall(pars)
{
try{
init(pars);
ajaxRequest();
}
catch(e){
alert(e);
}
}
//Do the Validation and Initilize the parameters to the correspong
methods
function init(pars)
{
ajaxRequest.url = false;
query_string = false;
ajaxRequest.query_string = false;
ajaxRequest.method = false;
ajaxRequest.type = false;
ajaxRequest.format_elements = false;
ajaxRequest.custom_function = false;
ajaxRequest.form_name = false;
setPlaceHolder.placeholder = false;
//Fetch all the parameters from the argument Object
for(i in pars){
switch(i){
case 'url':
ajaxRequest.url = pars;
break;
case 'query_string':
query_string = pars;
break;
case 'method':
ajaxRequest.method = pars;
break;
case 'type':
ajaxRequest.type = pars;
break;
case 'placeholder':
setPlaceHolder.placeholder = document.getElementById(pars);
break;
case 'indicator':
setIndicator.indicator = document.getElementById(pars);
break;
case 'custom_function_start':
ajaxRequest.customFunctionStart = pars;
break;
case 'custom_function_end':
ajaxRequest.format_elements = pars;
break;
case 'handle_xml':
ajaxRequest.handle_xml = pars;
break;
}
}
ajaxRequest.url = !ajaxRequest.url? throwError(1) :ajaxRequest.url;
ajaxRequest.method = !ajaxRequest.method?
ajaxRequest.method='GET':ajaxRequest.method;
ajaxRequest.type = !ajaxRequest.type?
ajaxRequest.type='HTML':ajaxRequest.type;
if((ajaxRequest.type=='post' || ajaxRequest.type=='POST') && !
ajaxRequest.form_name ){
throwError(4);
}
if(ajaxRequest.type=='HTML' && !setPlaceHolder.placeholder ){
throwError(2);
}
if(ajaxRequest.type=='XML' && !ajaxRequest.handle_xml ){
throwError(3);
}
if(ajaxRequest.method=='post' || ajaxRequest.method=='POST'){
ajaxRequest.query_string = queryString.postData();
if(query_string)
{
if(typeof(query_string)=='object'){
ajaxRequest.url += '?' + queryString.getData(query_string);
}
else{
throwError(7);
}
}
}
if((ajaxRequest.method=='get' || ajaxRequest.method=='GET' ) &&
query_string){
if(typeof(query_string)=='object'){
ajaxRequest.url += '?' + queryString.getData(query_string);
}
else{
throwError(7);
}
}
}
function throwError(err_no)
{
errors = new Array();
errors[1] = 'Please Mention The Url';
errors[2] = 'Error: Please mention the placeholder element';
errors[3] = 'Since your response is XML , Please mention the Custom
Funciton';
errors[4] = 'Please Mention the Form Name';
errors[7] = 'Error: Query String should be an object ex {name
in,no:1001}';
throw(errors[err_no]);
}
//Format The query String both post and get
var queryString =
{
postData : function(){
var qs = '';
form_count = document.getElementsByTagName('form').length;
for(i=0;i<form_count;i++){
for(j=0; j<document.forms.elements.length; j++){
name = document.forms.elements[j].name;
value = document.forms.elements[j].value;
if(name!='')
{
qs += name+'='+value+'&'
}
}
}
return qs.substring(0,qs.length-1);
},
getData : function(query_string){
var qs = '';
for(i in query_string){
qs += i+'='+query_string+'&'
}
return qs.substring(0,qs.length-1);
}
}
///////////////////////////////////////////////////////////////////////////////////////
/////////////Custom
Functions /////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////
function getStart()
{
//Specify the task need to be done when the request Starts
ph = document.getElementById('placeholder');
ph.style.backgroundColor = 'red';
}
function getEnd()
{
//Specify the task need to be done when the request is completed
ph = document.getElementById('placeholder');
ph.style.backgroundColor = '#999999';
}
function handleXML()
{
alert(http_request.responseXML);
//If the response is XML do the process here
}
</script>
</head>
<body>
<div id='indicator' style="width:200px;display:none;border:1px solid
#000000;background-color:#990000;color:#FFFFFF;"><strong>Loading....</
strong></div>
<div id='placeholder'> This is the Place Holder where Data Will be
stored</div>
<br />
<form name="myform" action="test.php" method="post" >
<input type="text" name="myform_name" >
<input type="text" name="myform_id" >
</form>
<form name="myform1" id="myform1" action="test.php" >
<input type="text" name="myform1_name" >
<input type="text" name="myform1_id" >
</form>
<input type="button" value="Submit" onClick="ajaxCall(
{
url:'test.php',
method:'POST',
query_string:{name:'Mose',no:1231232},
type:'XML',
placeholder:'placeholder',
indicator:'indicator',
custom_function_start:getStart,
custom_function_end:getStart,
handle_xml:handleXML
});"
</body>
</html>
// The PHP File (test.php)
<?php
echo "<pre>";
echo "<div style='border:1px solid #000000;background-
color:#3333FF;color:#FFFFFF;font:bold 14px Arial, Helvetica, sans-
serif'>POST DATA</div>";
print_r($_POST);
echo "<div style='border:1px solid #000000;background-
color:#3333FF;color:#FFFFFF;font:bold 14px Arial, Helvetica, sans-
serif'>POST DATA</div>";
print_r($_GET);
?>