Rey Bango schrieb:
> Hi Klaus,
>
> Could you elaborate on this a little more? I'm not clear on what you
> mean by this. I'm all for "best practices" and I'm definitely interest
> in this.
>
> Thanks,
>
> Rey...
>
>> Here's another tip (to promote good practice right from the beginning):
>> Every Ajax call by jQuery sends a special request header, upon which
>> you can decide what to do, i.e. deliver the complete page or deliver
>> only a part in the response.
>> This is especially useful if you want to hijax your forms, so that they
>> both work with and without Ajax/JavaScript.
>>
>> You can check that in PHP like:
>>
>> if ( $_SERVER["HTTP_X_REQUESTED_WITH"] == "XMLHttpRequest") {
>> // handle XHR request
>>
>> } else {
>> // handle standard request
>>
>> }
>>
>> Cheers, Klaus
Rey, sure.
To make forms accessible with and without Ajax, I start with building
the form as if I were building a standard form with its traditional
submit and refresh the page behavior. Think of JavaScript being disabled.
This handling goes all into the else block of my example because there
will be no "X-REQUESTED-WITH" header in the http request (I come to that
later). You are simply sending back a complete page as response to the
form submit.
In the next step I so called "hijax" that form to enhance the user
experience a little bit. This is also refered to as "Progressive
Enhancement".
That means:
1. I will pick up the form and switch off the default submit action by
adding my own event handler.
$('#hijax-me').submit({
return false;
});
2. Then add some logic to gather all the form values and transmit it via
Ajax in the background, while you are pickinq up the form‘s action as well:
$('#hijax-me').submit({
// stupid IE returns an object for the forms action
var url = this.attributes[action] &&
this.attributes[action].nodeValue || this.getAttribute('action');
// works fine with very simple forms, just as an example
var data = $('input', this).serialize();
$.ajax({
type: 'POST',
url: url,
data: data,
dataType: 'json',
success: function(response) {
// show message for example
}
});
return false;
});
$.ajax calls the same page as if you were submitting the page in the
traditional way. But because jQuery's $.ajax also adds a custom header
to the request, of the form "X-Requested-With: XmlHttpRequest" (same as
Prototype if I remember correctly) you know in your page how the page
was requested and can handle the request according to that.
This happens in the if block in my example. You can now decide to only
send back a part of the page (like only the markuped confirmation
message to replace the form, or maybe sendback JSON or XML to be further
processed on client-side).
As a result you still can have all your backend logic in one place and
have a 100% accessible form with enhanced user experience if JavaScript
is enabled. And in the end this means only a little more work to do, if
at all.
jQuery's form plugin makes it even easier to do that, I think there is
an $.ajaxSubmit function, that does all the stuff for you...
Hope that made it clearer...
-- Klaus
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
