Learn to use AJAX with JQuery - 6 Projects
3.7 (3 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
22 students enrolled

Learn to use AJAX with JQuery - 6 Projects

How to exchange data in the background with Ajax & 6 projects - Reviews, Like Buttons, Email, Infinite Scrolls, more..
3.7 (3 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
22 students enrolled
Last updated 6/2018
English
English [Auto]
Current price: $41.99 Original price: $59.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 1.5 hours on-demand video
  • 1 article
  • 8 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Code Ajax in your websites
Course content
Expand all 14 lectures 01:26:08
+ Introduction
4 lectures 18:10

Welcome to the course Learn AJAX with JQuery. 

 

This course has three sections: 

section 1 is an introduction, 

section 2 is about getting started with Ajax using 3 small examples, to help you understand the basic concepts and syntaxes,

Small example 1: is simply about replacing an html text on a page using Ajax

Small example 2: use Ajax & php to convert celcius to farenheit in real time

Small example 3: translate french to english in real time using Ajax with php and mysql

and the last section,

section 3 will include 6 projects

Here is a list of projects that you will build:

Project 1: Loadable Table

Project 2: Email Registration will a few features, such as checking the database if email is already taken, all done in Ajax

Project 3: Text Areas that can be filled and saved, while still on the page

Project 4: Infinite Scroll, loading images on a page as user scrolls down

Project 5: Create Star Reviews

Project 6: Like and Unlike Buttons

What scripting and technology? Apart from basic HTML tags, the scripting languages that we will use in this course is JQuery and PHP. You will learn that Ajax is not a script or language but it is a coding technique. We will use the Ajax methods that are already part of JQuery, which is the simplest way to use Ajax.

We will also use MySQL in most of the projects to create simple tables.

So ideally you will be expected to know the basics of these scripting languages but don't worry if you haven't used these languages, you will still be able to go through the projects and learn something in the process.

What will you need? We recommend installing sublime text editor and XAMPP. These are free software that you can download online. 


Best of luck and hope you enjoy the course!


Preview 04:13

It is important that you have a basic understanding of how the web works, at least at a high level. A simple model of the web consists of the Client and the Server. At the Client side, the user uses a browser to view page contents. The browser interprets HTML Markup Language, Javascript for scripting and CSS for styling. JQuery is a library that was built on top of Javascript to facilitate scripting at the browser side. 

At the Server side, scripts such as PHP are used. The Server will process the PHP to get the webpage it needs to send to the browser. So the browser doesn't deal with PHP but the result of processing PHP scripts, if PHP is used, as in the case of Dynamic web pages.

This lecture is a quick explanation on how to work with HTML, PHP, MySQL DB and JQuery. This was included for students who only have beginner experience and knowledge in web design.

HTML, Javascript and JQuery can run on your local browser, while for PHP you will need XAMPP, which is a web server that can be installed on your machine to test PHP scripts. This will also be use for MySQL database. 

Preview 05:02

AJAX is the art of exchanging data with a server, and updating parts of a web page - without reloading the whole page.

AJAX short for "Asynchronous JavaScript And XML" is a set of Web development techniques using many Web technologies on the client to create asynchronous Web applications. 

With Ajax, Web applications can send and retrieve data from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. 

By decoupling the data interchange layer from the presentation layer, Ajax allows Web pages, and by extension Web applications, to change content dynamically without the need to reload the entire page

jQuery provides several methods for AJAX functionality.

We will use the following Ajax methods from JQuery.

Without jQuery, AJAX coding can be a bit tricky!

$.ajax( )

$.get( )

$.post( )

We will add these inside JQuery functions such as clicks, keyup e.g ajax call will be initiated when buttons are clicked on or text field typed into.

Here are the general syntaxes:

 $.ajax({url: "abcd.php",

  type:’get’,

  data:{x:y},   

success: function(result)

{         $("#div1").html(result);    

}});

$.get("abcd.php", 

function(data, status){ 

        alert(data);    

});


Reference: https://en.wikipedia.org/wiki/Ajax_(programming)

Preview 03:30

This is your first Ajax script. It will consists of an index.html and a .txt file. From the index.html, a clicked button will load information from the .txt file into the index.html. The .txt will also contain tags and these tags will take effect on the index page. You will also see the difference when using the 'append' method.

Hello World Ajax - this is your first Ajax script
05:25

quick questions

Introduction
4 questions
+ Getting Started with Ajax with small examples
2 lectures 11:50

In this lecture you will learn how to use PHP to process in real time some data from a html file and return the result back on the html. The example that we will use is the conversion of Celsius to Fahrenheit in the php script, triggered by keyup events. 

Using Ajax & PHP - example on real time C to F conversion
05:57

In this lecture you will learn how to use ajax to retrieve information from a database  and display on a page without the need to submit the page.

Use Ajax to fetch information from MySQL DB - Real time language translation
05:53
Small examples
3 questions
+ Projects
8 lectures 56:08

In this project, we will show how to load part of a table and on clicking on a button beneath the table, the rest of the data will be shown. So in this way, you don't need to show all information in a table specially if a table has too many rows, or if you do not want to add too much information for the user at one go. If information is not needed at one go, there is not need to load the page.

Project 1 - Loadable Table - Part 1
08:21

This lecture concludes the coding of the loadable table

Project 1 - Loadable Table - Part 2
09:04

Email registration with ajax is interesting feature you can add to a website. You may check the user email in the database in real time. No need to submit form to know that the email is wrong. You will also stay on the page and register. In this project, the registration button is shown only when the email entered has correct format and is not already registered. 

Project 2 - Email Registration - Part 1
07:02

This lecture concludes the project on Registration

Project 2 - Email Registration - Part 2
07:21

The text area project two simple text areas in a form that only needs clicking on the Save button next to each of them to save an updated content. There is no need to submit the form, but the user can stay on the same page, while the information is update in the DB.

Project 3 - Text Area Save
07:41

The infinite scroll is an interesting feature in many websites, where the user can scroll further at the bottom of the page to see more contents loading.

In this project we will use a series of images from a folder to be displayed on a page. As the user scrolls down, the content will be updated with more images through ajax call.

Project 4 - Infinite Scroll
06:59

This lecture shows how to submit reviews by choosing number of stars and update the DB while staying on the same page.

Project 5 - Reviews
09:06

VIDEO WILL BE UPLOADED SOON

This is a project where the Like and Unlike feature is implemented.  Users are simulated by a drop down id. It also shows an update of the number of likes obtained in sync with the value in the DB.

Project 6 - Like & Unlike Buttons
00:34

Quiz on Projects

Projects
1 question
Requirements
  • You should know about HTML
  • You would ideally need to know Javascript to understand JQuery
  • You should know the basics of PHP and MySQL
Description

Ever wondered how does Facebook like buttons work? With just a simple click on the thumb up button and done, no need to send any form, or reload the page? How does the Database update?

Ajax is a programming technique that allows the DB to read from and write to, without reloading the page. Dream come true, right? Yes, this is almost magical!

This course was designed for Developers or aspiring developers to add Ajax in their Websites in a variety of situations

Introduction

The course starts with a quick introduction to the Web and Web Design, including how to get and setup the tools needs for this tutorial. 

After the concepts Ajax are explained, this course will teach you how to build 6 cool projects. 

The projects were selected because they are related to the aspects of Web interface that we most commonly use.

Projects

Project 1 - Load more rows on a table upon clicking on a button. Information is fetched from DB in the background

Project 2 - Email Registration - Check Email in the DB as the email is typed even before the Sign up form is submitted

Project 3 - Edit Text Areas and Save, without the need to submit a form

Project 4 - Infinite Scroll - Scroll down to load more image contents

Project 5 - Create Reviews - Give Review stars to something on a page while the DB is updated

Project 6 - Like & Unlike Buttons

What will you need?

We advise you to install Sublime Text Editor, which you can download and install for free.

Most examples will require php and some will require MySQL, so we advise using XAMPP. This is also free.

Prerequisite knowledge

You will need basic knowledge of HTML, JQuery, PHP and MySQL. 


 

Who this course is for:
  • Web Developers
  • Beginners in Web Development
  • Project Leaders