1

I'm trying to understand AJAX and JSON and I'm not sure I get it, there are methods and functions that are doing the same stuff...

You've got $.getJSON to retrieve JSON format data from server, and you have $.ajax + $.post + $.get + load() to send data data to the server?

Can I use all of those methods to send JSON data?

Really I'm confused! Help me figure this out.

IMSoP
  • 89,526
  • 13
  • 117
  • 169
Boaz Hoch
  • 1,219
  • 1
  • 12
  • 36

2 Answers2

2

All those are just shorthands for calling the $.ajax function.

  • load is for retrieving HTML and writing it to the DOM in one go. You want to load JSON.
  • get and getJSON use GET requests which are not well-suited for sending JSON data.
  • post does a POST request, but doesn't allow you to choose the contentType of the sent data

For sending JSON you should use the $.ajax function with its many options, see Send JSON data with jQuery.

Community
  • 1
  • 1
Bergi
  • 630,263
  • 148
  • 957
  • 1,375
  • most of what you wrote i get and undertand but what is exactly POST and GET request what are the meaning of those? – Boaz Hoch Jul 04 '13 at 19:54
2

An AJAX request is, at heart, an HTTP request. This is the same protocol which is used for all content on the Web (arguably, if it's not HTTP, it's not the Web) - loading a page, the images on the page, the CSS and JS includes, a submitted form, etc, etc.

As such, it inherits pretty much all of the flexibility of HTTP, meaning a generic function like jQuery.ajax ends up quite complex, with lots of options you don't normally need to worry about. This leads to the Shorthand Methods you mentioned, which bundle up common sets of options and functionality.

Among the things you might want to vary:

  • The "method" of the request: GET or POST (or less common ones like HEAD, PUT, DELETE...). A GET request is the simplest: request this URL, give me its contents; parameters to a GET request are shoved onto the "query string" of the URL. A POST request is how larger forms would be submitted on a normal page: the parameters are passed as a body of data separate from the URL and control headers; for an AJAX request this is often helpful to send a block of XML or JSON to a URL. This is a very broad overview, and there are many more distinctions in behaviour and meaning between the two.
  • The "content type" you want in the response (and, for a POST request, of the data you're sending). Not only does this tell both the server and the browser what data it is handling, ensuring it will pass it successfully, it can give jQuery (or whatever library) a hint of what to do next: if a call returns XML, you'll probably want to manipulate it as a DOM straight away; if it's JSON, you'll want to parse it as a JS object.
  • What you want to do once the data comes back. I've already mentioned parsing JSON or XML, but what if your response is actually a block of HTML that you want to inject straight into the parent page? Obviously you could do that yourself in the callback function, but again jQuery includes a shorthand form in the shape of .load().

All of the above are possible with jQuery.ajax, but you'd have to remember the parameters, even though you're falling into the same cases again and again, so chances are most of the time you'll be using whichever of the shorthands suits your needs at that moment.

IMSoP
  • 89,526
  • 13
  • 117
  • 169