Web Front-End, DOM and AJAX [Dev Concepts #11]

Learn all about Front-end, DOM and AJAX in this lesson!

In this lesson,  you will learn which technologies help us build user interfaces for software apps, what is the DOM (Document Object Model) and how we implement DOM interactions in JavaScript using the DOM API. Finally, Svetlin Nakov will explain and demonstrate the AJAX technology, the XMLHttpRequest, and the Fetch API, which allow consuming RESTful APIs from the back-end.

Web front-end, HTML, CSS and JavaScript, together with the Document Object Model (DOM), AJAX and few others are the dominant technology for building user interfaces for modern software apps.

This set of web front-end technologies is known under the name “HTML5 platform” or “The Web Platform“.

(See https://platform.html5.org for more details about the HTML5 platform.)

It consists of lots of technologies, APIs and standards, implemented in the modern Web browsers.

It is very important for every modern software engineer to be familiar with these HTML5 technologies and the concepts behind them.

Web front-end technologies are the way developers build the user interface, displayed in Web pages, Web sites, Web apps and cross-platform apps.
The HTML and CSS languages describe documents, content, layout, formatting and everything we see on the screen in the Web browser.
JavaScript (which is called also ECMAScript) is the main language, used by developers to program user interfaces in a Web browser.
The DOM technology allows accessing the elements in a Web page through JavaScript.
The AJAX technology allows invoking back-end services from JavaScript front-end apps.
JS front-end frameworks (such as React, Angular and Vue) simplify the Web front-end development by providing structure, components, guidelines, and patterns to build maintainable front-end apps.

What exactly is AJAX?

AJAX stands for “Asynchronous JavaScript and XML“.
This acronym doesn’t describe its nature well, but this is for historical reasons, from the time when XML was popular.
A better description for the AJAX technology is the following:
AJAX is a technology for asynchronous execution of HTTP requests from client-side JavaScript code. JavaScript front-end apps use AJAX calls to access the back-end services and APIs and consume data from the Web server over the HTTP protocol.

Lesson Topics

In this video we review the following topics:

  • Web Front-End and DOM
  • Using the DOM API
  • Live Demo – DOM Interaction
  • AJAX and RESTful APIs

Lesson Slides

Leave a Comment

Recent Posts

About SoftUni

SoftUni provides high-quality education, profession and job to people who want to learn coding.

The SoftUni Global “Learn to Code” Community supports learners with free learning resources, mentorship and community help.