AJAX Post Object

[olly79]

Hi all,

 

I wonder if someone could possibly help me with the following as I'm increadibly stuck.

 

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.

 

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)}

  ^}

  ^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)}

  ^}

  ^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.getElementsByTagName('link')[0].firstChild.nodeValue+'">'}

    ^{output+=rssentries.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

[olly79]

Hi,

 

If it helps I have included a link to a website which displays agent status:http://www.thecircle.com/advisor/all-categories/content.do