General Question about Ajax

JavaScript
1

Hey SP,

I’d like to know if it’s possible to have Ajax request new Ajax functionality? Surely you don’t have to have every single possible Ajax function included in the initial page request do you?

2

If I understand you, it is quite possible to not trigger AJAX requests until an event happens.

???

3

I don’t think that’s what I mean.

What I mean is, say I have an onlick that loads some javascript and html into a div. I want that javascript that was just brought to the browser to work. Especially if it brings another ajax function. Know what I mean?

4

So in other words, either load all possible upcoming AJAX calls in ininitial pageload, or have the subsequent AJAX calls loaded on as as need basis?

5

Excellent wording! And Yes!

6

So is it one or the other? Is both possible?

7

An ajax request is just a request to another page. You can put it in a function and call it any time you want. Don’t over complicate it, it’s just an action that can be triggered when the developer wants it to be.


$(function() {
    // Fire at Page Load
    getSomeStuff();

    // Fire when a button is clicked ie: <button class="button-name">click me</button>
    $('button.button-name').click(function() { 
       getSomeStuff();
    });
});

function getSomeStuff() { 
     // ajax code goes here
}
8

Yes, that’s how I would do it. i.e.
have all the AJAX code that might be used (or might not) in the initial page load.

It might be possible to have AJAX load in more code, but unless you’re going to have an unwieldy amount in the one bit it probably wouldn’t be worth the effort.

9

Isn’t the OP talking about event delegation?
I.e. attaching behaviour to elements regardless of whether they are present when the DOM renders, or are inserted into the page dynamically.

10

Hi @wh33t,

I think you may not be referring to AJAX at all but asking how to load new scripts into the page without a redirect.

If that’s the case, you can just add tags into the page with javascript to include and run other scripts on your site, there’s also libraries like RequireJS which make it easier to include dependencies on external scripts.
http://requirejs.org/docs/start.html

11

Google do some crazy stuff in Gmail where they fetch non-core javascript as plain text, so your browser doesn’t even parse it until the page’s core javascript decides it’s time to read it in. That reduces the time to getting the basic behaviour working (reading email) and delays the extra stuff (like the chat list and whatnot) until the browser has gotten the important stuff up and working.

I even read some articles about tracking the mouse cursor, and only loading behaviour when it looks like the user is moving their mouse toward the button that triggers that behaviour – that’s awesome. But I guess the takeaway here is that yes, you absolutely can load new js code via an asynchronous ajax call.

1 Like
12

But it is far easier to just add the extra JavaScript by inserting a script tag at the bottom of the page.

13

But it is far easier to just add the extra JavaScript by inserting a script tag at the bottom of the page.

Don’t forget you can add the async keyword to that in HTML5 too.

<script src='something.js' async></script>
14

Of course but since there are plenty of other reasons for wanting the JavaScript at the bottom of the page you’d only use that with HTML 3.2 pages that you need to patch quickly - where you don’t have time to actually move the script tag.

15