Desiging a AJAX website

What are the things to consider and watch out for when designing a website with AJAX? Must take care of conditions, say timeouts, error handling, for instance?

Best practices? What paramete开发者_运维百科rs to take care of while designing and coding?

There's a few different views to consider:

AJAXs Frameworks

• There's a few out there - I'm afraid I haven't used many, but they'll cover a lot of the plumbing for you, and handle X-Browser compatibility issues.
• jQuery is a very commonly used one (so probably good for your CV).
• ASP.NET AJAX if you're on the MS platform.
• Rolling you own can be instructive - but you'd only want to do it for the right reasons.

Dependancies

• Which browsers will be using the site and what do they support, all the old JavaScript X-Browser compatibility issues are applicable.
• A good framework should help here.
• Be careful how you manage dependancies between client-side code and server-side code; you want to ensure consistency as much as possible, and you want to avoid hard-coding stuff and baking in other garbage that will make maintenance and change hard over time.

API / Interface Design

• Somethings got to handle the AJAX calls server-side: when you build thios you're building an API that you app (and others) can call, so make sure you take a bit of time to think about it up front.
• Make sure you consider useful design patterns and principles: Single Responsibility Principle (SRP), Interface Segregation Principle (ISP), Common Reuse Principle (CRP)

Security

• Publishing an AJAX API on the net has it's own set of security gotcha's, be wary of them.
• Don't trust user / system input, make sure you validate all calls being sent.
• Don't forget you can secure your API (or parts of it) in a secure part of the site. Uusers who have authenticated will also be authenticated to use any AJAX interfaces protected this way.

Documentation

• AJAX in itself doesn't provide a way of describing itself (like Web Services can, via WSDL); I'v esometime had the server-side interace provide info on how it should be called if it's not called correctly, or allow every interface to be called with a common parameter "Help" - when called it provides back all the information you'd need to know how to call it.
• Your approach will vary depending on who can use/call the API: is it part of a web-app that will only work on the companies LAN, or is it puiblic/www facing?

I assume this will probably become a collaboration of tips so here is one from my experience.

One gotcha I have found when working with AJAX and Internet Explorer is that IE sometimes likes to cache the response for your requests. So if you find that requests are working in Firefox but not IE this could be the culprit.

The solution, simple add an additional parameter to your request URL that will in most cases be completely irrelevant. The parameter can be whatever you want, but the value needs to be ever changing and always different, best solution I have found is to use a date/time stamp since time is always incrementing. For the visual learner here is an example.

Normal request

http://example.com/controller/action?query=john

Requests to work with IE

First request

http://example.com/controller/action?query=john&seed=1234567890

Second request

http://example.com/controller/action?query=john&seed=2345678901

The reason this works is because IE sees it as a new URI that it has never grabbed before so there is nothing in the cache for it.

Maintaining usability for users without JavaScript enabled, also known as "progressive enhancement".