dataType vs accepts - Ajax Request

Question

I am trying to understand the difference between accepts and dataType in a Ajax Request. Documentation states:

Documentation

accepts (default: depends on DataTy

Answer 1

Here is a, hopefully, precise answer:

The accepts option let you change the Accept header in the request

When you change this option, the Accept header in the request will be set to the one(s) specified. Take notice that it is not a string, but an object mapping the MIME type of the accepted responses. Like { text: "text/plain", html: "text/html" }. The Accept header can be used by the server to provide the response in the format expected by the request, or fail in case it can't provide the response in one of the formats expected by the request.

A really important thing is that, at least in jQuery 1.11.3 (where I tested), this options seems to not be working, instead I managed to change the header using the headers option: headers: {Accept : "text/json"}.

The dataType option let you pre-process the response

If you define a dataType, the response of the request will be pre-processed by jQuery before being available to the succes handler. For example:

If json is specified, the response is parsed using jQuery.parseJSON before being passed, as an object, to the success handler.

If script is specified, $.ajax() will execute the JavaScript that is received from the server before passing it on to the success handler as a string.

More examples here, in the "Data Types" section.

In case that dataType is not set, the Content-Type of the response will determine what pre-processing should be done to the response. Be aware that changing the dataType will change the Accept header too. Usually there is no need to change the Accept header by yourself.

Example

request.php

<?php
if(strpos($_SERVER["HTTP_ACCEPT"],"text/javascript") === false)
    exit("I only provide text/javascript responses");

echo "alert('This is my response!')";

index.html

<button id="send">Send</button>
<div id="response"></div>

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function(){
    
    $("#send").click(function(){
        $.ajax({
            method: "GET",
            url: "request.php",
            dataType: "script" // Change this to "text" and you will see the difference
        }).done(function(data) {
            $("#response").text(data);
        });
    });
    
    
});
</script>

When the dataType is set to "script" the Accept header will include "text/javascript" so the test on request.php will pass. It will return "alert('This is my response!')" and because the dataType is set to "script" jQuery will attempt to execute that as javascript and then pass it as plain text to the success handler.

If you change the dataType to "text" the Accept header will NOT include "text/javascript" so the test on request.php will fail. It will return "I only provide text/javascript responses" and because the dataType is set to "text" jQuery will pass it as plain text to the success handler.