Learn How to Use Jquery AJAX from Scratch

2:48 AM in AJAX, Jquery, PHP, Tutorial, Web development

In this tutorial I will teach you how jQuery AJAX from scratch.
What is AJAX anyway?
AJAX - Asynchronous JavaScript and XML.

What is it's use?
We can send data without refreshing the page, it means that your site will faster and responsive that is because the page load is decreased.

We will use AJAX with the help of Jquery, because using only the native javascript is too long.

First you have to do is to download the jquery library from http://jquery.com/, then include it your page file. In my case I used the online library.

Here is the scenario, The client wants you to create a form where it doesn't change or refresh or reload the page then it will give a notification that the saving is a success. We will now create the form. We will not use the form tag.

firstname
email
comment

You can name this whatever you want, whether this is a php or html file. I prefer you must use firebug, it's a mozilla ff's extension. It is mostly used by web developers. Next we will add the jquery

Here's the explanation: We set our jquery script inside the document ready function, it means the code will execute the page is finished rendering. On the third line, it says when the id #save is clicked the following events will be triggered that consists of giving a variable to each value that will be used in passing the data to another page. Now, the Jquery AJAX, inside it we have what the type of action we will be using in passing the value. we used here is POST. Then we have data, we have to put the variable inside the variable, as you can see firstname is the variable used for the AJAX then the first_name that is value from the form. Then the third parameter is the url, it where we want to pass the data. Fourth parameter is the success which is the result from the given url. Let's say we have echoed it that page a success, then that will be returned from that page to this page. It will be clearer in the next panel. Then create a seperate php page, include the database connection. You put all the posted data in variable if you want to for a cleaner look of script. You will also put here your sql script to save the data.

Conclusion: Easy isn't it? That is how powerful and efficient to use the Jquery AJAX. On our next tutorial, we will using forms. Sounds interesting?Yeah, I know.. Now your mind is now open to more possibilities.