Great explanation Klaus!
A little off topic, but for anyone interested, CakePHP does the
"HTTP_X_REQUESTED_WITH" check more or less automagically:
$this->RequestHandler->setAjax($this);
If the request is a standard HTTP, the page gets wrapped in a full page
layout; if it's an AJAX request, the server sends back only the code
returned via the function.
- Bryan
Klaus Hartl wrote:
> 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
> [email protected]
> http://jquery.com/discuss/
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
