What is Ajax? & How It works?

What is ajax - Logo

AJAX is short for Asynchronous JavaScript and XML. It is not a tool or a programming language rather it is a technique or concept which is used to create fast and efficient web pages. It is a client site script that communicates with server without the need of reloading the whole page or post back. Simple meaning, Ajax is an approach of swapping data with a web server, and updating or changing portions of a webpage – without refreshing the whole webpage. In more technical terms, it means the use of JavaScript objects XmlHttpRequest to dynamically interact with a server. Traditional web pages, which don’t make use of Ajax, have to reload the whole page if the content of any part of the web page need to be changed. Nowadays Ajax is used in almost every popular web application like Facebook, Twitter, YouTube, Google Map, Gmail and so on.

 

 

How Ajax Works?

Ajax callbacks can be made by instantiating an XMLHttpRequest object in the client-side browser via JavaScript. The http request is then sent to the web server to be processed. The web server creates a response and sends data back to the client side (browser). The browser processes the returned data via JavaScript and updates the part of a web page. The following figure (source W3school) will demonstrate how Ajax works.

Ajax isn’t just a single technology; rather it is a set of technologies. Ajax is a combination of:

XMLHttpRequest object (used to swap data asynchronously with the web server)

JavaScript/DOM (used to display the information or interact with the information)

CSS (used to add style to the information)

XML (frequently used as a format to transfer data)

Advantages of Ajax:

There are three main advantages of using Ajax in website:

 Greater interactivity: This is the main reason why a lot of developers and programmers are using AJAX in their websites. AJAX permits simpler and faster interaction between the visitor and website since webpages are not reloaded for content to be shown.

Simpler Navigation: AJAX applications on a website can be created to permit simpler navigation to visitors compared to making use of the classic back and forward button on a web browser.

Greater Speed: The primary goal of Ajax is to increase the speed, efficiency and user friendliness of a web application. A good instance of Ajax is the movie rating system on the website. The visitors rate movies and their personal ratings will be saved to the database without waiting for the webpage to reload.

Why and Where Ajax is used

Ajax should be used anyplace in a website where a few amounts of information need to be stored in a web server or retrieved from the web server without submitting back the whole page. A great example of applying Ajax is validating data on a save action.

Other great example would be to include suggestions and auto complete text boxes dynamically during the time of filling up a form. For example the user types a couple of letters to find a name and a list of all names which begin with those characters appears below. A callback is created to the web service which will obtain all names that start with these letters. This is really a wonderful function that would not be possible without Ajax. For learning more tips or getting help from a company that are expert in the topic please visit us at Boostwebseo.com.

Understanding Twitter Bootstrap Framework

Boostrap

Twitter Bootstrap is the most popular and powerful front end design (HTML, CSS, and JavaScript) framework for designing responsive, mobile friendly website. It is an open source and completely free to use framework. It is not a single tool rather a collection of tools for making websites and web applications.  It is a mixture of HTML, CSS, and JavaScript code created to help make user interface components for Typography, Buttons, Forms, Navigation menu, Alerts, Dropdowns, Modals, Carousel, Tabs, Accordion and other interface components. Since March 2015, it was the most rated project on GitHub, with more than 78,000 stars and over 30,000 forks.

Twitter Bootstrap (formerly named as Twitter Blueprint) was created by Mark Otto and Jacob Thornton at Twitter.

Why Use Bootstrap?

Save a lot of time: A lot of time and efforts can be saved with Bootstrap’s predefined design templates and classes. It helps you to focus on other development works.

Mobile first approach: Using Twitter Bootstrap’s responsive features you can easily create responsive website that works equally well in all the devices (starting from small Smartphone to large desktop)

Very Easy to use: Bootstrap is incredibly easy to use. Anyone with the basic understanding of HTML and CSS can start web development with Twitter Bootstrap.

Browser Support: Bootstrap is compatible with all the modern browsers including Google Chrome, Firefox, Internet Explorer, Opera Mini and Safari.

Open Source: Bootstrap is totally free as well as open source and available on GitHub. Interested Developers can participate in the project and make their own contributions to the framework.

Usage of Bootstrap:

It is really easy to setup and get started with Bootstrap. In this article, I will describe the download and setup process of Twitter Bootstrap. I will also explain the file structure of bootstrap, and illustrate its usage with an example.

Download Bootstrap: The first thing you have to do is downloading the newest version of Bootstrap from http://getbootstrap.com/. After going to this link you will see two buttons:

Download Bootstrap: Clicking on this button, you can get the precompiled and minimized versions of Bootstrap CSS, JavaScript, and fonts.

Download Source: By Clicking on this button, you can obtain the newest Bootstrap LESS and JavaScript source code from GitHub.

To understand well and simplicity of use, I will use the precompiled edition of Bootstrap throughout this article. As all the files are complied and minified you do not need to include separate files for individual functionality every-time. During writing this article the newest version (Bootstrap 3. 3. 4) was downloaded. After downloading the precompiled version of Bootstrap, extract the ZIP file, and notice the file structure. You will see a file structure like below:

file structure

Here you can see compiled CSS and JS files (bootstrap.css and bootstrap.js), as well as compiled and minified CSS and JS files (bootstrap.min.css and bootstrap.min.js) in css and js folder. You can also see Fonts from Glyphicons in the “fonts” folder. There are also some optional files for Bootstrap theme.

Including bootstrap in HTML: Here I have given an example that will help you to understand how to include bootstrap in your project.

<!DOCTYPE html>

<html>

<head>

<title>Usage of Bootstrap</title>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

<link href=”css/bootstrap.min.css” rel=”stylesheet” type=”text/css”>

</head>

<body>

<h1> Bootstrap Learning </h1>

<script src=”https://code.jquery.com/jquery.js”></script>

<script src=”js/bootstrap.min.js”></script>

</body>

</html>

Note that, here we have included an extra file named jquery.js which is essential if you want to use the Bootstrap’s JavaScript functionalities

You must put the viewport meta tag in the <head> element, to make sure the responsiveness of your web site in all kind of mobile devices.