JSON

Stands for JavaScript Object Notation. It is object syntax that is standardized by the same organization that standardizes JavaScript.

JSON is frequently used to communicate data between programming languages. XML (extensible markup language) was primarily used before JSON.

A JSON file has the extension of .json. It is frequently used for configuration or smaller data sets.

Syntax

{
    "name": "Jon",
    "isAwake": true,
    "count": 3,
    "languages": ["JavaScript", "Java"],
    "job":{
        "field": "Development",
        "responsibilities": ["training", "coding"],
        "boss": {
            "name": "Zac",
            "title": "Sr. Manager"
        }
    }

}
            

JSON in JavaScript

            var jsonString = "{\"name\": \"Jon\"}";
            var jsonObj = JSON.parse(jsonString);

            console.log(jsonObj.name);
            

             var obj = {name: "Jon"};
            var jsonString = JSON.stringify(obj);

            console.log(jsonString); //"{\"name\": \"Jon\"}";
            

AJAX

• Asyncronous
• Javascript
• And
• Xml

JavaScript calls a url and the URL returns XML.

Most web services return JSON now a days.

$.ajax()

jQuery provides us a very easy and quick way to perform ajax calls.

        $.ajax({
            url:'',
            method:'GET|POST|PATCH|PUT|DELETE',
            success: function(response){},
            failure:function(response){}
        })
        

Method Types

• GET - Retrieve
• POST - Create
• PATCH - Modify
• PUT - Update
• DELETE - Delete

PATCH updates existing, PUT replaces altogether. Remember it as CRUD operations.

Difference between PATCH and PUT

$.ajax simplified

    $.get('blah.json', function(response){
    });

        

fiddle example

If you use jsfiddle and want to simulate ajax calls, use /echo

Http POST Method

One of the primary methods for sending data from a website to a web server to be processed.

You have primarily seen POST requests on HTML forms.

We can create a better experience by using AJAX

jQuery $.post() method

    $.post('[url]', 'object to send' , function(response){
        //
    });
        

    $.post('api/user', {userName: 'Jon'} , function(response){
        //
    });
        

See the Pen jYgYdY by Jon (@Middaugh) on CodePen.

Exercise 19

Debugging Exercise