AJAX in local preview on localhost:50000

1

Stats

5,364 visits, 8,024 views

Tools

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 4 Oct, 2012. Last updated 19 Feb, 2019

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.

  • 0 Comments

Want to leave a comment? Login or Register an account!