AJAX in local preview on localhost:50000

Favourite 18 favourites
Tutorial written by HatsuSakuraOriginally published on 4th, October 2012 - 4 revisions

Hello,
recently I started using AJAX and XML object on scirra's C2.
The first issue I faced was "how to get AJAX data while running my preview by pressing F5?".
When I solved it, I thought to write this tutorial, because it would have been exactly what I was looking for.

Pay Attention

NOTE: If you place the data you want to get by AJAX in a project's sub folder, you probably get it on February, the 30th..
While previewing, C2's engine create a temporary path in which places all the files (images and *.js files) so a call like

    http://localhost:50000/dataIWantToGet.xml
is useless: you'll get back a 404 error!
And it's perfectly correct..

The trick

In order to use the localhost preview, you need a combination of two things:
1) an independent web server. "Independent" from the C2-runtime one.
Apache, for example: it's free and it's a good web server you can use for many other purposes (It was already installed on my computer for web developing reasons)
2) unlock the Access-Control-Allow-Origin as said in many forum answers by Ashley: Mnual Page

When you have installed the web server you can create a sub folder in its www main directory, for example

    www/scirraTest/myGame/xml
and after place inside the xml data you want to get (or the PHP file you want to call, and so on).
Usually, the web server is called on localhost with ports 8080 or 8000 or something else, it depends on your configuration.

It's almost done...
You need to unlock your browser, letting it access cross-server informations.
As a matter of fact: the preview is shown on localhost:50000 while the webserver is called on localhost:8080.
I use Mozilla Firefox as a browser and I've found this plug-in
that let me switch the Access-Control-Allow-Origin rules.

Summary

* In the web server www path create a folder to host the data you want to get by AJAX call
* Configure your web browser to have the correct Access-Control-Allow-Origin rules
* Make your call inside the game this way:

     http://localhost:8080/scirraTest/myGame/xml/dataIWantToGet.xml
* Last silly TIP: place the web address in a variable and use it in every AJAX call, just to avoid several changes while exporting the game.. ;-)
    webAddress = "http://localhost:8080/scirraTest/myGame/xml/"
and the call become
    webAddress & "dataIWantToGet.xml"
I hope this can be useful and save some time for someone.
Any feedback will be appreciated.

Unlock your full gamedev potential

Upgrade to the Personal Edition of Construct 2, it has way more features and won't holding back from making money and using your full creativity like the free edition does. It's a one off payment and all Construct 2 editor updates are free for life!

View deals

Plus, it's got a lot of additional features that will help you save time and make more impressive games!

Congratulations on finishing this tutorial!

Did you learn a lot from it? Share it now with your friends!

Comments

3
Jander 3,374 rep

Very good...

Tuesday, October 09, 2012 at 10:02:11 PM
2
HatsuSakura 5,611 rep

Thank you. I hope it had been useful to you ;)

Wednesday, October 10, 2012 at 5:32:47 PM
2
kenli 7,858 rep

Awesome tutorial :)

Monday, October 15, 2012 at 2:01:36 PM
0
BrandonJAwesome 1,781 rep

So what security implications do I need to watch for? I'm considering doing this, but am concerned about that.

Thursday, January 31, 2013 at 2:48:49 AM
0
HatsuSakura 5,611 rep

@BrandonJAwesome Hi, I simply don't care about security implications because this is just a way to simulate the AJAX on your local machine, not for sharing/hosting the game.
If you want to verify the correctness of your AJAX program I think you have 2 ways: exporting everytime the whole project and run it on a server or try this workaround.
While running in local you don't suffer any security weakness.
For the official release, you have to load all the code on the same server (the one you use to host the game) and the security problem about the Access-Control-Allow-Origin doesn't exist anymore.

Saturday, February 02, 2013 at 11:52:40 AM
1
mineet 7,086 rep

hi thank you for this

Thursday, April 25, 2013 at 9:06:01 PM
1
AbelaNET 14.9k rep

Thanks, this really helped.

Monday, June 17, 2013 at 3:03:32 PM
2
maxlive2010 6,075 rep

In Google Chrome use this: allow to you request any site with ajax from any source: chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi/details

Friday, February 28, 2014 at 12:33:39 PM

Leave a comment

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