AJAX

XML vs. HTML

-HTML code describes web page content (mainly text and graphic images) only in terms of how it is to be displayed and interacted with -XML data is known as self-describing or self-defining, meaning that the structure of the data is embedded with the data, thus when the data arrives there is no need to pre-build the structure to store the data; it is dynamically understood within the XML

XML (Extensible Markup Language)

-Looks very similar to HTML and is used to describe data. The standard is a flexible way to create information formats and electronically share structured data via the internet -Both XML and HTML contain markup symbols to describe page or file contents

A typical AJAX lifecycle

1. Some event on a page occurs (the user clicks a button/link, adds a character to a textbox etc.), which means that a JavaScript function is called 2. The JavaScript function issues an Ajax call, specifies what URL to call (i.e. what web service to use), and what JavaScript function should handle the result (a callback). It might specify other options as well, such as what happens if an error occurs, plus additional information 3. The request is sent 4. The function completes, and the user may resume using the page. At this time, no answer has been received, only the request has been sent. However, the user can still use the page he is viewing, although the page might display some indication that a request is underway 5. When a reply is received, the callback function executes, and it might update parts of the page (usually just a small part, although they might occasionally be quite large)

Main benefits of the AJAX technique

1. The overhead of the operation is minimal, the request only contains minimal information needed to issue the request instead of a full HTTP request, and the response only contains minimal amount of data, instead of a full HTML page 2. The user does not have to wait until the response is received (the user can continue using the page) 3. The server load will be smaller, since the server doesn't have to deal with a full request

JSON (JavaScript Object Notation

A data interchange format, similar to XML, but more lightweight -Its use is often well suited for web applications, since JavaScript supports parsing JSON strings natively

AJAX (Asynchronous JavaScript And XML)

A technique for a web page to communicate with the server without using regular HTTP requests. Instead of doing a full page refresh when a request is sent, a request is sent asynchronously instead, and when a reply is received, only a part of the page is updated This is a technique that has been around for many years, but only got its name in 2005. The actual technique has been in use before that, but didn't become "mainstream" until around this time Many front end frameworks such as REACT and VUE rely heavily on it to communicate with a server

JSON syntax

Almost identical to JavaScript object syntax but with some rules -All keys must be within double quotes("") -We use a colon(:) instead of the equals symbol(=) -String values must be within double quotes("") -Key-value pairs are separated by a comma (JSON supports nesting and arrays)

AJAX support

Doing it without the support of some libraries can be a lot of work, for instance because the support for AJAX is different between browsers Frameworks such as JQuery hide this, making it seamless to call a method on a server

Serialized data

It is the process of converting an object into a stream of bytes in order to store the object or transmit it to memory, a database, or a file. Its main purpose is to save the state of an object in order to be able to recreate it when needed. The reverse process is called deserialization form

$.post method

It takes in 3 parameters -The url to post to -The data to post -And a callback function just like the $.get method When posting we need to have a Action in our controller that handles post requests

Web APIs (Application Programming Interface)

It's basically a service which we can use in our code We can send requests to them and get data back Some web APIs require api keys but some are completely accessible.

JavaScript objects

Similar to a class in C# and C++ but it is not exactly the same thing A JavaScript object is a variable that can contain multiple key-value pairs (always separated by a comma) They are dynamic which means you can add properties(keys) as you go

Asynchronous vs. Synchronous

Synchronous code means that a command/line cannot execute until the previous command/line is done. Asynchronous code can execute different codes at the same time.

XML format

The basic building block is an element, defined by tags, just like in HTML. An element has an opening and a closing tag. All elements in an XML document are contained in an outermost element known as the root element. It can also support nested elements. This ability allows XML to support hierarchical structures. Element names describe the content of the element, and the structure describes the relationship between the elements.

JavaScript object syntax

There are a few acceptable syntaxes, e.g. 1. var car = { type: "Fiat", model: "500", color: "white" }; 2. var car = { type: "Fiat", model: "500", color: "white" }; The keys can also be set within double quotes("") 3. var car = { "type": "Fiat", "model": "500", "color": "white" };

error function

• If AJAX requests are unsuccessfull we can chain the fail function to the get method - It takes a single parameter which is an error object which holds information about the error that occurred

Returning JSON from a web server

• In every MVC project we have done so far we have been returning HTML pages from the web server - Home/Index - returns a HTML page - Home/Details/id - returns a HTML page - Etc. • This is not always the best way - Sometimes we just need to update a small part of the page, we don't need a completely new HTML page for that, we just need some data and then we can use JavaScript on the front end to render it

$.get method

• The get method takes 2 parameters, the first one is the url(endpoint) we are sending the request to and the second one is the callback function that gets called when the response comes back

Using AJAX with JQuery

• jQuery has a built in function called ajax