A simple feedback of AJAX for beginners

Website script holds large importance as far as popularity and usage convenience are concerned. As an innovative web language AJAX may not be very popular as it has come quite recently as compared with other web languages which have been around for last 10 years or more. For beginners a quick feedback of AJAX can be helpful.

AJAX is really faster in its application as it does not need connection to server every time you ask for the information. Call back process for required information from users is capable enough to avoid sluggishness of page view. Data updation has been made quite simple and there is no need to review the entire contents. The system can select the bits to update. AJAX uses those scripts which are normally supported by all major browsers.

If you are planning to develop a new website, you can try AJAX. Online tutorials are available to get basic start up guidelines also.

Life Cycle of AJAX

A Typical Life Cycle or Process of AJAX

Life cycle of AJAX is more similar to a traditional GUI than a traditional web application. It has DOM objects who acts like GUI widgets. The used script has capacity to register even listeners on DOM objects and respond accordingly after manipulating DOM.

There is an important part of the event-processing cycle in server is evoked sometimes. As the server calls are asynchronous, the even listening and event responding are done separately.

The normal AJAX life cycle consists of following stages:

1. The webpage is visited by internet users simply by clicking the targetted link or searching an URL. Thereafter the page gets initialised and loaded. In order to handle the user input callbacks are present in the system which acts after this.
2. When a key is pressed it’s called an event which is a query or click in common words. On such events browser sends the information request to the server which in turn responds to give back required information as bites.
3. The response of the server is translated through callback process to made viewable to the user.
4. The callback function then updates the DOM objects and javascript variables if present.
5. Generally the process of requesting information and giving callbacks are free to server to increase convenience and speed.
6. Some AJAX applications are short term and terminated once the request is completed.

AJAX: Introduction and Advantage

Basics of AJAX:

AJAX is defined or termed as Asynchronous Javascript and XML. It’s a new avtar of modern day website creation. AJAX is one of the programming techniques which has primarily made popular after 2005 by Google. No doubt about it that AJAX has set innovative and new standads of programming. AJAX has enabled webmasters create better, faster and more user-friendly web applications with its base of Javascript and HTTP.

AJAX is based on 4 web standards which are well defined and supported by all major browsers.

1. JavaScript
2. XML
3. HTML
4. CSS

Basic Advantage of AJAX

Faster Updation: If you want to update the data base of your web AJAX provides an unique feature to reduce consumption of time. Unlike other web languages where you need to update the entire data base every time you need to update the contents, however with AJAX you need to spend time only on updation of the contents which actually requires to be done so. AJAX selects the contents from the web which needs updation giving eage to the process.

Faster Response: AJAX enables faster responses to the inputs even if the changes are not done on server. The unique advantage of AJAX is its ability to reload the individual pages separately giving a user friendly benefit and users may perceive the site functioning faster.

Faster Connection: With AJAX it’s not required to connect the webpage with server every time. Some times it saves the interaction between them to increase functionality and speed. It allows webpage to request for smaller bits of information rather than asking for the entire page to load again and again which increases speed as well. AJAX is a technology related to browser which is independent of web server.

ASP.NET: GridView Control

One of the reasons why I’m impressed with asp.net’s rich set of controls is its GridView control. This control displays your data in a table structure complete with delete, update and select features. It even has paging in case you have lots of records in your database. The best thing about this paging is that everything is done for you, the links, the paging number, the paging labels and others. If you click a page link, it will retrieve the next set of record(s) for you without changing any SQL query. For example, you can use this SQL query to retrieve all records of the table.

select * from [table_name];

In MySQL, you would need to supply the LIMIT keyword in order to get a specific set of rows. With GridView’s paging feature enabled, everything is done for you. Neat huh. Took me like a day in getting this one to work though because I had problems with the update and delete function. Since I am using MySQL, turns out when you do parameters in your query commands, the @ sign does not work because it is only for MS SQL. You would have to change the @ to ?.

Take this sample asp.net code for a GridView control as an example. This assumes you have a working database connection to MySQL. If you do not know how to connect to a MySQL in asp.net, go here to use the custom MySQLProvider classes by Rakotomalala Andriniaina.

<asp:SqlDataSource ID=”srcUsers” runat=”server”
ProviderName=”MySql.Data.MySqlClient”
ConnectionString=”"
SelectCommand=”select pkid, username, email, creationdate from users”
DeleteCommand=”delete from users where pkid = ?pkid”
UpdateCommand=”update users set email = ?email where pkid = ?pkid”
>

<PagerSettings Mode=”NextPrevious” PreviousPageText=”" />

If you read e-books regarding asp.net, the queries used are for MS SQL. It’s been a long time since I dabbled with MS SQL, so when I read about it, I thought the @ sign for parameters were required for any database used. Took me some time to know that ? has to be used. See the DeleteCommand and UpdateCommand properties of the SqlDataSource tag.

How you design your GridView control is up to you. With styles, you can override how the table would look like. The other GridView like control that I had used before that looks like asp.net’s version is the datagrid taglib for Java. The downside with using the taglib is that if your SQL query returns lots of rows, it may not load fast and may use up resources in doing so because it gets all records at one time. Asp.net’s GridView control totally impressed me in more ways.

Beginning JavaScript with DOM Scripting and Ajax

Beginning JavaScript with DOM Scripting and Ajax will take you from knowing absolutely nothing about JavaScript to being able to manipulate the DOM, build basic Ajax applications and more.

Most of us who have been building websites since the pre-Ajax days learned JavaScript through a mish-mash of one-off scripts, validations, etc. If a book like this had been around, it surely would’ve offered a nice clean overview of the techniques available to the JavaScript programmer.

Luckily for the novice JavaScript programmer (or intermediate developer wishing to hone his craft), Beginning Javascript with DOM Scripting and Ajax does exist now and is the perfect way to learn the fundamentals from the ground up. The 2nd part of the book also focuses on Ajax and some of the interesting hacks one can use in that realm.

The author, Christian Heilmann, has a geeky sense of humor that keeps the reading light — for eaxmple Et Tu, Cache? (pg. 309):

Safari is the main offender as it caches the response status and does not trigger the changes (remember that the status returns the HTTP code 200, 304 or 404) any longer.

Adding this snippet tells the browser to test whether the data has changed since a certain date, i.e.:

request.setRequestHeader( ‘If-Modified-Since’, ‘Thu, 06 Apr 2006 00:00:00 GMT’);
request.send( null );

A bit out of context here, but just one example of the kind of thing you’ll find in Beginning JavaScript with DOM Scripting and Ajax.

Huge list of Ajax tutorials

Just found this list of 126 Ajax Tutorials over the weekend — here’s a sampling:

• Ajax Workshop 3: Shopping Cart using Script.aculo.us at AjaxLessons
• Building an AJAX-Based Chat: The Barebones Structure at DevArticles
• Dynamically loaded articles at DHTMLGoodies
• Slide Show with Controls at Zapatec
• Ajax for Java developers: Build dynamic Java applications at IBM
• Create Your Own Ajax Effects animated text; at ThinkVitamin
• Make all your tables sortable at Kryogenix
• Ajax Design Patterns at Snyke
• Ajax Poller at DHTMLGoodies

Really huge, excellent list. Check it out…

Ajax script resources

Working with Ajax? (Asynchronous Javascript and XML) Especially in web applications? Check out the web applications and scripts, coding secrets, and tips on the following web sites. As Ajax grows, so will these resources, so its highly recommended to bookmark them:  (also great sites for HTML codes, CGI, Perl, Javascript, XML, and other coding scripts)

The Javascript Source:  http://javascript.internet.com/ajax/

The Javascript Forum: http://www.webdeveloper.com/forum/forumdisplay.php?s=&forumid=3

Ajaxed: http://www.ajaxed.com/

Ajax.net: http://www.ajaxpro.info/default.aspx?old=ajax&ref=http%3a%2f%2fwww.google.com%2fsearch%3fhl%3den%26q%3dFree%2bAjax%2bscripts

Open Cube: www.opencube.com

Javascript Kit: www.javascriptkit.com

and don’t forget my Yahoogroups web-design support group at www.yahoogroups.com/ “web-design”

 

 

 

Get Help With Ajax Freaks

While surfing the web I came across a great tutorial site for users of Ajax. Ajax Freaks is an informational website and you can use it while you are learning or if your still in the development stage.

They have over 200 articles, and they also have forums, downloads, scripts and tutorials. If you are completely unsure what Ajax is, try starting here and reading a few articles tutorials.

Professional Ajax : Review

Ajax, as you all know is something that is used in most of the new and exciting application released on the web nowdays, Web 2.0 to be precise. Professional Ajax, lights up most the area needed for a web developer to get started with AJAX. The book does a good job academically of showing how Ajax has evolved and how it is used in Web 2.0 applications. The book effectively cites examples in PHP, .NET, and JavaServer Pages. Practically, the authors exhibit a proper mix of (X)HTML, CSS, JavaScript, Dynamic HTML and XmlHttpRequests, showing how the technologies are blended for developing next-gen UIs. The first few chapters have enough information to get a novice started with AJAX.

Title : Professional Ajax
Authors : Nicholas C. Zakas, Jermy McPeak, Joe Fawcett.
Paperback : 432 pages
Publisher : Wrox
ISBN : 0471777781

Read more

How to Create an Animated Live Search

“How to create an animated Live Search“, A interesting tutorial written by Steve Smith. A great result with small changes in any Wordpress template. The script is made using script.aculo.us to create a nice effect on displaying search result.

I’ve been meaning for some time to give a little tutorial on the live search I created for this latest design. There are a few steps involved, and I’ll do my best to explain each as we go. I should also note that I’m not including all the effects that you’ll find in my search. They require some special WordPress template changes that you shouln’t have to make. And I need to keep mine unique, right? Also, I’ll be touching on a few steps that are WordPress specific, but the theory can be applied to any site platform.

Thanks to Mike M

Next Page »