Ajax Demystified

I don’t know about you, but the word Ajax used to scare me. As a frontend developer, it is nearly impossible avoiding the use of Ajax in your web projects, especially if your application is of dynamic nature. So i wanted to write a post that would be a go-to resource for everything Ajax you might encounter. Well… maybe everything is a bit ambitious! but i promise that by the time you are done with this tutorial, you will have victory over the subject. This post will start from totally beginner, all the way to advanced. If you feel i have left anything out, kindly comment or point it out, so i can also learn or perhaps update this post. Here i will share everything i know about using Ajax, as it has greatly helped me in my own personal and professional work. Like all my posts, this one will be a long one. I have provided links below so you can skip to any section on this topic. I will also be updating this post with time, so do come back if a section you are interested in is not ready or not found. Below is a link to the GIT repo where you can download the sample files for this post. Ready?

https://github.com/scriptonian/ajax-demystified.git

Content List:

  1. What is Ajax?
  2. Loading Text or HTML with jQuery
  3. Loading and reading JSON Data with jQuery
  4. Taking control with $.ajax()
  5. Ajax with third party API’s
  6. JSONP
  7. Ajax without jQuery ( Native Ajax )
  8. Working with Ajax Promises

Read More

Prototype and Prototypal Inheritance

Content List

  1. Introduction
  2. Function Constructors and Prototypes
  3. Prototype Properties
  4. Changing a functions prototype
  5. Multiple Inheritance
  6. Using Classes to create the prototype chain
  7. Extending built-in Objects

Introduction

In my previous post, i mentioned that ALL javascript objects have a prototype property. This prototype property is only a reference to another object (it does not live on the object). What happens is, if you ask javascript for a property on an object and it does not find it, the prototype object will be searched for that property. If it exists, that value will get returned. If you are familiar with the concept of inheritance, then this is how it works in javascript. Meaning an object in javascript inherits from its prototype (or prototype chain). This is why inheritance in javascript is called prototypal inheritance. Inheritance has a very simple meaning, it means one object gets access to the properties and methods of another object. In javascript that would be its prototype object.

Let us continue using our book object to demonstrate this.

var book = {};

Since you now know how to add properties and methods to objects, lets add some.

var book = {
  title : 'Book Name',
  author: 'Book Author',
  showBookInfo: function(){
    return this.title + ' by ' + this.author;
  }
};

Read More