There and Back Again

AJAX Answers

The last couple days have been a lot of fun. I was at LinuxWorld and did a book signing yesterday, my publisher had the first copies of Understanding AJAX at their booth. They should be showing up at bookstores and Amazon in the next couple weeks.

Your AJAX answers from my AJAX questions post are below, I hope everyone finds them helpful.

Dealing with broken connections

Question:

How can I find out whether a connection is broken? Should I just set a unique timeout per request after which an error message can be displayed? The timeout would be deactivated if the AJAX call succeeds. Is this a smart idea and does it work?

Answer:

Using a timeout per request does work though its not a perfect solution. HTML_AJAX uses this approach, and a default timeout of 20 seconds. The issue is that 20 seconds is a long time to wait to provide an error, but there are still cases that hit this value. Its also hard to know what to do if you’ve hit an error, is this a transient failure and you should resend your request, or can you know longer talk to the server and you’re app needs to provide and error.

HTML_AJAX vs Prototype

Question:

Why would you want to use HTML_AJAX when there are far better tools for the job, pure javascript solutions such as prototype or jquery? I don’t think you need something special on the serverside to return some data as a response to an AJAX call.

Answer:

I guess you don’t like HTML_AJAX, which is ok, but there are lots of reasons why developers want AJAX libraries that are closely tied to there server side language. Libraries like HTML_AJAX make it easy to perform RPC style AJAX, and they usually make it possible to write less JavaScript on just focus on your primary server side language. Though these libraries do this to varying degrees of success. Something like SAJAX just handles the RPC, while HTML_AJAX can be used with very limited JavaScript writing (HTML_AJAX_Action stuff), and most of the .NET AJAX libraries allow you to add AJAX with no JavaScript at all, since the .NET code behind concept make its really easy to automatically chunk up your code.
Even if there is a JavaScript library you think its great, that doesn’t mean it offers the tools that everyone wants.

Degradable AJAX sites and JavaScript behaviors

Question:

What is the best way to ‘degrade’ a website when Javascript/XMLHttpRequest support is disabled? Take f.e. yahoo.com. It’s a great website enriched with AJAX, but when JS is disabled it’s still looks the same but the rich features are not there. Would you consider CSS-style selectors as the solution? I do not want to create two different websites, one JS enabled and the other JS disabled. Thank you in advance.

Answer:

CSS-style selectors, like those you use with the Behavior library gives you a good tool to write a degradable AJAX site, but the actual implementation can be pretty hard.

In general it means fully implementing a site without AJAX, then picking forms, links, etc that you want to make AJAX and tieing the AJAX too them at runtime. This works really well if your just doing something like type-ahead search since your not changing work flows, but it doesn’t always work that great for form submissions, since they often update different parts of the page, and the code that processes them is generally designed to build the whole page.

If your using AJAX for enhancements that don’t change the actual work flow then making your site degrable is easy. If your site relies on AJAX for its basic workflow you’ll have a much harder time making a site degrade.

Attaching JavaScript using css selectors is a great approach since it keeps your HTML completly seperate

Adding JavaScript on using AJAX

Question:

When utilizing an AJAX API such as Google Maps, how do you execute embedded Javascript commands in a page generated on-the-fly? For example, you have a website which contains several ’s, one of which is an implementation of the API (i.e. a Google map). That loads when the page loads. Now, based on user interaction (clicking on links), you pull an SQL result from a database and display 10 at a time in a separate . Each time the loads, you want to execute some commands through the AJAX API. In my understanding, JS only executes at the browser page load, but I’m sure I’ve seen sites that get around this.

Answer:

While its true that you can’t directly add JavaScript too a page using script tags and innerHTML, that doesn’t mean you can’t add JavaScript to your page at any time. The simplest way is too just send your new JavaScript as text and run it through eval too add it too the page. You can also parse your strings before adding them with innerHTML and run eval as nesseccary. HTML_AJAX provides a method for doing this parsing for HTML_AJAX_Util.setInnerHTML. If you use it JavaScript in any script tags will be run. Other libraries like prototype also offer similar features.

AJAX File Upload

Question:

how can i make a file upload via ajax?

Answer:

If you think of AJAX as involving using XMLHttpRequest then you can’t (at least not without disabling the browsers security model, which i don’t even recommend for intranet apps). But you can still upload files asyncronously, its just a matter of targeting a form at a hidden iframe. You will also want to look at generating your IFrame in JS since i believe it gives you less problems with browser history.

AJAX Form Submission

Question:

I’ve been studying AJAX for a bout a month now but I have not yet grasped the tecnique to submit a form with POST method. I’ve been trying to find an article that covered that but all I could find was the ones that included somekind of already made framework.

I want to know how to submit data to server (like form or email sending) with POST method.

Answer:

Submit a POST request using AJAX you first have to understand what a normal form POST is.
When you submit a form in your browser it makes a http request with the following options:
HTTP Verb: POST
Content-Type: application/x-www-form-urlencoded
And a body of something like:
fielda=valuea&fieldb=valueb

So to replicate a form POST in AJAX you need to run xmlhttp.open with POST set a header, xmlhttp.setRequestHeader(‘Content-type’,'application/x-www-form-urlencoded’);

Then encode your content and send it.
xmlhttp.send(‘fielda=valuea&fieldb=valueb’);

If you use a library most have code for handling this for you, HTML_AJAX has HTML_AJAX.formSubmit for taking a form and submitting it using AJAX and HTML_AJAX.post for doing custom POSTs.

7 thoughts on “AJAX Answers

  1. Pingback: PHPDeveloper.org

  2. Pingback: Sam’s random musings » Joshua Eichorn’s Blog: AJAX Answers

  3. Joshua Eichorn Post author

    karthick, there isn’t an option for that, at least not without disabling javascript security on your browser

    I’ve seen specs for file additions to XMLHttpRequest but it could be awhile until any of that gets implemented