tot - jquery/jquery.xsajax.html
Not logged in 		[Browse]  [Directory]  [Home]  [Login] 
[Reports]  [Search]  [Timeline] 
  [Raw] 
jquery/jquery.xsajax.html 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>jQuery XS AJAX Plugin</title>
        <style type="text/css">
            body { margin-left: auto; margin-right: auto; width: 600px; }
        </style>
    </head>
    <body>
        <h1>jQuery XS AJAX Plugin</h1>

        <h2>Description</h2>

        It is well known that with the help of a dynamically generated
        DOM node corresponding to a XHTML <tt>&lt;script&gt;</tt>
        element, one can achieve a portable cross-site (XS) variation
        of an AJAX-style client-server communication as the
        <tt>&lt;script&gt;</tt> element is <i>not</i> staying under the
        "same-origin security policy" which restricts all the regular
        AJAX methods. This allows one to asynchronously load JavaScript
        code from a third-party URL.

        <p/>
        The JavaScript code in <a
        hrf="jquery.xsajax.js"><tt>jquery.xsajax.js</tt></a> is a <a
        href="http://jquery.com/">jQuery</a> plugin, providing an
        abstraction layer for this functionality by resembling the
        standard AJAX-based <tt>jQuery.getScript(url, callback)</tt>
        function with a companion <tt>jQuery.getScriptXS(url,
        callback)</tt> function.

        <h2>Hints</h2>

        Notice 1: the point of this plugin is not the bare dynamic
        generation of the <tt>&lt;script&gt;</tt>. The point is
        that a callback function is executed once the script was
        loaded and executed by the browser and that the generated
        <tt>&lt;script&gt;</tt> is automatically garbage collected from
        the DOM again afterwards.

        <p/>
        Notice 2: the possibility to load a JavaScript file from a      
        sibling but third-party URL is also of great interest when      
        one wishes to set cookies for the third-party URLs. Suppose     
        you have three websites www.example.com, www.example.net and    
        www.example.org and on www.example.com/login you have your      
        customer login form. Once the customer was authenticated,       
        a cookie containing a "certificate" should be set. Setting      
        this for ".example.com" is trivial, but how do you at the       
        same time set it for all three domains? 
        
        <p/>
        The solution is this: www.example.com/login uses
        jQuery.getScriptXS() to send the issued "certificate"
        via a query string to both www.example.net/reflector and
        www.example.org/reflector. Behind those URLs a small CGI
        just converts the "certificate" in the query string into a
        corresponding HTTP response cookie (now for its own domain!)
        and returns even a possibly empty JavaScript script. Once
        www.example.com/login has received the two final notification
        (via the callback function) that both scripts were loaded, it
        knows that the two third-party cookies were set and can proceed
        by forwarding to the next page in sequence. Last hint: keep P3P
        in mind for MSIE when setting the cookie in the HTTP response
        ;-)

        <h2>Example</h2>

        <ul>
          <li>http://www.example<b>.com</b>/test.html:<br/>
            <pre>
&lt;script type="text/javascript"&gt;
   jQuery.$foo = "bar";
   alert("jQuery.$foo="+jQuery.$foo);
   jQuery.getScriptXS(
       "http://www.example<b>.net</b>/test.js",
       function () { alert("jQuery.$foo="+jQuery.$foo); }
   );
&lt;/script&gt;
            </pre>
          </li>
          <li>http://www.example<b>.net</b>/test.js<br/>
            <pre>
jQuery.$foo = "quux";
            </pre>
          </li>
        </ul>
    </body>
</html>