Javascript and Ajax Tutorial

Please note, this tutorial will be a continuation of the PHP and MySQL tutorial series. You can find Part 1 here and Part 2 here.

Quick Summary

Shows how to get and display json data by using a web service in javascript/jQuery with an asynchronous code called AJAX. Also introduces the console and network tabs in the browser developer tools. Quick Summary of JavaScript and Ajax Videos from ObjectGraph LLC on Vimeo.

Introduction

Explains the basic concept of how using a single web service for mobile apps, desktop software, and web apps works. JavaScript and Ajax 1 - Introduction from ObjectGraph LLC on Vimeo.

Update Table and Web Services

Shows how to add additional columns for image and description in the database. Adds 2 new web services, one which pulls a full menu and another which pulls individual items. Also explains the importance of limiting the amount of data being retrieved by one web service. JavaScript and Ajax 2 - Update Table and Web Services from ObjectGraph LLC on Vimeo.

Web App Design Mockup

Sets up a static HTML page containing placeholders for the menu items, images, and descriptions. This page will be used to dynamically accesses the web service through a javascript function (AJAX). JavaScript and Ajax 3 - Web App Design Mockup from ObjectGraph LLC on Vimeo.

First Web Service Call

Explains how to include the jQuery CDN in your project and use the documentation. Also prepares your project to use the web service with getJSON jQuery code. JavaScript and Ajax 4 - First Web Service Call and Debug Console from ObjectGraph LLC on Vimeo.

Using Web Service Data

Shows how to display the retrieved data in a list format with a for loop. JavaScript and Ajax 5 - Using Web Service Data from ObjectGraph LLC on Vimeo.

Binding Click Event

Explains how to create and bind click events for displayed data with an a tag, a specified class, and a click function. JavaScript and Ajax 6 - Binding Click Event from ObjectGraph LLC on Vimeo.

Calling Second Web Service

Shows how to call an additional web service to display an image and description of the clicked item. JavaScript and Ajax 7 - Calling Second Web Service from ObjectGraph LLC on Vimeo.

Understanding Timing and Binding Event

Further explains the asynchronous call mechanism and complex data structures. Also introduces the sleep function to delay loading. JavaScript and Ajax 8 - Understanding Timing and Binding Event from ObjectGraph LLC on Vimeo.

Unit Test Using Postman

Shows how to build and perform unit tests using Chrome browser Postman plug-in to make testing web services faster and to guarantee functionality on the server side. Also explains GET and POST methods. JavaScript and Ajax 9 - Unit Test using Postman from ObjectGraph LLC on Vimeo.