An Ajax Prototype -- Looking forward for your feedbacks

Discussion in 'Javascript' started by Moses, Feb 24, 2007.

  1. Moses

    Moses Guest

    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:Din,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);
    ?>
    Moses, Feb 24, 2007
    #1
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    1
    Views:
    341
    Haitian
    Apr 23, 2005
  2. Jeff
    Replies:
    0
    Views:
    283
  3. Website Feedbacks

    , May 11, 2007, in forum: HTML
    Replies:
    0
    Views:
    309
  4. June Lee
    Replies:
    2
    Views:
    785
    Jim Cobban
    Apr 13, 2008
  5. Replies:
    9
    Views:
    170
    Thomas 'PointedEars' Lahn
    May 26, 2006
Loading...

Share This Page