jQuery is an extremely small, yet fast and reliable JavaScript library. With jQuery you can do so much more using less code. "Write Less, Do More, JavaScript Library". This includes Ajax! With jQuery you can make complex HTTP requests with an extremely small amount of code. The advantages of jQuery is just far too long to list, so i'm going to show you a simple (yet effective) Ajax example which uses jQuery, and includes some effects.
View Example (Note: The background fade is a jQuery plugin named colorBlend).
Now although this examples does not contain any type of form validation. It gives you a basic idea of what you can achieve from using a JavaScript library such as jQuery and the power and additional functionality it provides.
First you must include jQuery in the head of your page, once we've done that we can begin to work with it and use the advantages it provides. In this example i'll be using jQuery.ajax( options ).
Ok, now let's analyze this code. $(function(){...}); is basically short for window.onload(function(){...}); but is much more reliable. The next part is selecting the element with an ID of 'update' which in this case is the form and adding an event handler to it. So when the form is submitted it'll execute the function inside it. I make the call to submit.php' which will then query the database and return the result. In the request, i'm sending the values of any element with an ID of name and age which will be the 2 input fields on the form. If the request is successful I will then add the data returned to the beginning of the table. If an error occur's you will receive a prompt alerting you. Once the request has completed, I will then fade in the first row of the table, and then fade the background color of both columns in the first row.
Remember: You must return false; at the end of the submit() handler, otherwise the page will still refresh!
The code within this handler is the most important part, this is what makes the HTTP request.
$.ajax( type: // Defines the type of request, POST / GET methods. url: // Specifies the URL to make the request to. dataType: // Specifies which format the data being received is in. (HTML, XML, JSON, script etc..) data: // This tells jQuery what values to send when making the request. For example, i'm getting the value of the name and age input fields. success: // Which function is to be executed when a successful request is made. error: // Which function is to be executed if an error occurs. complete: // Which function is to be executed when the request is completed. );
Quite simple eh? There are more parameters you could additionally add. But it wasn't necessary for me to use them for a simple example. Ok, so let's look at the PHP which handles the request.
The first part is what secures the data ready for inserting into the database. $_POST['name'] and $_POST['age'] get's the POST data which has been sent by Ajax and stores them in variables for use later. The if statement is then used to determine whether the variables have been set or not and depending if it returns TRUE or FALSE it'll execute the code. If it returns TRUE the database connection is made and the database is selected. Once that's finished, it'll insert the data into the database. If the query is successful it'll proceed to retrieve the newly inserted data. But we only want to return one value. So we use MySQL statements to do so. Once we retrieve it from the database, it'll be put into the correct format and then printed. However, the display of the element is set to none, this is because jQuery will handle it. $('#results tr:first').fadeIn('slow'); will change the display and show it, but add some cool effects while doing so.
In conclusion, JavaScript libraries are more logical to use, and much more reliable. Most libraries are extremely dynamic enabling you to alter almost any and all functionality of it. I use jQuery, because it's designed to be small, fast and to enable a sophisticated level of functionality.
9 Tips to Smaller & Optimized CSS Files Because CSS files are loaded from inside the tags, every visitor download these files. We optimize images and PHP files, but CSS files are often overlooked. We should though and that’s what we will do today.
Very simple jQuery AJAX PHP chat jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript.
Html Form submit using Ajax Its not easy to submit HTML forms through Ajax. Forms input parameters are not send automatically during form submission. We manually collect all input parameters and send it separately as query string.
Slideshare Gallery Viewer, no API needed For developers, having an API available to access information from your favorite site is a good thing. It's not always necessary, though, as shown by Christian Heilmann in his latest post. Christian walks us through the process of creating a Slideshare ga
JavaScript Programming Patterns JavaScript is meant to be used to add behaviour to a website, might it be for form validation or for more complex operations like drag & drop functionality or performing asynchronous requests to the webserver (aka Ajax). During the past few years, JavaScr
Ajax and XML With the advent of widely available broadband, media, movies, images, and sound drive the Web 2.0 revolution. Learn to combine media with technologies such as PHP and Asynchronous JavaScript™ + XML (Ajax) to create a compelling experience for your custome
Ajax Projects
