updating a page with ajax without reloading

jamesmorris86 · 24 Aug 2011 at 18:59

Hi guys, I am very new to ajax and was wondering if someone could maybe point me in the right place to learn what i need to reach my goal.

I currently have an image on my website, a character for a game, the image is positioned using absolute positioning. The pixel placement for the image is stored in a mysql database.

I then have a compass, when someone for example clicks north, it loads north.php which adds 30 to the database, changing the aboslute position, and redirects back to the game, with my little character now 30 pixels higher than before.

It works fine how it is, but someone has brought it to my attention, that using ajax, I could make it so when i click north, it will update my database +30 and apply the changes to the position of my character without having to refresh the page once.

Would anyone know what this feature of ajax is called? or be able to recommend some tutorials that may help with this?

Thanks for any tips.

Ekim · 24 Aug 2011 at 19:06

That's not a feature of ajax, that is ajax.

I would suggest using something like jQuery.

http://api.jquery.com/jQuery.ajax/

jamesmorris86 · 24 Aug 2011 at 19:11

Ah, ok lol. Thanks for the link. I will take a look.

So does ajax keep a constant connection with the database in order to see when an update is made or changed?

Ekim · 24 Aug 2011 at 19:16

No when you click on the North button a call javascript will call a page on you server which can make the update to your database. You will then need to use some javascript to move the position of your character.

Xelene · 24 Aug 2011 at 19:19

jamesmorris86 said:
Ah, ok lol. Thanks for the link. I will take a look.

So does ajax keep a constant connection with the database in order to see when an update is made or changed?

No, it "sort" of keeps a constant connection with the webserver that can poll the database if it is coded that way.

topdog@OC · 24 Aug 2011 at 19:41

It does nothing of the sort, really. It's not like some keep-alives mechanism, so although you quoted it to emphasise otherwise, I wouldn't like anyone to think it functions like that at all.

AJAX = Asynchronous Javascript And Xml

It means that whilst your user is playing around on your web page running client-side javascript functions and such, it can at the same time also be snagging just a fragment of xml/html from the server, according to whatever query you have it make, which it gets asynchronously without blocking the browser.

Then when it completes getting the fragment back (which might only be a few XML elements and attributes), it can immediately and dynamically modify the current page DOM with this information.

So it avoids whole blocking round trips and full page redraws, but no connection is or needs to persist in the slightest inbetween each request.

Xelene · 24 Aug 2011 at 20:40

topdog@OC said:
It does nothing of the sort, really. It's not like some keep-alives mechanism, so although you quoted it to emphasise otherwise, I wouldn't like anyone to think it functions like that at all.

The quotes were there to indicate the apparent behaviour from a new programmers perspective. The actual network interaction was irrelevant to the question, and dependent on the implementation it can actually be a 'keep-alive' mechanism - i.e. a permanent socket open to the server (look at HTTP pipelining). Typically it isn't, it's a low rent discrete HTTP request / response without the overhead of rendering the DOM model. Either way it's mostly transparent and not relevant.