Re: [whatwg/xhr] Abandon hope of removing sync XHR from the web platform? (#20)

Not sure I'm following you, @ricea.  I think maybe the approach you are suggesting is what I did to attempt to make it asynchronous.  Keep in mind that there is no server rendered DOM, the initial DOM is delivered from a static index.html file.

The speedy thing about the synchronous solution is you have this in your static index.html:
```html
    <script type="text/javascript"  crossorigin="anonymous" src="/js/dist/applicationCore.js.gz"></script>
    <script type="text/javascript"  crossorigin="anonymous" src="/v7/v7Core.min.js.gz"></script>
    <script type="text/javascript"  crossorigin="anonymous" src="bundle.js.gz"></script>
```
the browser immediately starts to simultaneously load all 3 js bundles and during eval of the first, applicationCore.js.gz, stops the eval of the remaining scripts by making a single synchronous ajax call to a super fast redis backed api that does the usual session cookie lookup of the user info and provides the same system config data that is bootstrapped into the older pages.   There isn't a browser that this doesn't work well on and none have an issue caching all three bundles.

The only way I came up with for making the call asynchronously, without a 1-2 month refactoring effort was to instead do this:
```html
    <script type="text/javascript"  crossorigin="anonymous" src="/js/lib/zukeeper-auth.js"
      data-dependent-scripts="/js/dist/applicationCore.js.gz,/v7/v7Core.min.js,bundle.js"
      data-dependent-scripts-debug="/js/dist/applicationCore.js.gz,/v7/v7Core.js,bundle.js"
    ></script>
```
First download the auth code that was removed from applicationCore,  and then have it inject script tags in the head after it loads:

```coffeescript
module.exports = class ZukeeperAuth 
  
  # see README.md in root for doc and options.  returns the context data
  # returned by the /applicationContext api if user has valid session
  @getContext: (options={}) ->
    console.log("zuKeeperAuth: getContext(#{JSON.stringify(arguments)[1...-1]})") if options.verbose
    options.dependentScripts ?= []
    options.dependentScriptsDebug ?= []
    options.verbose = false
    
    httpRequest = new XMLHttpRequest();

    if (!httpRequest) 
      throw new Error('zuKeeperAuth: Cannot create an XMLHTTP instance')

    httpRequest.onreadystatechange = () => @_onReadyStateChange(httpRequest, options);
    url = '/applicationContext/getApplicationContext'

    # this is for the static examples and tests. zombie.js can't handle non http(s)?
    if document.location.origin == "file://"
      url = 'https://events.zulily.com' + url
      
    console.log('calling api ', url) if options.verbose
    httpRequest.open('GET', url);
    httpRequest.send();    
  
  
  @_onReadyStateChange: (httpRequest, options={}) ->
    if httpRequest.readyState == XMLHttpRequest.DONE
      if httpRequest.status == 200
        @_onAuthSuccess(httpRequest, options)
      else 
        @_onAuthError(httpRequest, options)

    
  @_onAuthSuccess: (httpRequest, options={}) ->
    console.log("zuKeeperAuth: successfully authenticated:", httpRequest.responseText) if options.verbose
    context = JSON.parse(httpRequest.responseText)

    window.ZuKeeper ?= {}
    window.ZuKeeper.context = context

    headEl = document.getElementsByTagName("head")[0] || document.documentElement;
    dependentScripts = if context.isDebug then options.dependentScriptsDebug ? options.dependentScripts else options.dependentScripts
    for scriptUrl in dependentScripts
      scriptTagEl = document.createElement('script')
      scriptTagEl.setAttribute('src', scriptUrl)
      scriptTagEl.setAttribute('type', 'text/javascript' );
      # scriptTagEl.setAttribute('crossorigin', 'anonymous') 
      scriptTagEl.async = false

      if scriptUrl == dependentScripts[dependentScripts.length - 1] && options.onSuccess?
        scriptTagEl.onload = options.onSuccess
        
      headEl.appendChild(scriptTagEl)
    
      
  @_onAuthError: (httpRequest, options={}) ->
    console.error("zuKeeperAuth: There was a problem with the request. #{JSON.stringify(httpRequest)}");
    # none of the dependentScripts are loaded anyway so just call directly
    options.onError?(httpRequest, options)

    document.location = "/auth?redir=#{document.location.pathname}"            
  

``` 


-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/whatwg/xhr/issues/20#issuecomment-319135764