Ajax send parameters through url

Question

I'm new with ajax and thought i'd be a fun experiment to put into my project. I've created my own lightbox type feature to send a message on a website I'm creating. When the user clicks "Send Message", that's when the lightbox appears, and at the top I'm trying to get it to say "Send message to User", where User is the name of the user they're sending a message too. My lightbox html elements are actually on a seperate webpage, which is why I'm using ajax. this is what I have so far, and can't seem to figure out what the problem is:

user.php page

<div id = "pageMiddle"> // This div is where all the main content is.
  <button onclick = "showMessageBox(UsersName)">Send Message</button>
</div>

Note: The username passes correctly into the javascript function, I have checked that much.

main.js page

function showMessageBox(user){
  alert(user); // where i checked if username passes correctly
  var ajaxObject = null;
  if (window.XMLHttpRequest){
    ajaxObject = new XMLHttpRequest();
  }else if (window.ActiveXObject){
    ajaxObject = new ActiveXObject("Microsoft.XMLHTTP");
  }
  if (ajaxObject != null){
    ajaxObject.open("GET", "message_form.php", true);
    ajaxObject.send("u="+user);
  }else{
    alert("You do not have a compatible browser");
  }
  ajaxObject.onreadystatechange = function(){
    if (ajaxObject.readyState == 4 && ajaxObject.status == 200){
      document.getElementById("ajaxResult").innerHTML = ajaxObject.responseText;
      // use jquery to fade out the background and fade in the message box
      $("#pageMiddle").fadeTo("slow", 0.2);
      $("#messageFormFG").fadeIn("slow");
    }
  };
}

message_form.php page

<div id = "messageFormFG">
  <div class = "messageFormTitle">Sending message to <?php echo $_GET['u']; ?></div>
</div>

Note: When accessing this page directly through the URL, giving it a parameter of u and a value, it displays correctly

Solution 1

I figured it out after watching some ajax tutorials from bucky :) aka thenewboston. If I'm using the GET method, i just had to add the parameter to the end of the url in the .open function, instead of passing it through the send function (like you would a post method).

Solution 2

Use jQuery.ajax(); http://api.jquery.com/jQuery.ajax/

$.ajax({
  type: "GET",
  url: "message_form.php",
  data: { name: "John", location: "Boston" }
}).done(function( msg ) {
  alert( "Data Saved: " + msg );
});

Comments

[CarlosB]

this isn't needed when using jQuery ajax library.

[CamHenlin]

That's correct, CarlosB. This is only needed when not using jQuery, as the original poster was doing. I pointed out that it would be a good idea to use jQuery after I explained the proper way to handle the request without jQuery.