...

View Full Version : Performing POST requests using Ajax



olly79
01-17-2009, 05:02 PM
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:


<?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:


<?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

vanraizen
01-17-2009, 05:38 PM
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:


$.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:


$.get('/path/to/url',
function(data_response){
alert(data_response);
});

olly79
01-17-2009, 07:37 PM
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:


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:


$.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.

vanraizen
01-17-2009, 09:10 PM
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:

$.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


$.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

olly79
01-17-2009, 09:32 PM
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:


<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

vanraizen
01-17-2009, 09:47 PM
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.

olly79
01-17-2009, 10:18 PM
Could you possibly provide me with code examples of what you have mentioned?

Many thanks

olly79
01-18-2009, 03:52 PM
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:


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:


<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:


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:


<?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:


<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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum