AJAX Example with Construct 2

  • 87 favourites



22,918 visits, 70,793 views



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.

AJAX and File Set Up

To do this properly, you will need to have either a local server or a remote server. To keep things simple, we will have all of our files in one folder that will get uploaded to the server.

Let's create the target file that we will be using to call data from. In our example, it's a file called ajaxexampleGET.php. If we open up the file, it's actuall very simple. It looks like this:

Using a simple editor like Notepad, created a file called ajaxexampleGET.php and add this on the first line:

Hi this is a very simple AJAX example.

That's it. Save it.

Add the Mouse Click Event

We now need to set up the call from Construct 2.

Let's go back to our layout and add a Mouse object. It's the same technique as we did for the image and text boxes. Double click on the canvas, select the object, then insert.

After adding the Mouse object, add the AJAX object.

You will not see a screen representation of the object in the layout canvas as they are invisible. They do not render a graphic.

Add the AJAX Event

Click on the Event sheet 1 tab then click Add event.

The above window will appear. Choose Mouse then click the Next button.

Select the On object clicked then click the Next button.

Click on the click to choose selection

Double click the logo sprite...

...and it will show up in the paramaters window

Back to our Event sheet, we will see the Mouse click event. We can then add our AJAX call.

To add our AJAX call, click on the Add action link in the Event sheet.

It will load the above window. Choose the AJAX object and click the Next button.

Choose the Request icon by double-clicking it.

The next step is the most critical as it defines the target page that we will be getting data from. In this example, I added a made up URL value of:


In your case, you need to replace the above with your target page. Here's what it looks like:

Click Done.

You'll notice it will show up in the Event sheet. It looks like this:


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