JSON Overview and Usage - IT 311 - Bulacan State University PDF

IT 311 Mobile Application Development 2 BULACAN STATE UNIVERSITY | COLLEGE OF INFORMATION AND COMMUNICATIONS TECHNOLOGY  At the end of this lesson, you should be able to: 01 Familiarize with JSON Learning 02 JSON Syntax objectives 03 HTTP Request and...

IT 311 Mobile Application Development 2 BULACAN STATE UNIVERSITY | COLLEGE OF INFORMATION AND COMMUNICATIONS TECHNOLOGY  At the end of this lesson, you should be able to: 01 Familiarize with JSON Learning 02 JSON Syntax objectives 03 HTTP Request and Response  What is JSON? JSON stands for JavaScript Object Notation. JSON is a lightweight data interchange format for storing and transporting data. JSON is often used when data is sent from a server to a web page. JSON is a text format that is completely language-independent but uses conventions that are familiar to programmers of the C family of languages, including C, C++, C#, Java, JavaScript, Python, and many others. JSON is easy for humans to read and write, and it is easy for machines to parse and generate. BULACAN STATE UNIVERSITY | COLLEGE OF INFORMATION AND COMMUNICATIONS TECHNOLOGY IT 311 | Mobile Application Development 2  What is JSON used for? JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax. It is commonly used for transmitting data in web applications (e.g., sending some data from the server to the client, so it can be displayed on a web page, or vice versa). BULACAN STATE UNIVERSITY | COLLEGE OF INFORMATION AND COMMUNICATIONS TECHNOLOGY IT 311 | Mobile Application Development 2  IS JSON A PROGRAMMING LANGUAGE? JSON is not a programming language. JSON is a data interchange format, primarily used for representing structured data. It provides a way to encode data in a format that is easy for both humans to read and write and for machines to parse and generate. JSON is a text-based data format, not a programming language. It serves as a standard way to represent structured data in a simple and human-readable form that can be easily consumed by different programming languages. BULACAN STATE UNIVERSITY | COLLEGE OF INFORMATION AND COMMUNICATIONS TECHNOLOGY IT 311 | Mobile Application Development 2  JSON SYNTAX RULES JSON represents data as key-value pairs, where the keys are strings and the values can be strings, numbers, boolean values, arrays, objects, or null. Data is in name/value pairs Data is separated by commas Curly braces hold objects Square brackets hold arrays BULACAN STATE UNIVERSITY | COLLEGE OF INFORMATION AND COMMUNICATIONS TECHNOLOGY IT 311 | Mobile Application Development 2  JSON DATA String : “Hello”, “Jeffrey Cervantes”, “I” Numbers : 10, 50.2, -52 Booleans : true or false Null: null Arrays: [1,2,3], [“Hello”, “Jeff”] Object: {“key”:”value”} {“name”:”Jeff”} BULACAN STATE UNIVERSITY | COLLEGE OF INFORMATION AND COMMUNICATIONS TECHNOLOGY IT 311 | Mobile Application Development 2  Sample of JSON { "key1" has a string value. "key1": "value1", "key2" has a numeric value. "key2": 42, "key3": true, "key3" has a boolean value. "key4": ["item1", "item2", "item3"], "key4" has an array value. "key5": { "key5" has an object value. "nestedKey": "nestedValue" }, "key6" has a null value. "key6": null } BULACAN STATE UNIVERSITY | COLLEGE OF INFORMATION AND COMMUNICATIONS TECHNOLOGY IT 311 | Mobile Application Development 2  Sample of JSON {“student":[ { “name":“Jeff", “school":“Bulsu“, “age” : 22 }, { “name":“Mark", “school":“LCUP“, “age” : 24 }, { “name":“Josh", “school":“UST“, “age” : 25 } ] } BULACAN STATE UNIVERSITY | COLLEGE OF INFORMATION AND COMMUNICATIONS TECHNOLOGY IT 311 | Mobile Application Development 2  { "first_name": "Rajeev", "last_name": "Sharma", Sample of JSON "email_address": "[email protected]", "is_alive": true, "age": 30, "height_cm": 185.2, "billing_address": { "address": "502, Main Market, Evershine City, Evershine, Vasai East", "city": "Vasai Raod, Palghar", "state": "Maharashtra", "postal_code": "401208" }, "shipping_address": { "address": "Ezeelive Technologies, A-4, Stattion Road, Oripada, Dahisar East", "city": "Mumbai", "state": "Maharashtra", "postal_code": "400058" }, "phone_numbers": [ { "type": "home", "number": "9975666694" }, { "type": "office", "number": "9822117730" } ], "date_of_birth": null } BULACAN STATE UNIVERSITY | COLLEGE OF INFORMATION AND COMMUNICATIONS TECHNOLOGY IT 311 | Mobile Application Development 2  JSON VS XML JSON is Like XML Because Both JSON and XML are "self-describing" (human readable) Both JSON and XML are hierarchical (values within values) Both JSON and XML can be parsed and used by lots of programming languages Both JSON and XML can be fetched with an XMLHttpRequest BULACAN STATE UNIVERSITY | COLLEGE OF INFORMATION AND COMMUNICATIONS TECHNOLOGY IT 311 | Mobile Application Development 2  JSON VS XML JSON is Unlike XML Because JSON doesn't use end tag JSON is shorter JSON is quicker to read and write JSON can use arrays The biggest difference is: XML has to be parsed with an XML parser. JSON can be parsed by a standard JavaScript function. BULACAN STATE UNIVERSITY | COLLEGE OF INFORMATION AND COMMUNICATIONS TECHNOLOGY IT 311 | Mobile Application Development 2  JSON EXAMPLE {"employees":[ { "firstName":"John", "lastName":"Doe" }, { "firstName":"Anna", "lastName":"Smith" }, { "firstName":"Peter", "lastName":"Jones" } ]} BULACAN STATE UNIVERSITY | COLLEGE OF INFORMATION AND COMMUNICATIONS TECHNOLOGY IT 311 | Mobile Application Development 2  XML example John Doe Anna Smith Peter Jones BULACAN STATE UNIVERSITY | COLLEGE OF INFORMATION AND COMMUNICATIONS TECHNOLOGY IT 311 | Mobile Application Development 2  ADVANTAGES of json 1. Human-Readable Format: Its syntax is clear and simple, making it easy to understand and work with. 2. Language Independence: It can be used with various programming languages, allowing for seamless data exchange between different systems and platforms. 3. Lightweight: It doesn't add much overhead to the data it represents. This makes it efficient for transmitting data over networks and storing configuration information. BULACAN STATE UNIVERSITY | COLLEGE OF INFORMATION AND COMMUNICATIONS TECHNOLOGY IT 311 | Mobile Application Development 2  ADVANTAGES of json 4. Easy to Parse: Most programming languages have libraries or built-in functions for parsing JSON, making it convenient for developers to work with. 5. Support for Complex Data Structures: JSON supports complex data structures, including nested objects and arrays. This flexibility allows it to represent a wide range of data types and structures. 6. Widespread Adoption: JSON is widely adopted and supported across various programming languages and platforms. This ubiquity makes it a standard choice for data interchange in web development, APIs, and other scenarios. BULACAN STATE UNIVERSITY | COLLEGE OF INFORMATION AND COMMUNICATIONS TECHNOLOGY IT 311 | Mobile Application Development 2  ADVANTAGES of json 7. Schema-less: JSON does not require a predefined schema or structure. This flexibility allows for easy modification and extension of data without the need for extensive changes to the data format. 8. Data Serialization: JSON is commonly used for data serialization, converting complex data structures in programming languages into a format that can be easily stored or transmitted. BULACAN STATE UNIVERSITY | COLLEGE OF INFORMATION AND COMMUNICATIONS TECHNOLOGY IT 311 | Mobile Application Development 2  ADVANTAGES of json 9. Compatibility with JavaScript: JSON is native to JavaScript, making it easy to work with in web development. JavaScript provides built-in functions (JSON.parse() and JSON.stringify()) for encoding and decoding JSON. 10. Browser Support: JSON is supported natively in web browsers, allowing for seamless integration with client-side scripting in web applications. BULACAN STATE UNIVERSITY | COLLEGE OF INFORMATION AND COMMUNICATIONS TECHNOLOGY IT 311 | Mobile Application Development 2  DISADVANTAGES of json 1. No Comments: JSON does not support comments within the data itself. While this is intentional to keep the format simple, it can be inconvenient for developers who might want to include explanatory comments within the data. 2. No Standard Date Representation: JSON does not define a standard format for representing dates. 3. Limited Data Types: JSON supports a limited set of data types, including strings, numbers, booleans, arrays, objects, and null. This simplicity can be a limitation when compared to other data interchange formats that support more complex data types. BULACAN STATE UNIVERSITY | COLLEGE OF INFORMATION AND COMMUNICATIONS TECHNOLOGY IT 311 | Mobile Application Development 2  DISADVANTAGES of json 4. No Support for Binary Data: JSON is a text-based format, and it does not provide a native way to represent binary data. This can be a limitation when dealing with binary data, requiring additional encoding or handling mechanisms. 5. Lack of Schema Validation: JSON is schema-less, meaning it does not enforce a predefined structure for data. 6. Verbose: Compared to more compact binary formats, JSON can be relatively verbose. This can lead to larger data payloads, especially in scenarios where bandwidth or storage space is a concern. BULACAN STATE UNIVERSITY | COLLEGE OF INFORMATION AND COMMUNICATIONS TECHNOLOGY IT 311 | Mobile Application Development 2  DISADVANTAGES of json 7. Limited Metadata Support: JSON does not provide built-in support for metadata, such as data types or additional information about the data. This can make it challenging to convey extra context along with the data. 8. Security Concerns with JavaScript Execution: If JSON data is received from an untrusted source and directly executed using JavaScript's eval() function, it can pose a security risk, potentially leading to code injection vulnerabilities. 9. Circular References: JSON does not handle circular references well. If an object contains a reference to itself or forms a circular reference chain, it can cause issues during serialization. BULACAN STATE UNIVERSITY | COLLEGE OF INFORMATION AND COMMUNICATIONS TECHNOLOGY IT 311 | Mobile Application Development 2  HTTP REQUEST METHODS What is HTTP? The Hypertext Transfer Protocol (HTTP) is designed to enable communications between clients and servers. HTTP works as a request-response protocol between a client and server. Example: A client (browser) sends an HTTP request to the server; then the server returns a response to the client. The response contains status information about the request and may also contain the requested content. BULACAN STATE UNIVERSITY | COLLEGE OF INFORMATION AND COMMUNICATIONS TECHNOLOGY IT 311 | Mobile Application Development 2  HTTP REQUEST METHODS 1. GET 2. POST 3. PUT 4. HEAD 5. DELETE 6. PATCH 7. OPTIONS BULACAN STATE UNIVERSITY | COLLEGE OF INFORMATION AND COMMUNICATIONS TECHNOLOGY IT 311 | Mobile Application Development 2  GET METHODS GET is used to request data from a specified resource. GET is one of the most common HTTP methods. Note that the query string (name/value pairs) is sent in the URL of a GET request: Some other notes on GET requests: GET requests can be cached GET requests remain in the browser history GET requests can be bookmarked GET requests should never be used when dealing with sensitive data GET requests have length restrictions GET requests are only used to request data (not modify) BULACAN STATE UNIVERSITY | COLLEGE OF INFORMATION AND COMMUNICATIONS TECHNOLOGY IT 311 | Mobile Application Development 2  POST METHODS POST is used to send data to a server to create/update a resource. The data sent to the server with POST is stored in the request body of the HTTP request: POST is one of the most common HTTP methods. Some other notes on POST requests: POST requests are never cached POST requests do not remain in the browser history POST requests cannot be bookmarked POST requests have no restrictions on data length BULACAN STATE UNIVERSITY | COLLEGE OF INFORMATION AND COMMUNICATIONS TECHNOLOGY IT 311 | Mobile Application Development 2  put METHODS PUT is used to send data to a server to create/update a resource. The difference between POST and PUT is that PUT requests are idempotent. That is, calling the same PUT request multiple times will always produce the same result. In contrast, calling a POST request repeatedly have side effects of creating the same resource multiple times. BULACAN STATE UNIVERSITY | COLLEGE OF INFORMATION AND COMMUNICATIONS TECHNOLOGY IT 311 | Mobile Application Development 2  HEAD METHODS HEAD is almost identical to GET, but without the response body. In other words, if GET /users returns a list of users, then HEAD /users will make the same request but will not return the list of users. HEAD requests are useful for checking what a GET request will return before actually making a GET request - like before downloading a large file or response body. BULACAN STATE UNIVERSITY | COLLEGE OF INFORMATION AND COMMUNICATIONS TECHNOLOGY IT 311 | Mobile Application Development 2  DELETE METHODS The DELETE Method The DELETE method deletes the specified resource. OPTION METHODS The OPTIONS method describes the communication options for the target resource. BULACAN STATE UNIVERSITY | COLLEGE OF INFORMATION AND COMMUNICATIONS TECHNOLOGY IT 311 | Mobile Application Development 2  HTTP Responses HTTP Response Status Codes When a browser requests a service from a web server, an error might occur, and the server might return an error code like "404 Not Found". It is common to name these errors HTTP error messages. But these messages are something called HTTP status messages. In fact, the server always returns a message for every request. The most common message is 200 OK. Below is a list of HTTP status messages that might be returned: BULACAN STATE UNIVERSITY | COLLEGE OF INFORMATION AND COMMUNICATIONS TECHNOLOGY IT 311 | Mobile Application Development 2  HTTP Responses BULACAN STATE UNIVERSITY | COLLEGE OF INFORMATION AND COMMUNICATIONS TECHNOLOGY IT 311 | Mobile Application Development 2  HTTP Responses BULACAN STATE UNIVERSITY | COLLEGE OF INFORMATION AND COMMUNICATIONS TECHNOLOGY IT 311 | Mobile Application Development 2  HTTP Responses BULACAN STATE UNIVERSITY | COLLEGE OF INFORMATION AND COMMUNICATIONS TECHNOLOGY IT 311 | Mobile Application Development 2  HTTP Responses BULACAN STATE UNIVERSITY | COLLEGE OF INFORMATION AND COMMUNICATIONS TECHNOLOGY IT 311 | Mobile Application Development 2  References W3Schools. (2020) Retrieved from : https://www.w3schools.com/xml/xml_http.asp Rajeev Sharma. (2021), Retrieved from : https://ezeelive.com/json-advantages-disadvantages/ BULACAN STATE UNIVERSITY | COLLEGE OF INFORMATION AND COMMUNICATIONS TECHNOLOGY IT 311 | Mobile Application Development 2