How can I choose Ajax technique

Question

Hi, I have a project, which has a server listening on port 9999. Originally the client is a flash program, which uses XML to communicate with the server. Now I want to write a web client to it(html). I want to make the modification as little as possible in the server side.

I am thinking using pure html + ajax. The problem I am facing is:

1) Can I send xml from the client side and wait for the response? If so, which is the most efficient way to develop it?

2) I think all the xml sent from client is embedded in HTTP request but my server didn't know HTTP at all. Do I need to modify my server to be a CGI program?

Is there any good framework for me to start with?

Answer 1

I have no idea about question 2, but I know you can use $.post(url, data); to send data to the server, or you can use $(selector).load(url-with-query-string); to achieve the result you want. Just set up a page which handles the data correctly and then make a get or post call from the page that currently has the Flash thing.

Hope this helps.

Answer 2

If you're server consumes XML, you should be able to send XML over HTTP, no problem. You can send this over the client using AJAX or even a normal POST / GET and then wait for the response to do something with it.

I don't think you need to change your server to do anything different.

You can write code to do AJAX (XMLHttpRequests) with plain Javascript (just make sure to cater for the browser differences). Or you can use a framework like jQuery which would make you job easier, but it could be overkill, if you only want to make a few AJAX calls and handle the response.

Answer 3

1) Yes, you're going to have to send an ajax request and wait for the response. I suggest you look into JQuery for this. Writing your own Ajax basics is a PITA. Going for a normal request/response (non-ajax) won't fly if you ask me, since you're returning XML. But that's okay, Ajax will do fine.

2) You web client talks HTTP and only HTTP. You're going to need to modify your server (or put something in front of it) that accepts HTTP requests and sends your XML in response. HTTP is a pretty simple protocol, so you can probably do this yourself if you really need to (I did it once).

Answer 4

I see alot of answeres here mentioning "send ajax request and wait for response". The A in Ajax stands for asynchronous, it means that you dont send a request and wait for a response. You just send it, and thats it, response can come within 100ms, 3seconds or tomorrow or never. If you need to wait for something until it comes by to continue your calculations or whatever, then you need to do a normal HTTP POST or GET request.

1) Yes, you can send XML from JavaScript (you can send anything), you can receive and handle it any way you like, do this preferably with jQuery which makes it simpler and gives you cross-browser support.

2) How can it be embedded in HTTP request without your server not knowing HTTP at all!?

We could give much better and detailed answers if you answer 'what are you trying to do and why'? How exactly does your current setup look like, what is the server at port 9999?

Answer 5

Because it is no clear what kind your server is (probably it is based on java or C/C++ sockets), if it is true you can adapt it to use the HTTP protocol, then you can use javascript code on the client side for requesting the server, by means of JSON (you should prefer JSON over XML firstly because it is simpler and is in the core of the JavaScript language). Particularly I have found the Prototype.js library very efficient and simple:

function doAJAXRequest(url, t_method, v_parameters, p_onsuccessfunction, p_onloadingfunction) {
    url = url + "?" + "randNum" + getRandom();
    var objAjax = new Ajax.Request( url, { method: t_method, parameters: v_parameters,  onLoading: p_onloadingfunction, 
                                           onSuccess: p_onsuccessfunction, onFailure: onfailureAjx } );
}
function setAJAXResultInElement(objRequest, elementId){ $(elementId).innerHTML = objRequest.responseText; }
function onloadingAjx(){ /*...*/ }
function onsuccessAjx(){ /*...*/ }
function onfailureAjx(objRequest) { setAJAXResultInElement(objRequest, "div_main_result"); }

For knowing more about prototype refer to: http://www.prototypejs.org/learn/introduction-to-ajax