Ajax – Javascript
February 17, 2007
Hi,
I decided to create another blog post to make it easier to find the updated version of the important matching columns script – it was buried in the originals article’s comments.
Notes:
–
Updated script by: Jonathan del Mar
I have modified the script to work with multiple class groups also with elements with multiple class names
/*
Derived from a script by Alejandro Gervasio.
Modified to work in FireFox by Stefan Mischook for Killersites.com
Modified to work with multiple class groups also with elements with multiple class names
by Jonathan del Mar (dec-14-2006)
How it works: just apply the CSS class of ‘column’ to your pages’ main columns.
to work with different classes
add
var columns = new Array(’class_name1′, ‘class_name1′…);
by Jonathan del Mar
by default the script will call
matchColumns();
and the default class_name is ‘column’
(see the bottom of this script)
by Jonathan del Mar
*/
matchColumns=function(my_class){
var divs,contDivs,maxHeight,divHeight,d;
// get all elements in the document
divs=document.getElementsByTagName(’div’);
contDivs=[];
// initialize maximum height value
maxHeight=0;
if (!my_class) {
my_class = ‘column’;
}
my_regex = new RegExp(’(.* |^)’ + my_class + ‘( .*|$)’);
// iterate over all elements in the document
for(var i=0;i elements with class attribute ‘container’
//if(/\bcolumn\b/.test(divs[i].className)){
// modified by Jonathan del Mar to match ‘column’ in multiple classes
if(my_regex.test(divs[i].className)){
d=divs[i];
contDivs[contDivs.length]=d;
// determine height for element
if(d.offsetHeight){
divHeight=d.offsetHeight;
}
else if(d.style.pixelHeight){
divHeight=d.style.pixelHeight;
}
// calculate maximum height
maxHeight=Math.max(maxHeight,divHeight);
}
}
// assign maximum height value to all of container elements
for(var i=0;i
var columns = new Array(’class_name1′, ‘class_name2′, …);
to your html header.
read more
October 2, 2006
A very interesting book for experienced programmers.
I’ve reviewed several AJAX books and each has their own slant on the subject. Build Your Own AJAX Web Applications is the first that actually got me to think of AJAX based applications as a replacement for the traditional desktop applications.
… You’d figure I would have clued into this reality before, but for some reason, it only clicked while reading chapter 2!
WHO IS THIS BOOK FOR
Clearly you need to have a web programming background to understand this book. If you’re shaky with programming and object oriented programming is a great mystery to you, then you might find aspects of this book challenging.
On the flip side, if you want a refined and advanced approach to injecting AJAX into your web work, and you are comfortable with Javascript and a server-side language like PHP, then this is a very good book.
TOPICS COVERED
- An overview of the basic technologies you’ll need to use to build Ajax applications.
- Understand the XMLHttpRequest object, the core of Ajax applications.
- Build a cross-browser XMLHttpRequest wrapper that you can use in all of your Ajax projects – using OO Javascript.
- Build an Ajax application site monitor that works in real time.
- Learn how to use Ajax without breaking older browsers or causing accessibility issues.
- Fix the “Back button” problem.
- Use JSON, YAML, and XML to communicate with the server.
- Create an Ajax search application that pulls data from Amazon, del.icio.us, and Google.
.. yes, I got this list from amazon, but why reinvent the wheel!
MY CONCLUSION
I like the fact that the book does a good job of teaching AJAX while not getting bogged down in useless code and text – the book is concise, to the point and thin.
Get the book.
Stefan Mischook
read more
October 1, 2006
by: Richard Mischook – www.killersites.com, www.killerajax.com
Are these really questions from actual users?
OK you got us. Truth be told, the AJAX section of the site is relatively new, so we had to kick back and use our imaginations a bit. That said we feel we have a pretty good feel for the sorts of questions are users might be asking themselves and that’s what we have presented here.
If you would like to ask your own question please feel free to join in the forum.
So what is this Ajax thing I keep hearing about?
Ajax is actually an acronym which stands for Asynchronous Javascript and Xml. The term Ajax is used to indicate the main technologies used to build Ajax-enabled web sites. From a user’s point of view an Ajax user interface looks and feels less like a web page and more like an actual application.
The most obvious feature of this is usually that a user can do things that cause what they see in their web browser to change, without the whole page having to be reloaded (for example add an item to a shopping cart).
What kind of web site would benefit from being Ajax-enabled?
Ajax is about providing the user with an interface that is more application-like and less like a web page. So it stands to reason that web applications would be the best candidates for Ajaxification. More specifically any site that is dynamic in nature and requires a fair amount of user interaction is what we are talking about.
For instance if your site is an online diary where the user simply reads what you have written – well not much use for Ajax here. But if users can respond and post comments then this might make it a candidate for a little Ajax.
If on the other hand your site has lots of things that a user could be doing, some of which take awhile but can happen in the background, then you probably have an ideal candidate site for Ajaxification.
Does the user need any special tools to use an Ajax-enabled web site?
Not really. As long as the user has a relatively recent version of any of the top browsers they should be OK. The browser list includes Internet Explorer, Firefox, Safari and others. The heart of Ajax is a browser component called the XmlHttpObject; In Internet Explorer this component is implemented as an ActiveX component while other browsers have their own mostly-compatible implementation.
The XmlHttpObject is what you – the developer – use to send queries to the web server without forcing the user to reload the whole browser page. When the server responds to the request you use JavaScript to update part of the page, using the Document Object Model. It’s important to realize that each browser may have its own quirks when it comes to JavaScript and this is where Ajax development can be tricky.
Does the developer need any special tools to do Ajax development?
Like plain HTML development, you can use a simple text editor (like Notepad) or your favorite Integrated Development Environment (IDE). Ajax is mainly about using existing tools and technologies to achieve a specific user interaction experience; so it stands to reason that your existing tools should be fine. That said, lots of vendors and open source projects are jumping on the bandwagon and starting to provide Ajax-specific modules as add-ins.
Without getting into the whole range of tools available, one thing that is helpful for serious Ajax development is a usable JavaScript debugger.
A debugger allows you to step through code as it is being executed so you can figure out what is going on when things go wrong. For Firefox there is the Venkman debugger (http://www.mozilla.org/projects/venkman/) while there are a couple of options for Internet Explorer including the Microsoft Script Debugger and the Microsoft Script Editor (the latter ships with recent versions of Microsoft Office).
Where can I learn how to do Ajax development?
Well this web site is probably a good place to start. You might want to look at our video tutorial which covers Ajax development from the ground up. In the tutorial we look at the foundations of Ajax, and then go on to build a functional shopping cart using Ajax technologies.
You might also want to keep an eye on the Ajax Forum for discussion of Ajax-related issues.
I’m comfortable with server-side development (like PHP, Java, Ruby or ASP) but not really into JavaScript – can I do Ajax?
The good news is that a lot of server side frameworks are starting to provide Ajax toolkits that mean you can write less code and let the framework generate the JavaScript for you.
A good example of such a framework is the Ajax support in Ruby on Rails; the Rails framework provides some Ruby methods that will generate Ajax code for you, saving you the trouble of being a JavaScript expert.
The same goes for PHP and other server side languages. The best thing about this approach is that it means you can continue to work in whichever language you are most comfortable with.
The Rails Ajax tools are built on a number of existing open source JavaScript libraries; aside from providing you with some really cool special effects, these libraries also take care of a lot of the cross-browser issues that can arise in Ajax development.
Of course it still helps to understand how things work under the hood when it comes to debugging issues – and there are unfortunately always issues.
by: Richard Mischook – www.killersites.com, www.killerajax.com
read more
June 25, 2006
A collection of AJAX hacks (recipes) coupled with intelligent discussions. A good book to buy for anyone interested in AJAX and modern web application development.
The book begins with a great introduction to AJAX and then provides a useful grab-bag of commonly needed AJAX applications.
For example:
- Processing Web forms.
- Validations: credit card numbers, email addresses etc …
What are AJAX ‘hacks’?
AJAX ‘hacks’ are concise code samples that can be used as ‘components (if you will,) that you can plug into your own work.
Besides the usefulness of having a reusable collection like this, you can learn a lot from the ‘hacks’, since each one is coupled with a good discussion.
Some highlights:
- Ruby on Rails and AJAX discussions
- Examination of the open source AJAX libraries like Scriptaculous and Rico.
- The concise and clear coverage of AJAX basics.
As with all O’reilly books, the writing is clear and concise and well presented.
Note: this is not a beginners tutorial … you will need to be able to work with and understand JavaScript.
read more
May 16, 2006
Head Rush AJAX targets web designers who have a basic understanding of JavaScript.
A couple of points:
- A great book for beginners.
- This book is not well suited for experienced Web programmers because the pace is probably too slow.
Using clever layouts and graphics, along with an easy to understand writing style, Head Rush AJAX makes AJAX very approachable for web designers.
WHAT IS AJAX
AJAX is essentially the combination of technologies (JavaScript, DOM, CSS) built into all modern browsers that allows you to create web apps that act like (from the users perspective,) desktop applications – the so-called ‘rich user experience’. AJAX is used to send data to and from the server, and then display it in a web page, in a seamless way.
AJAX is typically coupled with a server-side technology like:
The server-side languages/environments are used to grab data (say from a database like MySQL) and then hand it off the to AJAX scripts. Wisely, Head Rush AJAX uses PHP as the server-side language to play this role*.
*PHP was the best choice because most web designers are going to jump into PHP over any other language because PHP is easy to learn and is ubiquitous.
HOW THE BOOK TACKLES AJAX
By starting with simple concepts and examples, the book gently takes the reader from humble beginnings to (by the end of the book) where the reader should be comfortable creating AJAX based websites.
Some highlights:
- Great examination of basic concepts.
- Good tutorial on DOM scripting – a key component of AJAX
- Nice comparison between AJAX with XML vs. AJAX with JSON – a lightweight JavaScript data format
Probably the best web designer centric book on AJAX.
Stefan Mischook (Web Design Heretic)
read more
May 6, 2006
A very good book for experienced web application developers who want to jump into this new way of creating a rich user experience with the web browser.
The writing is clear and straight forward. Each chapter begins with a concise (but informative) theoritical introduction, which is then followed with a practical example that is substantive enough to learn the programming behind the theory, yet not too long that you’ll get bored.
Clearly targetting the enterprise developer, this book covers how AJAX works with:
- XML, XPath and XSLT
- Web Services
- JSON: a Javascript data format that is a lighweight alternative to XML
You can read rest of the topics covered in the book’s TOC.
A HIGHLIGHT OF THE BOOK
I especially liked a section in chapter two (AJAX Basics) that covers the 3 methods used to create AJAX-like experience:
- The hidden frame technique – what we used to do, to fake it in the late 90’s
- The hidden iframe technique.
- Using the XMLHttpRequest object – true AJAX (IMHO)
It was interesting to see working side-by-side comparisons of the methods available to web developers … and it makes you realize how useful the XMLHttpRequest object is!
What’s even more interesting is how the authors have actually combined these three methods in certain applications to create a more flexible AJAX implementation.
CONCLUSION
If you are an experienced web developer who wants to learn AJAX, get this book.
read more
May 3, 2006
Introduction:
AJAX In Action targets experienced programmers who may not be familiar with client side Web application development. As such, the book provides a ‘crash-course’ into the basic building blocks of AJAX scripting:
- CSS for styling markup/HTML
- CSS for page layout
- How the DOM (document object model) is used to restructure the page dynamically.
A good book for experienced programmers but not a title for web designers wanting to jump into AJAX. For people with less programming experience (those who know a only little JavaScript,) you are better off with the excellent book for beginners: Head Rush AJAX published by O’reilly.
Then perhaps (with some programming experience behind you,) you can come back to AJAX in Action.
Stefan Mischook
–
WARNING: This review has a 5 star nerd-level … not for beginners.
In a word; a comprehensive book that covers as much ground as could be expected, given the pace of change in the Ajax sphere. Lots of detail here although perhaps a little too much at times – I had to fight to finish it and ended up skimming at times.
About Ajax
Chances are you’ve heard of Ajax – it’s getting a lot of press as the best thing since some other acronym (take your pick). Ajax essentially is a suite of web technologies that allow you to develop web sites that seem more like traditional desktop applications. The web metaphor of click-reload-from-server-click-again is replaced by a user interface that can selectively update itself as the user interacts with it.
There are a number of working Ajax applications in the wild, one prominent example being Google Maps (http://maps.google.com/). The promise of Ajax is of a new generation of distributed applications with better usability and hopefully lots of budgets for those who know how to make them happen.
Rethinking the Web
Part 1 of the book does an overview of Ajax with emphasis on how Ajax applications differ from traditional web sites. In addition the section covers some prominent examples, as well as looking at some alternative technologies such as Flash and Java.
The section then dives into some simple examples of using Ajax technologies like the HttpRequest object and DOM scripting. This provides a nice gentle introduction to the main ideas behind Ajax.
The final section of part 1 looks at some patterns that could/should be used in developing Ajax apps with emphasis on a Model-View-Controller (MVC) framework for client-side Ajax code.
Core Techniques
Having dipped our toe (if not our whole leg) in the water, the authors move on and cover the various patterns that one might expect to use in developing an Ajax application. Quite a lot is covered and there is a lot of code. The authors use some concrete examples that are mostly reasonable, although less experienced web developers may not see the relevance of some of the examples.
Professional Ajax
Part 3 is covers core issues involved in taking an application from the prototype stage to a production application. Issues such as responsiveness and scalability are treated, as are usability issues like providing user feedback (with some example re-usable frameworks provided as examples). In addition security and performance are covered with some good tips on third party tools that can be used to debug hard-to-find problems as you are developing your application.
Ajax by Example
The final part covers the lion’s share of the book and provides some examples of varying complexity. These include code for a double combo box, type ahead suggest (see Google Suggests), a web portal, and others. I did not actually spend a lot of time here as by this point I felt I understood enough of the technologies to use them as I needed. Which is not to say that the code examples are not worth looking at.
Round Up
The book also features some appendices that covers tools like IDEs, third party frameworks and libraries, and a section on JavaScript for object oriented developers. Note that the libraries section necessarily can only be a starting point as there are new contributions coming along fairly often.
All in all a lot of the information in the book can be found on the web, but the book does make it easy to kick back in bed and absorb.
The writing style is very clear although not as entertaining as some technical books I have read lately. I think you’ll find that once you understand the core technologies, stuff starts to get repetitive.
Still the book does a nice job of covering the ground extensively and I recommend it to anyone who wants to learn about writing Ajax applications.
Richard Mischook
read more
