Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Performing POST requests using Ajax

    Hi all,

    I just wonder if someone can help me with the following:

    I have a website which will displays agents who are in the following status: Available, Busy and Unavailable.

    This status is to be retrieved by send a POST request to a webserver via URL, the web server will then return an XML output as per the following example:

    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <agents>
      <agent>
        <id>1737</id>
        <status>1</status>
      </agent>
      <agent>
        <id>1738</id>
        <status>2</status>
      </agent>
      <agent>
        <id>1739</id>
        <status>3</status>
      </agent>
    </agents>
    For error codes I would receieve the following:

    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <agents>
      <error>
        <id>1</id>
        <msg>Unable to Authenticate with ClientID / Username / Password</msg>
      </error>
    </agents>
    Once I receive this data I then have to convert the information received into a status symbol (Green, Orange and Red) based on their status.

    Can anyone help me with the coding of this as all the information I have found only provides code for sending a POST request based on a user trigger i.e. "button submit".

    Many thanks

  • #2
    New Coder
    Join Date
    Jul 2006
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    First of all, why are you sending a POST request? In cases like these it is generally better to send a GET request.

    While you can use native JS code to send an ajax request I would recommend using JQuery to send an AJAX request mainly because of how easy it is:

    Example of JQuery AJAX POST Request:
    Code:
    	$.ajax({type:'POST',url:'/path/to/url',data:"your_variable="+your_variable+"&another_var="+another_var,
    	success:function(data_response){
    		alert(data_response);
    	}});
    Sending a GET Request using AJAX:
    Code:
    	$.get('/path/to/url', 
            function(data_response){
                   alert(data_response);
            });

  • #3
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,

    Post is much more secure as it hides the password when making the request; therefore I have to go with that option.

    Okay, so if I was to send a request using JQuery based on what you have said I have a sudo URL:

    Code:
    http://www.ivrstats.co.uk/IVR/xmlagentstatus.aspx
    I would then just add the necessary fields clientid, username, password, supervisorid in the variable fields as per the below:

    Code:
    $.ajax({type:'POST',url:'http://www.ivrstats.co.uk/IVR/xmlagentstatus.aspx',data:"1234"agent1234"agent"agentpassword_var,
    	success:function(data_response){
    		alert(data_response);
    	}});
    Can I therefore simply add this code to the HTML? I'm not sure how I would implement this and prevent anyone from viewing the data?

    Also, I need to be able to work with the XML file returned from the webserver which I would very much appreciate some guidance on.
    Last edited by olly79; 01-17-2009 at 07:42 PM.

  • #4
    New Coder
    Join Date
    Jul 2006
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Even if you send a POST request I can use firebug to view the POST parameters anyways so you can't really hide using the method I suggested.

    One thing you COULD do is send a GET request to a script and that script sends a different POST request with the username/password to the real domain and it outputs the output from the POST request back to the calling file. This way the POST is requested transparently to the user and since it originates from the server you have your script on the client can't see it. Anything you initiate from the client's end could ultimately be picked up by the user if he is good enough to be able to dissect your code.

    On another note your call is wrong anways:
    Code:
    $.ajax({type:'POST',url:'http://www.ivrstats.co.uk/IVR/xmlagentstatus.aspx',data:"1234"agent1234"agent"agentpassword_var,
    	success:function(data_response){
    		alert(data_response);
    	}});
    needs to be

    Code:
    $.ajax({type:'POST',url:'http://www.ivrstats.co.uk/IVR/xmlagentstatus.aspx',data:"1234="agent1234+"&agent="+agentpassword_var,
    	success:function(data_response){
    		alert(data_response);
    	}});
    data needs to be in string format

  • #5
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,

    Thanks for that.

    Here is an example of a website which show agents against there status: kooma.co.uk/PsychicReadings/tabid/59/Default.aspx

    In affect this is what I'm trying to achieve; however, as you will see there are many agents all with their relevant status shown.

    Based on what you have said would the best method be to save the code and call it from the HTML like the following example:

    Code:
    <script src="/jscript/jquery.xmlagentstatus.js" type="text/javascript"></script>
    </head>
    Now I will need to send a POST request for each AGENT on the website and as discussed I will receive an XML file for which I will then be able to determine the AGENTS status and relate that to a traffic light (Green, Orange and Red).

    I'm struggling on how I will go about all of this; therefore I would be grateful if you could assist with some basics on how I would go about achieving all of this? I know I'm asking a lot but code examples for each section would help me greatly as I'm struggling.

    Many thanks
    Last edited by masmedia; 02-25-2014 at 04:24 PM. Reason: link removal request

  • #6
    New Coder
    Join Date
    Jul 2006
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If you wanted a really quick and dirty way to do this I would load the agents and their status all at once through ajax into a <div> container and every couple of minutes or so just recall that same code and load everything again.

  • #7
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Could you possibly provide me with code examples of what you have mentioned?

    Many thanks

  • #8
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, I wonder if someone could see where I'm at with my understanding of what it is that I'm trying to achieve:

    I first need to create a generic function for creating an Ajax object instance:

    Code:
    function ajaxRequest(){
     var activexmodes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"] //activeX versions to check for in IE
     if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
      for (var i=0; i<activexmodes.length; i++){
       try{
        return new ActiveXObject(activexmodes[i])
       }
       catch(e){
        //suppress error
       }
      }
     }
     else if (window.XMLHttpRequest) // if Mozilla, Safari etc
      return new XMLHttpRequest()
     else
      return false
    }
    
    //Sample call:
    //var myajaxrequest=new ajaxRequest()
    I can see that I can call this by using the following in the HEAD of each page:

    Code:
    <script type="text/javascript" src="ajaxroutine.js">
    My next step will be the Ajax POST request. I have seen the following code as an example for issuing a POST request; however, as discussed I will be returning an XML file; therefore all I'm initially doing is a http post request to a url on a web server. Is the example code below correct for this method and if so what would I need to amend to simply issue a URL:

    Code:
    var mypostrequest=new ajaxRequest()
    mypostrequest.onreadystatechange=function(){
     if (mypostrequest.readyState==4){
      if (mypostrequest.status==200 || window.location.href.indexOf("http")==-1){
       document.getElementById("result").innerHTML=mypostrequest.responseText
      }
      else{
       alert("An error has occurred making the request")
      }
     }
    }
    var namevalue=encodeURIComponent(document.getElementById("name").value)
    var agevalue=encodeURIComponent(document.getElementById("age").value)
    var parameters="name="+namevalue+"&age="+agevalue
    mypostrequest.open("POST", "basicform.php", true)
    mypostrequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
    mypostrequest.send(parameters)
    The webserver will then return an XML file:

    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <agents>
      <agent>
        <id>1737</id>
        <status>1</status>
      </agent>
      <agent>
        <id>1738</id>
        <status>2</status>
      </agent>
      <agent>
        <id>1739</id>
        <status>3</status>
      </agent>
    </agents>
    And from there I will do as mentioned dump this into a <div> container. I have also found the following example code for retrieving an XML document using Ajax:

    Code:
    <div id="result"> </div>
    
    <script type="text/javascript">
    
    function ajaxRequest(){
     var activexmodes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"] //activeX versions to check for in IE
     if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
      for (var i=0; i<activexmodes.length; i++){
       try{
        return new ActiveXObject(activexmodes[i])
       }
       catch(e){
        //suppress error
       }
      }
     }
     else if (window.XMLHttpRequest) // if Mozilla, Safari etc
      return new XMLHttpRequest()
     else
      return false
    }
    
    var mygetrequest=new ajaxRequest()
    if (mygetrequest.overrideMimeType)
     mygetrequest.overrideMimeType('text/xml')
    mygetrequest.onreadystatechange=function(){
     if (mygetrequest.readyState==4){
      if (mygetrequest.status==200 || window.location.href.indexOf("http")==-1){
       var xmldata=mygetrequest.responseXML //retrieve result as an XML object
       var rssentries=xmldata.getElementsByTagName("item")
       var output='<ul>'
       for (var i=0; i<rssentries.length; i++){
        output+='<li>'
        output+='<a href="'+rssentries[i].getElementsByTagName('link')[0].firstChild.nodeValue+'">'
        output+=rssentries[i].getElementsByTagName('title')[0].firstChild.nodeValue+'</a>'
        output+='</li>'
       }
       output+='</ul>'
       document.getElementById("result").innerHTML=output
      }
      else{
       alert("An error has occured making the request")
      }
     }
    }
    
    mygetrequest.open("GET", "javascriptkit.xml", true)
    mygetrequest.send(null)
    
    </script>
    As I have many agents I'm not sure how I could send one large POST request, return the data and then populate the website based on the XML file returned. I would be grateful if someone could please help me.

    Many thanks
    Last edited by olly79; 01-18-2009 at 04:35 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •