contentType is the HTTP header sent to the server, specifying a particular format.
Example: I’m sending JSON or XML
dataType is you telling jQuery what kind of response to expect.
Expecting JSON, or XML, or HTML, etc. The default is for jQuery to try and figure it out.
The $.ajax() documentation has full descriptions of these as well.
In your particular case, the first is asking for the response to be in UTF-8, the second doesn’t care. Also the first is treating the response as a JavaScript object, the second is going to treat it as a string.
So the first would be:
success: function(data) {
// get data, e.g. data.title;
}
The second:
success: function(data) {
alert(“Here’s lots of data, just a string: ” + data);
}
contentType specifies the format of data being sent to the server as part of request(it can be sent as part of response too, more on that later).
dataType specifies the expected format of data to be received by the client(browser).
Both are not interchangable.
contentType is the header sent to the server, specifying the format of data(i.e the content of message body) being being to the server. This is used with POST and PUT requests. Usually when u send POST request, the message body comprises of passed in parameters like:
==============================
Sample request:
POST /search HTTP/1.1
Content-Type: application/x-www-form-urlencoded
<
name=sam&age=35
==============================
The last line above “name=sam&age=35” is the message body and contentType specifies it as application/x-www-form-urlencoded since we are passing the form parameters in the message body.
However we aren’t limited to just sending the parameters, we can send json, xml,… like this(sending different types of data is especially useful with RESTful web services):
==============================
Sample request:
POST /orders HTTP/1.1
Content-Type: application/xml
<
…
==============================
So the ContentType this time is: application/xml, cause that’s what we are sending.
The above examples showed sample request, similarly the response send from the server can also have the Content-Type header specifying what the server is sending like this:
==============================
sample response:
HTTP/1.1 201 Created
Content-Type: application/xml
<
…
==============================
dataType specifies the format of response to expect. Its related to Accept header. JQuery will try to infer it based on the Content-Type of the response.
==============================
Sample request:
GET /someFolder/index.html HTTP/1.1
Host: mysite.org
Accept: application/xml
<
==============================
Above request is expecting XML from the server.
Regarding your question,
contentType: “application/json; charset=utf-8”,
dataType: “json”,
Here you are sending json data using UTF8 character set, and you expect back json data from the server. As per the JQuery docs for dataType,
The json type parses the fetched data file as a JavaScript object and
returns the constructed object as the result data.
So what you get in success handler is proper javascript object(JQuery converts the json object for you)
whereas
contentType: “application/json”,
dataType: “text”,
Here you are sending json data, since you haven’t mentioned the encoding, as per the JQuery docs,
If no charset is specified, data will be transmitted to the server
using the server’s default charset; you must decode this appropriately
on the server side.
and since dataType is specified as text, what you get in success handler is plain text, as per the docs for dataType,
The text and xml types return the data with no processing. The data is
simply passed on to the success handler