Learning JQuery and AJAX Part 1

I’ve received many requests for both an AJAX and a JQuery tutorial. So, I’ll cover them both in the same series of articles, because they work well together. I wrote an earlier article on How to AJAX, but I’ll briefly go through what AJAX and JQuery is in this article.

What is AJAX?

There is much confusion concerning Asynchronous JavaScript and XML (AJAX). First off AJAX is not a programming language. It provides a new way for you to use the languages I’ve taught you in previous tutorials:

AJAX provides you with the ability to:

  • Communicate with your server
  • Pass information back and forth, from the clients browser to the server
  • Update your web page content, without reloading the webpage

For the most part you should have no problem using AJAX techniques, if you understand JavaScript Scripting.

Basics on How to Use AJAX

This is the main way people use AJAX:

  • They write JavaScript code that is triggered to perform some action when a certain event occurs on the website.
  • When that event is triggered, JavaScript is used to get data from the server, using an object called XMLHttpRequest. (More on this very soon)
  • The new information is inserted into your web page, without a page reload. This is called Asynchronous Data Retrieval.
  • The only negative is that you can only pass XML or Regular Text, between the JavaScript Code and the server.
  • In addition you can use JavaScript code to call PHP code to receive information from a Database.
  • On the fly CSS changes through JavaScript code, is also referred to as an AJAX technique.

Now you know the basics. If you want more info on AJAX see my previous tutorial on AJAX, or just learn it as you learn JQuery. It is completely up to you. I’ll teach both throw a series of code example’s.

What is JQuery?

JQuery is a JavaScript Framework or JavaScript library. It provide’s you with ready made function’s that you can use to perform common task’s in JavaScript. If you don’t come from a programming background, what this mean’s is that you can reference the JQuery code and then use all the function’s it provide’s as if you wrote them yourself.

The Reason’s People Like JQuery

  • It allows you to easily perform complicated JavaScript task’s
  • It is cross browser. This mean’s that the JQuery function’s will automatically handle difference’s between the many browser’s out there.
  • It allows you to easily modify individual node’s on a web page. If you don’t know what I’m talking about with node’s see my JavaScript Scripting Tutorial.
  • Provide’s easy way’s for you to style your web page’s.
  • Allow’s you to easily modify web page content, without reloading the page. This is where AJAX comes in.
  • JQuery plus AJAX technique’s also provide you with the ability to easily communicate with the server, without page reloads.
  • JQuery comes packed with great animation effects you can use on your web page. These effect’s work the same on all browsers importantly.
  • JQuery is extensible, being that you can add more prebuilt function’s with plugins.
  • JQuery is small and doesn’t noticeably increase page load time.

Where do I Get the JQuery Library?

The JQuery library is completely free and available at jquery.com.

How do I Access the Library in my Web Pages?

All you do is download the library from the website I mentioned before, and store it in a public location on your web server. You then can link to the library with the following line of code, which will be in your HTML page:

<script src=”jquery.js” type=”text/javascript”></script>

The src attribute most contain the location of the jquery.js file.

This script tag needs to be located before any of your other JavaScript code. Also it is best placed after you define your Cascading Style Sheet preference’s, because JQuery more than likely will reference the CSS code.

That’s All Folk’s

Prepare yourself for an onslaught of JQuery and AJAX code. If there is any specific code sample’s you would like to see, leave them in the comment section below. If you have any question’s also leave those below.

Here to Serve

Think Tank

Leave a Reply

Your email address will not be published.