HTTP Content-Type Header and JSON

Question 1

I have always been trying to avoid using most of the HTTP protocol's properties for the sake of fear of the unknown.

However, I said to myself that I'm going to face fear today and start using headers purposefully. I have been trying to send json data to the browser and use it right away. For example, if I have an Ajax handler function on ready state 4 which looks like so:

function ajaxHandler(response){
    alert(response.text);
}

And I have set the content-type header in my PHP code:

header('Content-Type: application/json');
echo json_encode(array('text' => 'omrele'));

Why can't I directly access the property from the handler function, when the browser is clearly told that the incoming data is application/json?

Question 2

The Content-Type header is just used as info for your application. The browser doesn't care what it is. The browser just returns you the data from the AJAX call. If you want to parse it as JSON, you need to do that on your own.

The header is there so your app can detect what data was returned and how it should handle it. You need to look at the header, and if it's application/json then parse it as JSON.

This is actually how jQuery works. If you don't tell it what to do with the result, it uses the Content-Type to detect what to do with it.

Question 3

In order to update charts that way, you need to create chart only once (outside the ajax request) and keep adding new dataPoints via ajax request each second as shown below.

<!DOCTYPE HTML>
<html>
    <head>  
        <script type="text/javascript" src="canvasjs.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>
            $(document).ready(function () {
                var chart = new CanvasJS.Chart("chartContainer", {

                    zoomEnabled: true,
                    panEnabled: true,
                    animateEnabled: true,
                    data: [ {
                        type: "splineArea",
                        xValueType: "label",
                        y: "y",
                        dataPoints: [] 
                    } ] 

                });

                function updateChart(){
                    $.getJSON("data.php", function (data_points) {
                        for(var i = 0; i < data_points.length; i++){
                            chart.options.data[0].dataPoints.push(data_points[i]);
                        }

                        chart.render();
                    });
                }               

                var updateInterval = 1000;

                setInterval(function(){
                        updateChart()
                }, updateInterval);

            });

        </script>
    </head>
    <body>
        <div id="chartContainer" style="height: 300px; width: 500px;"></div>
    </body>
</html>

Question 4

You can find every content type here: http://www.iana.org/assignments/media-types/media-types.xhtml

The most common type are:

Type application

application/java-archive
application/EDI-X12   
application/EDIFACT   
application/javascript   
application/octet-stream   
application/ogg   
application/pdf  
application/xhtml+xml   
application/x-shockwave-flash    
application/json  
application/ld+json  
application/xml   
application/zip  
application/x-www-form-urlencoded

Type audio

audio/mpeg   
audio/x-ms-wma   
audio/vnd.rn-realaudio   
audio/x-wav

Type image

image/gif   
image/jpeg   
image/png   
image/tiff    
image/vnd.microsoft.icon    
image/x-icon   
image/vnd.djvu   
image/svg+xml

Type multipart

multipart/mixed    
multipart/alternative   
multipart/related (using by MHTML (HTML mail).)  
multipart/form-data

Type text

text/css    
text/csv    
text/html    
text/javascript (obsolete)    
text/plain    
text/xml

Type video

video/mpeg    
video/mp4    
video/quicktime    
video/x-ms-wmv    
video/x-msvideo    
video/x-flv   
video/webm

Type vnd :

application/vnd.android.package-archive
application/vnd.oasis.opendocument.text    
application/vnd.oasis.opendocument.spreadsheet  
application/vnd.oasis.opendocument.presentation   
application/vnd.oasis.opendocument.graphics   
application/vnd.ms-excel    
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet   
application/vnd.ms-powerpoint    
application/vnd.openxmlformats-officedocument.presentationml.presentation    
application/msword   
application/vnd.openxmlformats-officedocument.wordprocessingml.document   
application/vnd.mozilla.xul+xml

Question 5

I was just neglecting to realize that I still had two echo statements in the script...that is why it wasn't recognized as JSON.

Question 6

You can define middleware for mux router, here is an example:

func main() {
    port := ":3000"
    var router = mux.NewRouter()
    router.Use(commonMiddleware)

    router.HandleFunc("/m/{msg}", handleMessage).Methods("GET")
    router.HandleFunc("/n/{num}", handleNumber).Methods("GET")
    // rest of code goes here
}

func commonMiddleware(next http.Handler) http.Handler {
    return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
        w.Header().Add("Content-Type", "application/json")
        next.ServeHTTP(w, r)
    })
}

HTTP Content-Type Header and JSON

Answers

javascript,php,json,http