PHP/ Ajax/ jQuery - Equivalent for my code

Question

I have the following code and would like to use jquery to make it simpler:

var auctionBidAjax;

function auctionBid(auction_id) {
  auctionBidAjax=GetXmlHttpObject();
  if (auctionBidAjax==null) {
    alert ("Your browser does not support XMLHTTP!");
    return;
  }
  var url="/cms/ajax/auctionBid.php?auction_id="+auction_id;
  auctionBidAjax.onreadystatechange=function() { auctionBidReady(auction_id); };
  auctionBidAjax.open("GET",url,true);
  auctionBidAjax.send(null);
}

And...

function auctionBidReady(auction_id) {
  if (auctionBidAjax.readyState==4) {
    if (auctionBidAjax.responseText == "Bid Placed") {
      document.getElementById('auctionBid' + auction_id).innerHTML=
        "<a href=\"javascript:auctionBid("+auction_id+");\">Place Bid</a>";
      userBids();
    } else if (auctionBidAjax.responseText == "Not Logged In") {
      popupCentre('popupLogin');
      popupLoad('popupLogin');
    } else if (auctionBidAjax.responseText == "No Bids"){
      popupCentre('popupNoBids');
      popupLoad('popupNoBids');
    }
  }
}

My PHP script adds a bid etc and echos the responseText.

Answer 1

You've tagged this question as jquery so you can use $.ajax():

function auctionBid(auction_id) {
  $.ajax({
    url: "/cms/ajax/auctionBid.php",
    type: "GET",
    data: {
      auction_id: auction_id
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
      // act appropriately
    },
    success: function(data, textStatus) {
      // do whatever
    }
  });
}

If you didn't need an error handler you could use the simpler form of $.get() instead:

function auctionBid(auction_id) {
  var url = "/cms/ajax/auctionBid.php";
  $.get(url, { auction_id: auction_id }, function(data, textStatus) {
    // do whatever
  });
}

I actually prefer not to use error handlers. It's a little uglier than it needs to be. Use that for actual errors. Things like "not logged in" could be handled by the success handler. Just pass back a JSON object that contains the required information to tell the user what happened.

For this you could use the $.getJSON() shorthand version.

function auctionBid(auction_id) {
  var url = "/cms/ajax/auctionBid.php";
  $.getJSON(url, { auction_id: auction_id }, function(data) {
    if (data.notLoggedIn) {
      alert("Not logged in");
    }
    ...
  });
}

To return some information as JSON from PHP use json_encode() and set the MIME type appropriately:

<?php
session_start();
header('Content-Type: application/json');
echo json_encode(array(
  'highBid' => get_new_high_bid(),
  'loggedIn' => $_SESSION['loggedIn'],
));
exit;
?>

I'm making assumptions about your login system so the above is a gross simplification.

Return that to a $.getJSON() callback and you should be able to do:

alert(data.highBid);
alert(data.loggedIn);

Answer 2

JQuery.get is what you need http://docs.jquery.com/Ajax/jQuery.get