Microsoft just released “Microsoft Ajax Library Preview 6 and introduced the Microsoft Ajax Minifier” This is a Client side Library for Ajax which reduces the size of JavaScript files. Microsoft believes that the smaller the JavaScript file, the faster the website will run.
Some of the features include: “Better Imperative Syntax: A new, simplified, code syntax for creating client controls. Client Script Loader: A new client-side script loader that can dynamically load all of the JavaScript files required by a client control or library automatically, and executes the scripts in the right order. Better jQuery Integration: All Microsoft Ajax controls are now automatically exposed as jQuery plug-ins,”.
I have run across jQuery, Dojo and now Microsoft’s “Minifier” which all use JavaScript libraries to improve development time. Another benefit seems to be that the website will run faster. I found jQuery a little difficult initially but no more difficult than JavaScript and I accomplished the same thing with less code.
The dojo toolkit also looks quite interesting and has many features. “Dojo widgets are prepackaged components of JavaScript code, HTML markup and CSS style declarations that can be used to enrich websites with various interactive features that work across browsers”
I am wondering why we don’t just use more jQuery? I understand that it is probably a good idea to have some understanding of the underlying JavaScript. And, it’s probably the same argument for understanding the underlying formulas when doing math, rather than just jumping in and using a calculator. However, it appears that one of the main reasons for using JavaScript is to speed up a website or, at least, make the client interaction faster. So, I am thinking that it may be a good idea to use some jQuery, dojo or Microsoft's minifier.
Showing posts with label jQuery. Show all posts
Showing posts with label jQuery. Show all posts
Oct 16, 2009
Sep 29, 2009
jQuery for AJAX
I know it's not something we'll get around to using in this course, but I have found it very useful and interesting so I thought I'd share with the class this wonderful JavaScript library known as jQuery. jQuery was designed to make code much simpler and faster. This nifty little library was released back in 2006 and best of all, it's completely free. One of the biggest reasons I love it is not just for the code simplicity but even more so for the cross-browser compatibility. As we have already seen in this class already, when coding for the Web, browsers can cause all kinds of issues and problems. jQuery is also 100% W3C Standards Compliant, so all Web standards validation will pass successfully. jQuery is very simple in syntax, and has the ability to manipulate multiple aspects of Web Development. Using jQuery, DOM elements can be modified as well as CSS and AJAX.
Everything in jQuery is run by the dollar sign ($). The best way to explain some of the neat aspects of using jQuery is probably to demonstrate some actual usage of it. The first step to using jQuery is to download it from jquery.com. The production version is much smaller, yet provides all the functionality needed to implement jQuery into your own site. (The uncompressed version is designed for those interested in further developing jQuery itself.) Once you have a copy of the actual '.js' file downloaded onto your computer, the next step is to place it on the server with your index file and include it into the file you wish to use it on. This can be done using the standard XHTML JavaScript inclusion syntax (). Now that the file is included into your page, you may start using standard html or php or whatever you want to begin building your page.
The way jQuery works is that instead of you having to type long, drawn-out code, it allows you to use much shorter syntax to accomplish the same tasks. For example, in regular JavaScript, in order to get an element from the DOM, you would say something like:
document.getElementById(idname);
But with jQuery all you need to do is use the jQuery reference ($) followed by the command, like this:
$('#idname');
The other cool thing about this syntax, is that just like CSS, jQuery uses the '#' for id's and the '.' for classes. This allows you to get an element by the class name just as easily:
$('.classname');
So, this is just basic, but where jQuery really proves beneficial is when working with AJAX and CSS. I don't want to confuse anybody, so if you're learning AJAX for the first time in this class, and you get confused easily, then don't read the following. Basically how jQuery works with AJAX is that it formats everything for you with it's built in code so that instead of making an AJAX statement using the xmlhttprequest and making a function called createRequest() and worrying about the different browsers, all you have to do in jQuery is use an event called load(). This event allows for some very basic AJAX calls in extremely short amounts of code. By combining the jQuery version of getElementById(), the code to load some text into your page from a different location is just one line.
$("#content").load("new.html");
The "content" is the id of the div in your current page that will be filled with the loaded text/information from the history.html file. The url can be local or global, and can be php, html, or other Web languages. Just as simply, jQuery can request a page with a GET statement by simply typing:
$.get("test.php");
As you can see, jQuery is an extremely powerful library. Hopefully I did a decent job explaining what it is and how it works. Obviously, there is much more to it and it can be much more complex, but I think you get the basic idea. I encourage anyone reading this to be sure and learn AJAX from scratch the long way first, because I skipped all that and just started using jQuery calls for AJAX in my projects, and now I lack a lot of understanding in how AJAX ACTUALLY works. Fortunately, this class is all about AJAX, so I look forward to learning AJAX the correct way. Once I understand all the basics of it and am comfortable writing it properly, then I'll be able to go back to using jQuery to shorten up the code.
EDIT:
After reading over my post it still seemed a little confusing, so I threw together a little demo that everyone can view. Maybe this will help clear things up a little bit.
It's on my people account: people.emich.edu/mmager
It's a very basic example, where I'm just using a link to call my javascript function. In my function I use the .load() event and it loads the information from the other file (new.html) into the location specified (the content id div), so it replaces the original text. Hope this makes it a little more clear!
Everything in jQuery is run by the dollar sign ($). The best way to explain some of the neat aspects of using jQuery is probably to demonstrate some actual usage of it. The first step to using jQuery is to download it from jquery.com. The production version is much smaller, yet provides all the functionality needed to implement jQuery into your own site. (The uncompressed version is designed for those interested in further developing jQuery itself.) Once you have a copy of the actual '.js' file downloaded onto your computer, the next step is to place it on the server with your index file and include it into the file you wish to use it on. This can be done using the standard XHTML JavaScript inclusion syntax (). Now that the file is included into your page, you may start using standard html or php or whatever you want to begin building your page.
The way jQuery works is that instead of you having to type long, drawn-out code, it allows you to use much shorter syntax to accomplish the same tasks. For example, in regular JavaScript, in order to get an element from the DOM, you would say something like:
document.getElementById(idname);
But with jQuery all you need to do is use the jQuery reference ($) followed by the command, like this:
$('#idname');
The other cool thing about this syntax, is that just like CSS, jQuery uses the '#' for id's and the '.' for classes. This allows you to get an element by the class name just as easily:
$('.classname');
So, this is just basic, but where jQuery really proves beneficial is when working with AJAX and CSS. I don't want to confuse anybody, so if you're learning AJAX for the first time in this class, and you get confused easily, then don't read the following. Basically how jQuery works with AJAX is that it formats everything for you with it's built in code so that instead of making an AJAX statement using the xmlhttprequest and making a function called createRequest() and worrying about the different browsers, all you have to do in jQuery is use an event called load(). This event allows for some very basic AJAX calls in extremely short amounts of code. By combining the jQuery version of getElementById(), the code to load some text into your page from a different location is just one line.
$("#content").load("new.html");
The "content" is the id of the div in your current page that will be filled with the loaded text/information from the history.html file. The url can be local or global, and can be php, html, or other Web languages. Just as simply, jQuery can request a page with a GET statement by simply typing:
$.get("test.php");
As you can see, jQuery is an extremely powerful library. Hopefully I did a decent job explaining what it is and how it works. Obviously, there is much more to it and it can be much more complex, but I think you get the basic idea. I encourage anyone reading this to be sure and learn AJAX from scratch the long way first, because I skipped all that and just started using jQuery calls for AJAX in my projects, and now I lack a lot of understanding in how AJAX ACTUALLY works. Fortunately, this class is all about AJAX, so I look forward to learning AJAX the correct way. Once I understand all the basics of it and am comfortable writing it properly, then I'll be able to go back to using jQuery to shorten up the code.
EDIT:
After reading over my post it still seemed a little confusing, so I threw together a little demo that everyone can view. Maybe this will help clear things up a little bit.
It's on my people account: people.emich.edu/mmager
It's a very basic example, where I'm just using a link to call my javascript function. In my function I use the .load() event and it loads the information from the other file (new.html) into the location specified (the content id div), so it replaces the original text. Hope this makes it a little more clear!
Subscribe to:
Posts (Atom)