I'm working on a website and use Ajax to update the body by id name ('mbody'). The website is working as intended but then I realized, I was returning entire page data in the responseText and updating 'mbody' with this response.
Keep in mind, the responseText does include an 'mbody' id name of its own for body.
What I don't understand is, why wasn't the website messed up? I was sticking a copy of the entire page inside an already copy of the page that's in DOM. I have since changed the Ajax update from 'mbody'.innerHTML, to an HTML tag update, since I was returning the whole page.
In case you're wondering if it's necessary to return the whole page, the answer is yes, because things change on the page from top to bottom, from screen to screen so I prefer to just return entire HTML.
So, did Ajax realize I had an 'mbody' inside the responseText and automatically just updated that part with current DOM 'mbody', or did it really place a new html page source in 'mbody' that was already in DOM?
I just want to understand the behavior of Ajax in that situation. Again, my website was perfect even when I was returning entire html source for just the body part.
// the response is returning an html page, while mbody is the current
//DOM body tag's ID
mbody.innerHTML = this.responseText;
//i later set the response to update the entire html; pseudo example
htmltag.innerHTML = this.responseText;
The website function was perfect either way, but sticking a whole page update in the body of the current, I just don't see how that didn't cause issues or destroy the layout or something.
I'm working on a website and use Ajax to update the body by id name ('mbody'). The website is working as intended but then I realized, I was returning entire page data in the responseText and updating 'mbody' with this response.
It will be easier to debug later (and also less network traffic) if your server side code returned only the values to be updated. Using JSON could also provide less headache because it has it's own format that can easily be accessed by the Javascript without any additional work on a format protocol.
In terms of this part:
In case you're wondering if it's necessary to return the whole page, the answer is yes, because things change on the page from top to bottom, from screen to screen so I prefer to just return entire HTML.
You can save the "scroll y position" of the page, before the ajax call, and then after the re-rendering restore that scroll y. But none of this is necessary if you simply only change those parts of the dom that need changing, as opposed to all of it.