Learn to use AJAX with JQuery - 6 Projects
- 1.5 hours on-demand video
- 1 article
- 8 downloadable resources
- Full lifetime access
- Access on mobile and TV
- Certificate of Completion
Get your team access to 4,000+ top Udemy courses anytime, anywhere.Try Udemy for Business
- Code Ajax in your websites
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!
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.
AJAX is the art of exchanging data with a server, and updating parts of a web page - without reloading the whole 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!
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:
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.
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.
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.
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.
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.
- You should know about HTML
- You should know the basics of PHP and MySQL
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
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.
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.
You will need basic knowledge of HTML, JQuery, PHP and MySQL.
- Web Developers
- Beginners in Web Development
- Project Leaders