<![CDATA[ Ajax - freeCodeCamp.org ]]> https://www.freecodecamp.org/news/ https://cdn.freecodecamp.org/universal/favicons/favicon.png <![CDATA[ Ajax - freeCodeCamp.org ]]> https://www.freecodecamp.org/news/ Eleventy Mon, 18 May 2026 16:21:57 +0000 60 <![CDATA[ AJAX Tutorial: What AJAX Is and How to Use it ]]> https://www.freecodecamp.org/news/ajax-tutorial/ 66c343a90bafa8455505c671 Sat, 22 Feb 2020 17:37:00 +0000 What is AJAX?

AJAX stands for Asynchronous JavaScript And XML. It is not a programming language. It is a technology for developing better, faster and interactive Web Applications using HTML, CSS, JavaScript and XML.

  1. HTML : Hypertext Markup Language (HTML) is used for defining the structure of a Web Application.
  2. CSS : Cascading Style Sheet (CSS) is used to provide look and style to a Web Application.
  3. JavaScript : JavaScript is used for making a Web Application interactive, interesting and user friendly.
  4. XML : Extensible Markup Language (XML) is a format to store and transport data from the Web Server.

What's the meaning of Asynchronous in AJAX?

Asynchronous means that the the Web Application could send and receive data from the Web Server without refreshing the page. This background process of sending and receiving data from the server along with updating different sections of a web page defines Asynchronous property/feature of AJAX.

How AJAX works

AJAX makes use of a browser built-in XMLHttpRequest object to request data from a Web Server and HTML DOM to display or use the data.

XMLHttpRequest Object : It is an API in the form an object whose methods help in transfer of data between a web browser and a web server.

HTML DOM : When a web page is loaded, the browser creates a Document Object Model of the page.

Image

Create a XMLHttpRequest Object :

var xhttp = new XMLHttpRequest();

Properties of XMLHttpRequest object :

readystate is a property of the XMLHttpRequest Object which holds the status of the XMLHttpRequest.

  • 0: request not initialized
  • 1: server connection established
  • 2: request received
  • 3: processing request
  • 4: request finished and response is ready

onreadystatechange is a property of the XMLHttpRequest Object which defines a function to be called when the readyState property changes.
status is a property of the XMLHttpRequest Object which returns the status-number of a request

  • 200: "OK"
  • 403: "Forbidden"
  • 404: "Not Found"

XMLHttpRequest Object Methods : To send a request to a Web Server, we use the open() and send() methods of the XMLHttpRequest object.

xhttp.open("GET", "content.txt", true);
xhttp.send();

Create a function changeContent() using JavaScript :

function changeContent() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("foo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "content.txt", true);
  xhttp.send();
}

AJAX example to change content of a web page :

<!DOCTYPE html>
<html>
<body>

<div id="foo">
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="changeContent()">Change Content</button>
</div>

<script>
function changeContent() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("foo").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "content.txt", true);
  xhttp.send();
}
</script>

</body>
</html>

The file content.txt should be present in the root directory of the Web Application.

]]> <![CDATA[ JQuery Ajax POST Method ]]> https://www.freecodecamp.org/news/jquery-ajax-post-method/ 66c35942cf1314a450f0d701 Tue, 10 Dec 2019 23:43:00 +0000 Sends an asynchronous http POST request to load data from the server. Its general form is:

jQuery.post( url [, data ] [, success ] [, dataType ] )
  • url : is the only mandatory parameter. This string contains the adress to which to send the request. The returned data will be ignored if no other parameter is specified
  • data : A plain object or string that is sent to the server with the request.
  • success : A callback function that is executed if the request succeeds.it takes as an argument the returned data. It is also passed the text status of the response.
  • dataType : The type of data expected from the server. The default is Intelligent Guess (xml, json, script, text, html). if this parameter is provided, then the success callback must be provided as well.

Examples

$.post('http://example.com/form.php', {category:'client', type:'premium'});

requests form.php from the server, sending additional data and ignoring the returned result

$.post('http://example.com/form.php', {category:'client', type:'premium'}, function(response){ 
      alert("success");
      $("#mypar").html(response.amount);
});

requests form.php from the server, sending additional data and handling the returned response (json format). This example can be written in this format:

$.post('http://example.com/form.php', {category:'client', type:'premium'}).done(function(response){
      alert("success");
      $("#mypar").html(response.amount);
});

The following example posts a form using Ajax and put results in a div

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.post demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<form action="/" id="searchForm">
  <input type="text" name="s" placeholder="Search...">
  <input type="submit" value="Search">
</form>
<!-- the result of the search will be rendered inside this div -->
<div id="result"></div>

<script>
// Attach a submit handler to the form
$( "#searchForm" ).submit(function( event ) {

  // Stop form from submitting normally
  event.preventDefault();

  // Get some values from elements on the page:
  var $form = $( this ),
    term = $form.find( "input[name='s']" ).val(),
    url = $form.attr( "action" );

  // Send the data using post
  var posting = $.post( url, { s: term } );

  // Put the results in a div
  posting.done(function( data ) {
    var content = $( data ).find( "#content" );
    $( "#result" ).empty().append( content );
  });
});
</script>

</body>
</html>

The following example use the github api to fetch the list of repositories of a user using jQuery.ajax() and put results in a div

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery Get demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<form id="userForm">
  <input type="text" name="username" placeholder="Enter gitHub User name">
  <input type="submit" value="Search">
</form>
<!-- the result of the search will be rendered inside this div -->
<div id="result"></div>

<script>
// Attach a submit handler to the form
$( "#userForm" ).submit(function( event ) {

  // Stop form from submitting normally
  event.preventDefault();

  // Get some values from elements on the page:
  var $form = $( this ),
    username = $form.find( "input[name='username']" ).val(),
    url = "https://api.github.com/users/"+username+"/repos";

  // Send the data using post
  var posting = $.post( url, { s: term } );

  //Ajax Function to send a get request
  $.ajax({
    type: "GET",
    url: url,
    dataType:"jsonp"
    success: function(response){
        //if request if made successfully then the response represent the data

        $( "#result" ).empty().append( response );
    }
  });

});
</script>

</body>
</html>

jQuery.ajax()

$.post( url [, data ] [, success ] [, dataType ] ) is a shorthand Ajax function, equivalent to:

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

$.ajax() provides way more options that can be found here

More Information:

For more information, please visit the official website

]]> <![CDATA[ REST API cURL Post Request via Construct 3 GameDev Tool & AJAX Module ]]> https://www.freecodecamp.org/news/rest-api-curl-post-request-via-construct-3-gamedev-tool-ajax-module/ 66d45d99d62e921b49e02cb6 Sun, 23 Jun 2019 02:25:54 +0000 By Andreas Lopez

Hello FreeCodeCamp Reader Community! This Tutorial is made as a little thought experiment but might have some merit for the one or other person.

Please keep in mind that this plugin is making an example by adding a product via Construct 3 Forms + REST API cURL Request to an existing WordPress + WooCommerce installation.

The principles still are valid for other purposes you might have with the REST API, and I included the .c3p on the bottom of this tutorial. There are more elegant ways about feeding the arrays of information to the application, but this is a quick demo as proof-of-concept that I put together within 2 hours and felt like sharing it due to the lack of API and AJAX information for Construct 3.

Here is the entire code in a single screenshot:

Image Construct 3 Source Code Screenshot

The Code Broken Down once we click on 'Create Product' button

  • productjson is an obligatory text field outside of the viewport on the layout.
  • productjson contains our entire payload data pre-formatted as json to allow the REST API to work properly.
  • The payload contains dynamically created content which are the forms in the layout such as product name, sku, price, etc.
  • The AJAX module that I renamed AJAX_Data will set the Request_Header to "Content-Type" with the value of "application/json", because the REST API via cURL request will utilize JSON.
  • The next AJAX_Data with the 'Post to URL' request will be our actual API request.
  • The Tag is merely a name which can be utilized for example to return the values of the request, in the example of my project - as debugging information.
  • The URL will start with your domain, i.e. 'https://www.example.com' The next part of the URL is the API request you would like to make, in our example as per WooCommerce documentation to add a product we need '/wp-json/wc/v3/products?'
  • Last but not least for the URL we need the consumer key and secret in this manner: 'consumer_key=&consumer_secret='
  • The full URL looks like this: "https://www.example.com/wp-json/wc/v3/products?consumer_key=&consumer_secret="
  • Next up is the Data. This is simple since we already have made a text box for this exact purpose. Simply refer to it here, in my example the Data will be 'productjson.Text'.
  • And at the very end, what type of Request. Since we are creating a product we will need 'POST', if we were to retrieve a product we would want a 'GET' request, see the respective documentation of the API you are using.

.c3p File Download:

https://drive.google.com/open?id=16DKq5RJD5tCw57oZPruGk_mtTIAe-Um9

Requirements for my .c3p example

  • WordPress Installation with WooCommerce installed
  • REST API enabled and issued a consumer secret & key
  • Replace my API secret and key example in the code
  • Uploaded an image in the media gallery within WordPress
  • Created a Product Category within WordPress/WooCommerce

If you need a free WordPress environment to play around with, I used https://pantheon.io, under the free plan you can get 2 sandbox sites. Just make sure to install the WP-CORS plugin first and set allowed sites to '*' as seen in their documentation here:
https://pantheon.io/docs/platform-considerations/#cors

https://wordpress.org/plugins/wp-cors/

API Source Information & Relevant C3 Documentation:

WooCommerce REST API Documentation
Construct 3 AJAX Documentation
JSON Validator tool to verify if your JSON is properly formatted.
Original Tutorial I wrote on Construct.net

]]>