Welcome to the last part of our JQuery for beginners tutorials.
This week I will show you probably the main benefit of learning JQuery. AJAX (Asynchronous Javascript and XML) enables text data to be passed between pages without the page reloading, meaning a smoother user experience.
Using JQuery this is all very simple, just with a function like load(). There are several other functions like the $.get(), $.post() and $.ajax() functions which all allow AJAX to be used, but for this tutorial we will focus on the load() function.
For this tutorial I will load the contents of another page into a space on the current on the click of a button.
Here is an example of what we will produce
How to develop it
The page the content is loaded from is named tutorial5.txt and as you can see from the link all that is on the page is the text 'This is text from the page tutorial5.txt'.
That text is be loaded into a div on the current page with an ID of response when a input button is clicked. The button will have an ID of button.
Now for the JQuery that loads the content from tutorial 5 into the response div.
Breaking down the code
Assuming you are now a JQuery expert, I will only explain the line of code that is new to you.
Here quite simply the contents from http://www.candeomedia.com/tutorals/tutorial5.txt is loaded into the div with an ID (#) of response using the load function.
Pretty simple hey!! Using the older, non JQuery version of AJAX, this would have taken about 20 lines of code!
Finished code
I hope you have enjoyed our 5 tutorials on JQuery and has whetted your appitite to learn more.
I hope to do a 5 part tutorial on PHP for beginners in the future so look out for that.
Web Design & Development, Graphic Design, Email Newsletter Marketing, Search Engine Optimisation, Web Application Development, Social Networking and more...
There are no comments for this post yet.