Ajax Stop Server Side Processing and Start Again

The modernistic web developer who does not consider Ajax when planning or building their websites is potentially missing out on a powerful tool to enhance usability.

There are however, challenges in implementing Ajax functionality on a web page.

In this article nosotros'll hash out solutions to five of the most common challenges that a programmer faces when using Ajax to raise the content on their website.

Although there is a lot more to discuss and inquiry on all 5 topics, this post should give beginners and intermediate Ajax developers some solid tips on implementing Ajax functionality in a more user-friendly and attainable style.

Problem #1: Content Is Not Backwards-Uniform

This problem occurs when a designer has incorporated JavaScript and Ajax enhancements into their website's compages without making provisions for browsers that have disabled JavaScript.

Nothing is wrong with planning a website with JavaScript and Ajax; in fact, in today'south market, JavaScript considerations should be integral to the planning process. Just you should nonetheless ensure that the website is backwards-compatible (or that it degrades gracefully) upon launch.

Solution: Implement Ajax as an Enhancement to an Already-Functioning Website

While Ajax may be integral to your planning of the website's architecture, ensure that all content is accessible through conventional server-side methods.

Permit's say you lot have an "Employee Information" folio that has a separate link for each employee. Using server-side technology, you could display the content for a particular employee based on a value passed through the query cord, similar this:

            <a href="employees?view=CEO">John Doe - CEO</a> <a href="employees?view=VP">Frank Smith - Vice President</a> <a href="employees?view=Accountant">Jim Williams - Auditor</a>                      

All of the links above point to the aforementioned page, the "Employees" folio, which changes co-ordinate to the variable in the query string. Each employee's data would be loaded from the server, which could be done in a number of ways: via server-side includes; through a database; or even using XML.

Whichever employee link is clicked, the full folio would have to load in order for the requested data to be delivered.

Then, the content is fully accessible before whatsoever Ajax enhancements are layered on top. So, using JavaScript, the full folio refresh could be interrupted and the content loaded instead via Ajax. The clicked link could be identified past an ID or by checking the value of the HREF attribute in the anchor.

Although the content is fully accessible with JavaScript disabled, almost users will see the enhanced Ajax-driven version.

The principle of progressive enhancement for Ajax is well known, because it is normally used for unobtrusive JavaScript techniques and is inherent in CSS, every bit illustrated by the graphic below:

So, build your website to work without JavaScript, and so add JavaScript every bit an enhancement, just equally y'all would marker upwardly your content in HTML so "enhance" it with CSS.

Trouble #two: The Browser's Loading Indicator Isn't Triggered by Ajax Requests

Well-nigh every browser has a way of visually indicating to the user that content is loading. In current browsers, the indicator appears on the tab that's loading the content.

The images beneath evidence this animated indicator from a few pop browsers.

Net Explorer's loading indicator is a solid circumvolve with a gradient that spins while the content loads.

Firefox displays a like icon of small spinning circles in dissimilar shades of gray.

Google Chrome spins a half-circumvolve.

The trouble is that Ajax requests practice not trigger this "loading" indicator that is built into browsers.

Solution: Insert a Similar Loading Indicator Near Content That'due south Loading

The common solution to this is to incorporate a custom progress indicator into the Ajax request. A number of websites offer complimentary "Ajax loading" graphics.

Preloaders.internet has a number of fancy, customizable animated graphics to choose from.

Implementing this custom loading graphic, or progress indicator, into your website'due south Ajax functionality is simply a matter of showing and hiding information technology at the advisable times via JavaScript.

Your Ajax code volition include lines of lawmaking that tell you if the request is in progress or completed. Using JavaScript, y'all can evidence the animated graphic while the request is beingness candy and then hide it when the action has completed.

Problem #3: The User Doesn't Know That an Ajax Asking Has Completed

This is related to the previous problem only is often disregarded, because the developer might assume that the disappearance of the "loading" indicator suffices to inform the user that the content has completely loaded. But in most cases, definitively indicating that content has been updated or refreshed is better.

Solution: Employ a Distinct "Asking Completed" Message

This tin can be done similar to how grade submissions are confirmed. Later on a link has been submitted on Digg, the page lets you know very clearly that your submission has been received:

Although this particular indicator does not betoken out a completed Ajax request, the principle is the same: the "Success" box appears later on the page that submits the form has finished loading, and the box is colorful and distinct.

A similar graphic or indicator could be used at the end of an Ajax request to tell users that content has been updated. This would exist implemented in addition to, not instead of, the progress indicator proposed for the previous problem.

A similar but subtler way to indicate that an area of content has been updated is the yellow fade technique. This method is familiar to users, unobtrusive and works well with Ajax-loaded content.

Problem #iv: Ajax Requests Cannot Admission Third-Political party Web Services

The XMLHttpRequest object, which is at the root of all Ajax requests, is restricted to making requests on the same domain as the folio making the request. Merely in that location are instances when you would desire to admission third-political party information via an Ajax asking. Many web services make their data accessible via an API.

Solution: Utilise Your Server equally a Proxy

The solution to this problem is to use your server as a proxy between the third-party service and browser. Although the details of this solution are far beyond the scope of this article, we'll get over the basic principle at work.

Because an Ajax request originates in the client'southward browser, it must reference a file at another location but on the same domain equally the source of the asking.

Your server, however, different the client's browser, is not limited in this way. So, when the page on your server is called, it runs in the background as information technology normally would but with access to whatsoever domain.

This doesn't present any security take a chance to the user considering the requests to the third-political party service are made on your server. And then, in one case the data has been obtained at the server level, the side by side step in the Ajax call is to send a response back to the client, which in this case would include the information obtained from the third-party web service.

If you want more details on this powerful method of combining spider web-service access with custom Ajax, definitely bank check out other resources, some of which are listed below.

Further Reading:

• Use a Web Proxy for Cantankerous-Domain XMLHttpRequest Calls
• Cross Domain Ajax: a Quick Summary
• Cross domain AJAX querying with jQuery

Problem #5: Deep Linking is Not Bachelor

This is a trickier effect but may non be required depending on your blazon of website or application. The trouble occurs when content is loaded via Ajax and and then the "state" of the website is changed without the URL that points to the page being affected.

If the user returns to the page via a bookmark or shares the link with a friend, the updated content volition not be automatically displayed. The website would instead revert to its original land. Wink websites used to have the same problem: they did not let users to link to anything merely the initial screen.

Solution: Use Internal Page Anchors

To ensure that a particular "state" on an Ajax-driven web folio is linkable and bookmarkable, you can use internal page links, which modify the URL only don't refresh the page or affect its vertical position.

This unproblematic code demonstrates how this is washed:

            var currentAnchor = document.location; currentAnchor = Cord(currentAnchor); currentAnchor = currentAnchor.split("#");  if (currentAnchor.length > 1) { 	currentAnchor = currentAnchor[1]; } else { 	currentAnchor = currentAnchor[0]; }  switch(currentAnchor) { 	case "section1": 	// load content for section 1 	suspension;  	case "section2": 	// load content for section 2 	break;  	instance "section3": 	// load content for section 3 	break;  	default: 	// load content for section 1 	break; }                      

The above is non a performance slice of code but rather a theoretical example to demonstrate the chief steps involved.

The commencement two lines of code put the current folio location (URL) in a variable. Then the location is converted to a cord so that we can manipulate it.

Next, we "split" the cord into two parts via the anchor symbol (#) and subsequently bank check to meet if the array that is created from the divide is greater than one detail. Greater than one item means that the URL has an anchor.

If the URL has simply one office, that means no anchor is nowadays. The subsequent "switch" statement loads content according to the value of the anchor. The switch argument has a "default" pick in instance no anchor is nowadays, which would be the aforementioned equally loading the page in its original state.

Furthermore, we would apply code to deal with links that betoken directly to specific content through internal anchors. A link that points to "content2" would load the content in "content2," and the string "#content2" would be appended to the current URL.

This would change the URL by adding an internal ballast, without changing the view of the page but preserving an identifier that indicates the desired state of the page.

This explanation is but theory. The concept works, and information technology works very well. But I haven't explained all of the possibilities, drawbacks and other subtleties of building a website or page in this manner.

Follow the links below for a more comprehensive discussion of the topic, or experiment with it yourself. Likewise, note that this can be tested using content that changes with JavaScript alone, and doesn't need to utilize Ajax.

Further Reading:

• Deep Linking for AJAX
• AJAX: How to Handle Bookmarks and Back Buttons
• Fixing the Back Push button and Enabling Bookmarking for AJAX Apps

This mail was written exclusively for Webdesigner Depot by Louis Lazaris, a freelance writer and web developer. Louis runs Impressive Webs, where he posts articles and tutorials on web design. Yous tin can follow Louis on Twitter or get in touch with him through his website.

Do you know of whatever solutions to these or other Ajax challenges? Please share your comments below…

linbirsted.blogspot.com

Source: https://www.webdesignerdepot.com/2009/12/solutions-to-5-common-ajax-problems/

Share this post