how to implement this data transfer in javascript?

Question

i need to send to server 50 bytes of data and receive 200 bytes in response without reloading a page. How can i do it?? What is the most crossbrowser way??

@Mat: The word "ajax" doesn't explain how to do it, and in a cross-browser way. — user113716, May 15 '11 at 16:44
**why the downvote?** OP is just learning and doesn't deserve such treatment. — Pete Wilson, May 15 '11 at 16:48
@Dr and the rest: I did not downvote nor voted to close on this one, but I understand the reasons to do it. It would help if the OP added a little more explanation on what exactly is looking for, and what the OP have tried until now (or what the unsuccessful research was). — Aleadam, May 15 '11 at 16:54
@patrickdw Because the second question, what, is answered already, and the first, how, would require a blog post length answer like, say [this one](http://stackoverflow.com/questions/6009206/what-is-ajax-and-how-does-it-work/6009208#6009208), which makes it overly broad — Yi Jiang, May 15 '11 at 16:56
@Yi Jiang: When you say the second question is answered already, are you saying that there are no cross-browser issues in making xhr requests? — user113716, May 15 '11 at 17:07

Aleadam · Accepted Answer · 2011-05-15T17:01:26.437

If you don't want to use a library, take a look at this page. Nice info to make your ajax call cross browser.

And, if the data is binary, encode it

This is a snippet copied verbatim from ajax for N00bs (I strongly suggest you to read not only that post, but all of them in that site):

function callback(serverData, serverStatus) {
  alert(serverData);
}
// Called automatically when we get data back from server
// Display an alert box with the recieved data
function ajaxRequest() {
  var AJAX = null;
  // Initialize the AJAX variable.
  if (window.XMLHttpRequest) {
    // Does this browser have an XMLHttpRequest object?
    AJAX=new XMLHttpRequest();
    // Yes -- initialize it.
  } else {
    // No, try to initialize it IE style
    AJAX=new ActiveXObject("Microsoft.XMLHTTP"); // Wheee, ActiveX, how do we format c: again?
  }
  // End setup Ajax.
  if (AJAX==null) {
    // If we couldn't initialize Ajax...
    alert("Your browser doesn't support AJAX."); // Sorry msg.
    return false
    // Return false, couldn't set up ajax
  }
  AJAX.onreadystatechange = function() {
    // When the browser has the request info..
    if (AJAX.readyState==4 || AJAX.readyState=="complete") { // see if the complete flag is set.
      callback(AJAX.responseText, AJAX.status);
      // Pass the response to our processing function
    }
    // End Ajax readystate check.
  }
  var url='http://somedomain.com/getdata.php?doc=sometext.txt'; // This is the URL we will call.
  AJAX.open("GET", url, true);
  // Open the url this object was set-up with.
  AJAX.send(null);
  // Send the request.
}

score 1 · Answer 2 · answered May 15 '11 at 16:38

The easiest way is to use something like jQuery: http://api.jquery.com/jQuery.get/

You could setup the AJAX request yourself if you need the code to be really small. Although most users have jQuery cached (use the Google source) so there should be minimal load impact.

how to implement this data transfer in javascript?

2 Answers2