Ajax :Best way to extract data from database in Web Applications

Ajax Best way to extract data from database in Web Applications
Step1. create the ajax.js file with the function called ajax where the ActiveXObject for the diff data can be called

<--!document.write("
");

function Ajax()
{

this.toString = function() { return "Ajax"; }
this.http = new HTTP();

this.makeRequest = function(_method, _url, _callbackMethod)
{
this.request = (window.XMLHttpRequest)? new XMLHttpRequest(): new ActiveXObject("MSXML2.XMLHTTP");
this.request.onreadystatechange = _callbackMethod;
this.request.open(_method, _url, true);
this.request.send(_url);
}

this.checkReadyState = function(_id, _1, _2, _3)
{
switch(this.request.readyState)
{
case 1:
document.getElementById(_id).innerHTML = _1;
break;
case 2:
document.getElementById(_id).innerHTML = _2;
break;
case 3:
document.getElementById(_id).innerHTML = _3;
break;
case 4:
document.getElementById(_id).innerHTML = "";
return this.http.status(this.request.status);
}
}
}

Step2 create the HTTP.js file with the function http along with the error messages and standard methods like this

function HTTP()
{
this.toString = function() { return "HTTP"; }

this.status = function(_status)
{
var s = _status.toString().split("");
switch(s[0])
{
case "1":
return this.getInformationalStatus(_status);
break;
case "2":
return this.getSuccessfulStatus(_status);
break;
case "3":
return this.getRedirectionStatus(_status);
break;
case "4":
return this.getClientErrorStatus(_status);
break;
case "5":
return this.getServerErrorStatus(_status);
break;
}
}

this.getInformationalStatus = function(_status)
{
// Informational 1xx
// http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10.1
switch(_status)
{
case 100:
return "Continue";
break;
case 101:
return "Switching Protocols";
break;
}
}

this.getSuccessfulStatus = function(_status)
{
// Successful 2xx
// http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10.2
switch(_status)
{
case 200:
return "OK";
break;
case 201:
return "Created";
break;
case 202:
return "Accepted";
break;
case 203:
return "Non-Authoritative Information";
break;
case 204:
return "No Content";
break;
case 205:
return "Reset Content";
break;
case 206:
return "Partial Content";
break;
}
}

this.getRedirectionStatus = function(_status)
{
// Redirection 3xx
// http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10.3
switch(_status)
{
case 300:
return "Multiple Choices";
break;
case 301:
return "Moved Permanently";
break;
case 302:
return "Found";
break;
case 303:
return "See Other";
break;
case 304:
return "Not Modified";
break;
case 305:
return "Use Proxy";
break;
case 306:
return "(Unused)";
break;
case 307:
return "Temporary Redirect";
break;
}
}

this.getClientErrorStatus = function(_status)
{
// Client Error 4xx
// http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10.4
switch(_status)
{
case 400:
return "Bad Request";
break;
case 401:
return "Unauthorized";
break;
case 402:
return "Payment Required";
break;
case 403:
return "Forbidden";
break;
case 404:
return "File not found.";
break;
case 405:
return "Method Not Allowed";
break;
case 406:
return "Not Acceptable";
break;
case 407:
return "Proxy Authentication Required";
break;
case 408:
return "Request Timeout";
break;
case 409:
return "Conflict";
break;
case 410:
return "Gone";
break;
case 411:
return "Length Required";
break;
case 412:
return "Precondition Failed";
break;
case 413:
return "Request Entity Too Large";
break;
case 414:
return "Request-URI Too Long";
break;
case 415:
return "Unsupported Media Type";
break;
case 416:
return "Requested Range Not Satisfiable";
break;
case 417:
return "Expectation Failed";
break;
}
}

this.getServerErrorStatus = function(_status)
{
// Server Error 5xx
// http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10.5
switch(_status)
{
case 500:
return "Internal Server Error";
break;
case 501:
return "Not Implemented";
break;
case 502:
return "Bad Gateway";
break;
case 503:
return "Service Unavailable";
break;
case 504:
return "Gateway Timeout";
break;
case 505:
return "HTTP Version Not Supported";
break;
}
}
}

Step3 create the response file with respone.js where the ajax response and the request function based on the id which u create in the html templates has to called here

Fro ex. “document.getElementById('resultdiv')” in the following cade is the field id to which u want to call the ajax from the html template
***********************
var ajax = new Ajax();
function onXHTMLResponse()
{
if(ajax.checkReadyState('resultdiv', '', '', '') == "OK")
{

if(ajax.request.responseText!='')
{
//alert(ajax.request.responseText);
var mySplitResult = ajax.request.responseText.split("");
document.getElementById('resultdiv').style.display='';
var spl_res=mySplitResult[0].split("$")
maxval=spl_res[1];
if(mySplitResult[1]!='')
var output=mySplitResult[1];
if(mySplitResult[1]==undefined)
{
var val = document.getElementById('txt_Anredekurzel').value;
document.getElementById('err_txt_Anredekurzel').innerHTML = ""+symbol_title+" "+val+" "+not_exist+"";
//var output="

"+symbol_title+" "+val+" "+not_exist+"

";
}
else
document.getElementById('resultdiv').innerHTML = output;
//document.getElementById('resultdiv').innerHTML =ajax.request.responseText;
//document.getElementById('link1').focus();
//document.getElementById('resdiv1').className='seldiv';
}

}
}



function onXHTMLResponse_info()
{
if(ajax.checkReadyState('resultdiv', '', '', '') == "OK")
{

if(ajax.request.responseText!='')
{
//alert(ajax.request.responseText);
var mySplitResult = ajax.request.responseText.split("");
document.getElementById('resultdiv').style.display='';
var spl_res=mySplitResult[0].split("$");
maxval=spl_res[1];
if(mySplitResult[1]!='')
var output=mySplitResult[1];
if(mySplitResult[1]==undefined)
var output="No Suggestions";

document.getElementById('resultdiv').innerHTML = output;
//document.getElementById('resultdiv').innerHTML =ajax.request.responseText;
//document.getElementById('link1').focus();
//document.getElementById('resdiv1').className='seldiv';
}

}
}


Step5 The code that has to inserted in the htm file is

{lang mkey="credit_card"}

If u have problem with this pls free to concern