CODEWITHSUNDEEP
jqueryajaxxhtml
Sebolains
Sebolains

Reputation: 782

jQuery Ajax loading div question

I have somewhat of a thought question regarding jQuery Ajax. My question is this: If I load just one section of an HTML into a div using jQuery Ajax, like this:

$('#result').load('ajax/test.html #container');

Will the user have to download the entire test.html in order to see what the #container div has? In other words, will the entire test.html file be downloaded and then parsed to only select the #container div, or will only the #container div be downloaded? If the first happens, can you think of any way of only downloading the #container div without creating a new html file?

Thank you so much for your input! :) I really appreciate it.

Upvotes: 4

Views: 476

Answers (3)

kapa
kapa

Reputation: 78741

Certainly the whole HTML will be downloaded.

If you want to avoid this, you have to create some kind of serverside script, for example PHP, that will only send the required content.

You could call it with something like

$('#result').load('ajax/test.php?ajax=1');

and in the PHP check for the existence of $_GET['ajax'], and if it exists, only send the #container div.

Upvotes: 3

thirtydot
thirtydot

Reputation: 228282

See: http://api.jquery.com/load/

$('#result').load('ajax/test.html #container');

When this method executes, it retrieves the content of ajax/test.html, but then jQuery parses the returned document to find the element with an ID of container. This element, along with its contents, is inserted into the element with an ID of result, and the rest of the retrieved document is discarded.

Upvotes: 3

Josiah Ruddell
Josiah Ruddell

Reputation: 29841

The whole page will be downloaded. After jQuery has the contents it parses it to find the appropriate selection. See Docs for jquery load

When this method executes, it retrieves the content of ajax/test.html, but then jQuery parses the returned document to find the element with an ID of container. This element, along with its contents, is inserted into the element with an ID of result, and the rest of the retrieved document is discarded.

Upvotes: 1

Related Questions