jQuery AJAX

The two most common methods for sending requests to the server are GET and POST. It's important to understand the proper use of each.

The GET method should only be used when it's necessary to retrieve data from the server, not to change data on the server. For example, a search query on a page could be a GET request. GET requests can be saved in the browser's cache memory, which can cause unpredictable behaviors if you don't expect them. GET requests send all their data within the query string.

The POST method is most often used to send or change data on the server. For example, when a user registers for a certain service, user data is saved on the server. POST requests are usually not saved in the browser's cache memory, and while the query string may be part of the URL, the data is sent separately.

Ajax typically requires instructions about the type of data it can expect to be returned from an Ajax request. In some cases, the data type is indicated by the method name, and in other cases, it may serve as part of the object.

Ajax data types include:

• Text - for transmitting text (string) 
• Html - for transmitting HTML code that will be used on the web 
• Script - for adding scripts to the web page 
• Json – for transmitting JSON-formatted data which may include strings, numbers, arrays, and objects 
• Jsonp – for transmitting JSON data from a different domain 
• Xml – for transmitting data using traditional XML

The JSON format is most commonly used because it offers the greatest flexibility. It's particularly useful for sending data and HTML code

Since Ajax calls are by default asynchronous, the server's response is not immediately available. Responses can only be processed using a callback function. For example, the following code will not work.

<script>
   var response;
   $.get( "mailer.aspx", function( r ) {
      response = r;
   });
   console.log( response ); // undefined
</script>

Instead of the above, it is necessary to pass a callback function within the request that will be executed after the request is successful.

$.get( "mailer.aspx", function( response ) {
   console.log( response ); // server response
});

When the server returns the request, it is possible to access the returned data if they exist.

JSON (JavaScript Object Notation) is a textual format used for data exchange. It is used as an alternative to XML and is easy to understand. JSON uses JavaScript syntax but the format itself is text, like XML.

Characteristics of the JSON format are as follows:

• The object is enclosed within curly { } brackets
• It consists of key:value pairs (the key or name is written in double quotes) 
• Pairs are separated by commas 
• Values can be a string under double quotes, a number with a dot as a decimal separator, true/false, null, an array, or a JSON object
• An array is enclosed in square [ ] brackets and consists of a sequence of values separated by commas

JSON is designed to easily convert into a string containing JSON and vice versa. Look at how the following JavaScript object is formatted in JSON format.

JavaScript:

// Javascript Object
<script>
   function Person() {
     this.FirstName = "John";
     this.LastName = "Doe";
     this.Phones = ["123456789", "0987654321"];
     this.Residence = {
       private: new Address("Street 1", 1),
       business: new Address("Street 2", 50)
     }
   }
 
   function Address(street, number) {
     this.Street = street;
     this.Number = number;
   }
</script>

JSON:

{
  "FirstName": "John",
  "LastName": "Doe",
  "Phones": [
    "123456789",
    "0987654321"
  ],
 
  "Address": {
    "Private": {
      "Street": "Street 1",
      "Number": 1
      },
    "Business": {
      "Street": "Street 2",
      "Number": 50
    }
  }
}

As seen in the above example, the JSON format is syntactically identical to the code for creating JavaScript objects. Thanks to these similarities, JavaScript scripts can use standard functions to convert JSON data into JavaScript objects.

Ajax requests are usually limited to the same protocol (http or https), the same port, and the same domain that makes the request. Thanks to jQuery's Ajax methods, these restrictions do not apply to scripts that are loaded with them.

Another exception is requests that are sent to a JSONP service on a different domain. In the case of JSONP, the provider agrees to respond to the request with a script that can be loaded into the page using a <script> element. This script will contain the requested data wrapped in a callback function