AJAX Example with Construct 2

Favourite 91 favourites
Tutorial written by GhengisOriginally published on 14th, September 2011 - 8 revisions

Construct 2 has an AJAX object that will allow you to make a request to a target page in order to return the resultant data to AJAX.LastData where we can use the information collected.

In this tutorial I'm going to show you:
1. How to set up a simple interface that can form as the boilerplate for future tutorials.
2. How to set up a simple php file (we can also use a simple .txt file)
3. How to connect the AJAX object to make a call to our target page then return it to our HTML5 page.

If you are already familiar with Construct 2, you can skip step 1. The AJAX stuff is after building the interface.

Here's an example of what we're going to make:


It's located at:
http://www.jtadeo.com/scirra/ajax/ajaxexample1/

If you click the image, it will do the following:

1. It will make a call to the target page. In our example the page is called ajaxexampleGET.php. It can really be any page that will render output to a browser window. For example, xml, txt or html.

2. When the call to the page is done, the information collected is stuffed into the AJAX.LastData object where we can then consume it in our game.

A critical part about getting data from a page is that there must be data to be collected. For example, if we go to:

http://www.jtadeo.com/scirra/ajax/ajaxexample1/ajaxexampleGET.php

You will notice that it just spits out the following information:

That is basically what we're after and we want that information in our HTML5 page.

This is the same AJAX technique I used to create Cash Roll, a game I originally created for the iPhone and now also available as an HTML5 game.

You can check it out at:
http://www.jtadeo.com/scirra/cashroll/

Comments

10
Wink 9,926 rep

Outstanding! Great tutorial Ghenis. Lots of pictures :) I learn faster visually. I was going to wait until next payday to purchase a license but after playing around with Construct 2, reading great well written tutorials like yours, and seeing all the great community support here I'm going to buy a license this pay day. :)

Wednesday, September 14, 2011 at 4:46:51 AM
4
Mehtab 3,625 rep

awesome tutorial mate!

Wednesday, September 14, 2011 at 7:56:19 AM
6
Ashley 190.6k rep

Great work! This is an excellent tutorial, thanks very much. Just one minor point to note: the first time you click the object the text is set to nothing. It's because the request takes a moment to complete so AJAX.LastData is not set to anything immediately after the 'request' action. It's best to set the text in an 'AJAX: On Completed' event, which is when the LastData expression is set.

Wednesday, September 14, 2011 at 2:52:25 PM
4
Ghengis 5,698 rep

Thanks everyone for the kind comments.

Ashley, that is a very good point. I'll update the tutorial.

Wednesday, September 14, 2011 at 3:49:21 PM
3
prinsukun 5,117 rep

thank you so much for this a great tut =D

Thursday, September 15, 2011 at 3:37:40 AM
3
Kujisoft 3,203 rep

I waited for that, thanks a lot for the tutorial ! :]

Sunday, September 18, 2011 at 12:53:27 AM
3
vidi 5,058 rep

I agree it is an excellent tutorial. Thank you for this! :)

Tuesday, September 20, 2011 at 5:11:20 PM
3
chrisbrobs 7,881 rep

10 out of 10 for this guide!

Saturday, September 24, 2011 at 11:07:05 PM
1
alexh 2,363 rep

great tutorial and easy to follow but can get it to work

Thursday, October 06, 2011 at 11:09:20 PM
2
nano2001ac 2,853 rep

Thank you for this great tutorial.

It would be wonderful if some day is extended to learn how to implement a simple high score system like you have in cashroll.

I know Construct Scirra is not a place to learn programming, nevertheless I think a high score system is a basic thing to be implemented in any game, so I am fighting with tutorials like this:

http://www.unifycommunity.com/wiki/index.php?title=Server_Side_Highscores

But I donĀ“t get the way to make it work at the moment. I will keep learning. Regards.

Friday, October 07, 2011 at 9:36:08 PM
1
Vicu 2,826 rep

Link don't works(((

Saturday, October 08, 2011 at 2:25:58 PM
1
nano2001ac 2,853 rep

Sorry for this. I wrote some best scores in your cashroll list. I know now why the md5 hash is a important thing. :(

Saturday, October 08, 2011 at 6:40:07 PM
1
Ghengis 5,698 rep

Comment by nano2001ac

Sorry for this. I wrote some best scores in your cashroll list. I know now why the md5 hash is a important thing. :(
Hi nano2001ac,

No probs, it's a very simplistic scoring system and at this time I haven't had much time to clean up the code. That being said, there are some techniques that can employed to increase security and to mitigate the score issue.

Saturday, October 08, 2011 at 8:23:29 PM
3
ludodesign 30.1k rep

This can be very useful.

Tuesday, October 11, 2011 at 1:01:00 PM
2
habiplay 2,578 rep

very good tutorial, it is well structured.

Tuesday, October 25, 2011 at 12:55:52 PM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.