- Getting Started
- Understanding the Non-Ajax Version
- Incorporating jQuery
- Ajax-ifying an Add to Cart Feature
- Final Thoughts
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Understanding the Non-Ajax Version
The first thing you’ll need to do is make sure you have a proper non-Ajax version of the tasks at hand. There are two reasons for doing so:
- First, it gives you, the developer, the chance to create the entire, fully functioning system without the confusion of Ajax (Ajax can make debugging harder).
- Second, the correct way to use Ajax—and JavaScript in general—is so that it degrades gracefully. This means that should the user’s browser support the Ajax feature, Ajax will be used; should the user’s browser not support Ajax, the non-Ajax version will be used automatically.
In either case, the user shouldn’t know that the alternative approach even existed.
Rather than come up with a new example, I’ve decided to build off of the second e-commerce project from my book (see the earlier link). You can view the site in a demo mode (without the modifications discussed in this article). If you have an existing e-commerce site, you can probably use it as your basis for Ajax expansion per the instructions to follow.
The non-Ajax version of the shopping cart on that site uses one script—cart.php—for all things related to the shopping cart. To add a new product to the cart, the script needs to receive a SKU and an action value in the URL:
http://www.example.com/cart.php?sku=C249&action=add
Any page that allows for an item to be added to the shopping cart, such as one that displays a product or lists sale items, just creates a link like that.
Once you have all this working for your e-commerce site, you can “Ajax-ify” it.