AJAX and jQuery

Posted by mekowalski on August 28, 2017

When I first begin learning about Javascript there were many parts I did not fully understand. Javascript also made my head hurt and I didn’t know how to grasp concepts. A couple of these difficult necessities were AJAX and jQuery. Currently I’ve been learning Javascript through Flatiron School and sometimes I can read a lesson four times and still be confused. I’ve always remembered an instructor advising me to seek Google help on tough topics. I decided this was the opportune moment to practice my searching skills and learn the difference of AJAX and jQuery.

First off, I prefer simple explanations of what concepts are, this way I’m able to learn about broader and more abstract parts of a concept. I will do what I can to explain simply these concepts. Let me start by stating, I kind of didn’t know what Javascript was. Is it a gem, a library, some sort of coffee-making simulator? I didn’t realize that Javascript is another programming language. Javascript is used mainly for interactive webpages. It’s not quite static as rails and it is more so the modern internet we know currently. With Javascipt you can select attributes ie: getElementsById, getElementsByTagName and modify the attributes’ look, content or position. This further helps to make changes interactively on the page.

If you weren’t certain what AJAX is I’ll tell you now it’s an acronym. Asychronous Javascript and XML. In current programming, XML is now substituted with JSON (Javascript Object Notation) but AJAX kept the X in the acronym because AJAJ would just sound odd. In actuality JSON is much swifter, more lightweight with it’s structure, more predictable and easy to read.

I learned that AJAX is mainly a communication tool between the browser and the server within a page. In short AJAX helps load data behind the scenes, displays the data on the page all without refreshing the whole page. A couple of great examples I noticed come from my Gmail account. When I’m signed into Gmail I have the option to look in my Primary, Social or Promotions section. Select those tabs, no page refresh but all new data to browse. If I want to chat with a contact on Google Hangout I can select their name, a chatbox will popup over my indexed messages, I can begin typing, send that message and receive a reply all without a page refresh.

Moving onto jQuery which is a library that aims to simplify client side web development. It helps create abstraction to reuse common languages such as CSS and HTML in Javascript. In summary you would use jQuery alongside AJAX to simplify tasks and modify pages through styling, animation and event handling. This is a cleaner and more DRY way to build your webpages. jQuery is meant to write less, do more.

I want to state in my research of differences with AJAX and jQuery, often times jQuery is intermingled as a library or a framework. In accordance to the jQuery’s homepage, it is a library; a collection of functions useful to implement what you want in a simpler manner. Mostly frameworks have a certain way of implementing solutions with your code filling in the details.

In conclusion for this post I want to mention the difficulty I had with implementing Javascript, jQuery and Ajax onto my previous Rails app. I did not diligently learn Javascript and had to spend much more time grasping key roles. I want to tell anyone learning Javascript to not rush the process and to explore all parts fully without distraction. This language is prominent in our everyday, modern, web society. If I or any programmer want to make the experience better, we should fully appreciate and learn what we can about the languages surrounding us.

Here is my Rails app with Javascript implementation. I’m happy of the simplicity and turnout for this app.

HAPPY CODING, malind