Re: What's Up With XMLHttpRequest?

Hi, James–

The issue is that synchronous requests to an external source (the 
server) are "blocking"… that is, the script execution has to wait until 
the server receives the request and responds. If the response is slow 
(the server is slow or down, the bandwidth on the user's device is 
limited, etc.), then the script just keeps waiting until the request is 
fulfilled (or times out).

As an analogy, think of a coffee shop. If every customer had to wait to 
make their order until the previous customer's order was completely done 
and delivered, service for everyone would be too slow. And it's a bad 
use of resources, because the shop staff can work on multiple orders at 
the same time (e.g. while something else is brewing or such, they can 
start or deliver a different order). So, instead, when you make your 
order, you give your name, and when your order is ready, they call your 
name, and you come pick up your coffee.

It's the same with XHR: you tell XHR what you want, and where you want 
it from, and you also give it the name of the "callback" function. It 
queues up all the different requests, and when each response comes in, 
it sends the response to the appropriate callback function; note that 
the requests may be completed in a different order than they were 
placed… if one server responded more quickly, or one requested file was 
much shorter, that response will return faster than slower or longer 
ones, even if those other requests were made first; this is the 
"asynchronous" part. You might only be making a single XHR call, but all 
JavaScript functions (including user interactions) may have to wait on 
that call to be completed before continuing (e.g. "blocking"). If you 
don't work "async", then the user is often going to have a less 
responsive experience, while they wait for multiple different sequential 
operations to be completed.

Luckily, this really isn't hard to do. Right now, you've got a single 
function that makes the request and waits on the response. You just need 
to break it into 2 different functions: one to make the request, and 
another (the callback) to handle the response.

Here's some working code I found online [1] that should be very easy for 
you to adapt:

[[
function foo(callback) {
     httpRequest = new XMLHttpRequest();
     httpRequest.onreadystatechange = function () {
         if (httpRequest.readyState === 4) { // request is done
             if (httpRequest.status === 200) { // successfully
                 callback(httpRequest.responseText); // we're calling 
our method
             }
         }
     };
     httpRequest.open('GET', "/echo/json");
     httpRequest.send();
}

foo(function (result) {
     document.body.innerHTML = result;
});
]]


If you want the full explanation behind this, see this StackOverflow 
post [2]

[1] http://jsfiddle.net/DAcWT/
[2] 
http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call/18309057

Regards–
–Doug


On 1/23/15 5:28 PM, [email protected] [svg-developers] wrote:
>
>
> It appears that because I use this function it is being removed from the
> web platform, but seriously...
>
> I am not a programmer or Javascript pro. I am currently using this script;
>
> <script type="text/javascript">
> function load_container(temp) {
> var req = new XMLHttpRequest();
> req.open("GET", temp, false);
> req.send(null);
> var page = req.responseText;
> document.getElementById("container").innerHTML = page;
> </script>
>
> My browser developer tools tell me this is determental to the user
> experience. Huh? Can anyone clarify the reason and perhaps tell me how
> to properly write the script to be compliant with whoever is upset?
>
> Synchronous|XMLHttpRequest
> <https://xhr.spec.whatwg.org/#xmlhttprequest>| outside of workers is in
> the process of being removed from the web platform as it has detrimental
> effects to the end user's experience. (This is a long process that takes
> many years.) Developers must not pass false for the async argument when
> the JavaScript global environment
> <https://html.spec.whatwg.org/multipage/infrastructure.html#javascript-global-environment>
> is a document environment
> <https://html.spec.whatwg.org/multipage/webappapis.html#document-environment>.
> User agents are strongly encouraged to warn about such usage in
> developer tools and may experiment with throwing
> <http://heycam.github.io/webidl/#dfn-throw> an |InvalidAccessError|
> exception when it occurs.
>
> Thanks in advance.
>
> James
> http://svgdesign.guru
>
>
>
>
> 


------------------------------------
Posted by: Doug Schepers <[email protected]>
------------------------------------

-----
To unsubscribe send a message to: [email protected]
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my membership"
----