AJAX

Ajax (asynchronous Javascript and XML) allows you to upload content from a web page and display it without having to recharge it

Almost any current web page uses this technology: Gmail, Google Maps, YouToube, Facebook, etc

To accomplish this, Ajax builds a layer of additional process between the website and our server

In this way, the requests to the server will be asynchronous, without interfering with the loading process or the actions of the user

While on the browser side, the user can perform actions at any time without being paralyzed waiting for a response from the server

The update of elements is performed through the layer Ajax, dynamically and continuously while the user is still using the page

Elements that make up Ajax

Now let's examine each of the different elements that make up an Ajax application

XMLHTTPRequest

The object XMLHTTPRequest is supported by all modern browsers, starting with Internet Explorer 5+, in addition to Mozilla, Firefox, Konqueror, Opera and Safari

It is supported by a wide variety of platforms, including Microsoft Windows, UNIX / Linux, and Mac OS X

The purpose of this object is to allow Javascript the formulation and sending of HTTP requests to the server

Before using the object, we must call it with its constructor and adapt it according to the peculiarities of each browser

Microsoft was the first to introduce the object, with an implementation of the same as an ActiveX

The rest of browsers have included a native version of the same though implementandolo as a Javascript object

Given that the object depends on what browser and what operating system it is able to use it, you must adapt the code to instancie correctly

function getXMLHTTPRequest() {
    var request = false;

    try {
        //builder for non-Microsoft browsers, for example Mozilla
        request = new XMLHTTPRequest();
    }catch(error1) {
        try {
            //Microsoft browser builder in its oldest versions (IE5, IE6)
            request = new ActiveXObject('Msxml2.XMLHTTP');
        }catch(error2) {
        try {
            //builder for Microsoft browsers in one of its most recent versions
            request = new ActiveXObject('Microsoft.XMLHTTP');
        }catch(error3) {
            //in case the builder fails or the browser does not support the object
            request = false;
        }
    }

    return request;
}

In the example above shows how it would be the call of the constructor depending on the browser if using pure Javascript code

If we use the object navigator that stores information about the browser, we could do a conditional comparison according to the type of browser you just using it as a variable:

function getXMLHTTPRequest() {
    var browser = navigator.appName;
    var request = false;

    try {        
       switch(browser) {
           case 'Netscape': //for IE11, Firefox, Chrome and Safari browsers
           case 'Opera': //for Opera browser
           case 'Edge': //for the Edge browser
               request = new XMLHTTPRequest();
               break;
           case 'Microsoft Internet Explorer': //for Microsoft browsers before IE 10
               try {
                   //Microsoft browser builder in its oldest versions (IE5, IE6)
                  request = new ActiveXObject('Msxml2.XMLHTTP');
               }catch(error1) {
                   try {
                       //builder for Microsoft browsers in one of its most recent versions
                       request = new ActiveXObject('Microsoft.XMLHTTP');
                   }catch(error2) {
                       //in case the builder fails or the browser does not support the object
                       request = false;
                   }
               }
               break;
    }catch(error) {
        //in case the builder fails or the browser does not support the object
        request = false; 
    }

    return request;
}

Properties of the object

• onreadystatechange

  determines which event handler will be called when you change the property readyState the object

• readyState

  is an integer value that reports the status of the request:

  • 0 = uninitialized
  • 1 = cárgandose
  • 2 = loaded
  • 3 = interactive
  • 4 = completed
• responseText

  text string returned by the server that represents the data of the request

• responseXML

  XML document returned by the server that represents the data of the request

• status

  code HTTP status returned by the server

• statusText

  text string returned by the server with a description of the state

Methods of the object

• abort()

  stops the current request

• getAllResponseHeaders()

  returns a text string containing all the headers

• getResponseHeader(x)

  returns a text string with the value of the header x

• open(‘method’, ‘URL’, ‘a’)

  specifies if the method of the request is GET or POST, the destination URL and if the request should be handled asynchronously (if it is true) or synchronous (if it is false)

• send(content)

  sends the request with POST data of the form optional

• setRequestHeader(‘x’, ‘y’)

  defines the parameters with a pair of variable (x) value (y) and is assigned to the header that is sent with the request

Ajax with jQuery

Thanks to jQuery, we can use a code more streamlined and simple that even allows us to forget the type of browser or the system thanks to the methods get(), post(), load() and ajax()

get()

This method requests data to the server with an HTTP GET request

GET is used basically for getting (retrieving) some data from the server

The GET method may return cached data

It has the following syntax:

$.get(URL, callback);

• URL

  is the destination address

• callback

  is an optional parameter that represents the name of the function that will be executed in the event that the application is properly made

$("button").click(function(){
  $.get("test.php", function(data, status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

In the example we can see how when you press the item button will launch a GET request to the server, which in this case works with the PHP language, to the URL test.php and that contains the code that should be executed

If the request was executed successfully, execute the anonymous function that shows the user a warning with the content of the data parameter and status

post()

This method requests data to the server with an HTTP POST request

POST sends data for processing to a specified resource

The POST method never caches data, and is often used to send data along with the request

It has the following syntax:

$.post(URL, data, callback);

• URL

  is the destination address

• data

  is an optional parameter that specifies the data that will be sent along with the application

• callback

  is an optional parameter that represents the name of the function that will be executed in the event that the application is properly made

$("button").click(function(){
  $.post("user.php",
         {
             name: "Donald Trump",
             pass: "**********"
         },
         function(data, status){
             alert("Data: " + data + "\nStatus: " + status);
  });
});

In the example we can see how when you press the item button will launch a POST request to the server, which in this case works with the PHP language, to the URL user.php and that contains the code about the user that should run

If the request was executed successfully, execute the anonymous function that shows the user a warning with the content of the data parameter and status

load()

This method gets content from the server and adds them to an element of our page

It has the following syntax:

$(selector).load(URL, data, callback);

• URL

  is the destination address

• data

  is an optional parameter that specifies the data that will be sent along with the application

• callback

  is an optional parameter that represents the name of the function that will be executed in the event that the application is properly made

  This function must have the following mandatory parameters:

  • responseTxt

    the content of response in case of success

  • statusTxt

    is a text string with the status of the petition, you can be one of the following values:

    • abort
    • error
    • notmodified
    • parsererror
    • success
    • timeout
  • xhr

    contains the object XHTMLRequest, which provides us with additional information about the Ajax request

<!DOCTYPE html>
<html>
<head>
<!-- Inserted by miarroba -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<!-- Inserted by miarroba -->
    <script src='jquery-3.4.1.min.js'></script>
    <script>
        $(function(){
            $('#div01').load('datos.html #p1');
        });
    </script>
</head>

<body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
   <div id='div01'>The content will be loaded here</div>
<!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="https://hosting.miarroba.info/?__muid=&h=1579157&t=1714240998&k=a541ab0039d7dbdb03ce519d9f35be73"></script><noscript><img alt="beacon" border="0" width="1" height="1" src="https://hosting.miarroba.info/?__muid=&h=1579157&t=1714240998&k=a541ab0039d7dbdb03ce519d9f35be73&img=1" /></noscript>
<!-- Inserted by miarroba -->
</body>
</html>

In the example we can see how when it is finished loading the DOM will load the content of datos.html in the element with the id div01in particular, the elements within this file that have the id p1

When you use a selector for the HTML elements that we want to load, jQuery the filter without problems, as we have seen in this example

We can also load other file types, such as for example .txtbut we have to take into account that has to be carried out by the HTTP protocol and not directly from disk (with file://)

In the event that the request fails, we would see The content will be loaded hereinstead of the loaded content

ajax()

This method performs a request asynchronous HTTP

It has the following syntax:

$ajax(URL, settings);

• URL

  is an optional parameter that sets out the destination address, if not specified it will add it within the parameter settings as another value more

• settings

  specifies the data that will be sent along with the application

  Can be specified default values for all Ajax requests using the method ajaxSetup()

$.ajax({
    method: 'POST',
    url: 'teams.php',
    dataType: 'JSON',
    data: {
       action: 'get_groups',
       league : $('#team-league').val(),
       season : $('#team-season').val()
    },
    beforeSend: function(jqXHR, settings) {
    },
    error: function(jqXHR, textStatus, errorThrown){
        alert('The Ajax request has failed');
    },
    dataFilter: function(data, type) {
    },
    success: function(data, textStatus, jqXHR) {
	for (i in data){
            $('#team-group').append('<option value=\"' + data[i].id '\">' + data[i].name + '</option>');
	}
    },
    complete: function(jqXHR, textStatus) {
    }
});

In the example we can see that it will launch a POST request to the server, which in this case works with the PHP language, to the URL teams.php and that contains the code that should be executed

In dataType has been specified that it will receive an object of type JSON and it will use the data provided by the method called get_groups with the parameters league that picks up its value from the element with id team-league and season that picks up its value from the element with id team-season

We have included the callback hooks beforeSend,, error, dataFilter, success and complete for ilustar the order in which they are called

Only has code to errorin case of failure of the request and to successin the case that it is correct

If you are running the callback hook successis recorreran all the data received in JSON format and will be added to the element with id team-group that corresponds to an option element of a select field, this new element will be added at the end of the existing

Parameters settings

• accepts

  assigns a dataType of type MIME, which will be sent in the header of the request

  This header informs the server what type of response will be accepted

  $.ajax({
      accepts: {
          mycustomtype: 'application/xml'
      },
  
      //Instructions to deserialize 'mycustomtype'
      converters: {
          'text mycustomtype': function(result) {
              //Conversion to the required type, our code would go here
  
              return newresult;
          }
      },
   
      //'mycustomtype' returned by the server
      dataType: 'mycustomtype'
  });

  In the example you have assigned a MIME type to work with data in the XML format and the server will return the ‘mycustomtype‘ as we have specified

  To be able to work correctly with the new type, it is necessary to use converters to convert it correctly to the format that we want to return

• async

  by default, all requests are sent asynchronous (set to true this is the default)

  To configure them synchronously you must asignarsele as false

  Applications cross-domain and the dataType: ‘jsonp’ do not support operations synchronous

  Keep in mind that the requests are synchronous may temporarily lock the browser, disabling any actions while the request remains active

  As of jQuery 1.8 , the use of async: false with jqXHR ($.Deferred) is deprecated; you must use the callback success, error or complete in place of the corresponding methods of the object jqXHR such as jqXHR.done()

• beforeSend,

  it is a method of event the Ajax that is executed before the call request that can be used to modify the object jqXHR (in jQuery 1.4.x, XMLHTTPRequest) before it is sent

  Can be used to add custom headers, etc

  The objects jqXHR and settings are passed as arguments

  If it returns false, the application will be cancelled

  As of jQuery 1.5, the options are all calls, regardless of the type of application

• cache

  if it is set to falsewill force the browser not to cache the pages requested

  Established in false will only work correctly with HEAD requests, and GET if it has been added ‘_ = {timestamp}‘ to GET parameters

  The parameter is not required for other types of requests, except in IE8 when a POST to a URL that has already been requested with GET

• complete

  it is a method of event the Ajax that is executed after the events success and error

  This method passes two arguments: jqXHR (in jQuery 1.4.x, XMLHTTPRequest) and a text string with the status of the application (‘success‘, ‘notmodified‘, ‘nocontent‘, ‘error‘, ‘timeout‘, ‘abort‘, or ‘parsererror‘)

  As of jQuery 1.5, you can accept multiple requests and each one will turn

• contents

  determines how jQuery will parse the response, given its content type, supports regular expressions (added in jQuery 1.5)

• contentType

  type of content with which to send the data to the server
  The default value is ‘application/x-www-form-urlencoded; charset=UTF-8‘

  If you pass explicitly a content type to $.ajax(), will always be sent to the server (even if no data is sent)

  From jQuery 1.6 you can pass false to tell jQuery not to set any content-type header

  The W3C specification XMLHttpRequest it says that the charset should always be UTF-8; specifying another charset will not obligaráal browser to change the encoding

  For requests to cross-domain, when it is other than ‘application/x-www-form-urlencoded‘, ‘multipart/form-data‘, or ‘text/plain‘, the browser will perform checks prior to sending the request to the server

• context

  context for all responses of the request, by default, the context is an object that represents the settings used in the call ($.ajaxSettings along with the settings you've entered with $.ajax() )

  For example, specifying a DOM element as the context will make its context to the event callback complete is:

  $.ajax({
      url: 'test.html',
      context: document.body
      }).done(function() {
          $( this ).addClass( "done" );
  });

• converters

  method to convert the returned value to the format that we need them as answer (added in jQuery 1.5)

• crossDomain

  is used to force a request crossDomain (such as JSONP) on the same domain, you must set the value of crossDomain to true

  This allows, for example, the redirection from the server to another domain (added in jQuery 1.5)

• data

  data that is to be send to the server, will be converted to a query string

  Will be added to the url in GET requests

  Query the option processData to avoid this automatic process

  In the case of an array, jQuery serialize multiple values with the same key depending on the value of the setting of traditional

• dataFilter

  method that will be used to handle the response data from the raw XMLHttpRequest

  It accepts two parameters:

  • data

    the raw data returned by the server

  • dataType
• dataType

  type of data expected by the server

  If none is specified, jQuery will try to inferirlo based on the MIME type of the response (MIME type XML generate XML, in 1.4 JSON will generate a JavaScript object, in 1.4 script will execute the script, and any other type will be returned as a string)

  The available types (and the result passed as the first argument to your callback is accepted) are:

  • xml

    returns an XML document that can be processed via jQuery

  • html

    returns an HTML document as text without format; the labels of included script will be evaluated when inserted in the DOM

  • script

    evaluates the response as JavaScript and it is returned as plain text

    Disables caching by adding a parameter in the query string ‘_ = {timestamp}‘ to the URL unless the cache option is set as true

    In this case the POST will be converted to GET to the requests of remote-domain

  • json

    evaluates the response as JSON and returns a JavaScript object

    The json requests callback placeholder, for example ‘?callback=?‘, is made using JSONP unless the application includes jsonp: false in the configuration of the request

    The JSON data is parsed in a strict sense; any JSON with incorrect format will be rejected and will throw an error

    As of jQuery 1.9, we also reject the answers empty; the server should return a response null or {} in its place (see json.org for more information on the correction of the JSON format)

  • jsonp

    load in a block-JSON-using JSONP

    Adds ‘?callback=?‘ at the end of your URL to specify the callback of the request

    Disables caching by adding a parameter in the query string ‘_ = {timestamp}‘ to the URL unless the cache option is set as true

  • text

    string of text without format

  • multiple values separated by spaces

    as of jQuery 1.5, it is possible to convert a dataType received in the header Content-Type the necessary

    For example, if you want a string of text to be treated as XML, use ‘text xml‘

    You can also make a request JSONP, received as text, and will be interpreted by jQuery as XML: ‘jsonp text xml‘

    Similarly, the chain-shortened ‘jsonp xml‘ first, it will attempt to convert from jsonp to xml, and, failing that, convert from jsonp to text, and then text-to-xml

• error

  event Ajax that will be called if the request fails

  As of jQuery 1.5, supports an array of methods and each one will be called per turn

  It will be called with requests cross-domain script and JSONP

  Receives the following parameters:

  • jqXHR

    (in jQuery 1.4.x, XMLHttpRequest)

  • text string

    describes the type of error that occurred

    Supports the following values:

    • null

      it is not a string, it is the literal null

    • timeout
    • error
    • abort
    • parsererror
  • errorThrown

    subject to certain exceptions, it is optional

    When an HTTP error occurs, errorThrown a party receives text of the HTTP status, such as ‘Not Found‘ or ‘Internal Server Error‘ with this parameter we can replace your options and configure it

• global

  enables the use of several global events and Ajax
  Its default value is true

  Use false to avoid that the global events ajaxStart or ajaxStop are assets

• headers

  additional headers sent along with the request using XMLHttpRequest, able to modify the object by changing the value X-Requested-With: XMLHttpRequest

  It is also possible to change the value with the event, Ajax beforeSend, (added in jQuery 1.5)

• ifModified

  check the value of header Last-Modified to see if the last request was successful

  Its default value is falseignore the header

  Since jQuery 1.4, it also verifies the value of ‘etag‘ specified by the server to catch unmodified data

• isLocal

  allows the current environment to be recognized as ‘local‘ (for example, the file system), even if jQuery does not recognize it as such by default

  The following protocols are currently recognized as local:

  • file
  • *-extension
  • widget

  If the configuration of isLocal needs to be modified, it is recommended to do it with the method $.ajaxSetup() (added in jQuery 1.5.1)

• jsonp

  overrides the response function of the requests JSONP

  This value will be used in place of the ‘callback‘ in the query string of the url when you add ‘callback=?‘

  For example {jsonp:’onJSONPLoad’} return to the server ‘onJSONPLoad=?‘

  As of jQuery 1.5, setting jsonp to false to avoid that jQuery add the string ‘?callback‘ to the URL or attempting to use ‘=?‘ to perform the transformation

  In this case, you must explicitly set the configuration to jsonpCallback

  For example, { jsonp: false, jsonpCallback: ‘callbackName’ }

  For safety reasons, if the target receptor is not trusted, it is recommended to configure the property jsonp to false

• jsonpCallback

  specifies the name of the function to return a request JSONP

  This value will be used instead of the random name automatically generated by jQuery

  It is recommended to let jQuery generate this unique name, since that will facilitate the management of requests and will be able to better control the callbacks and exceptions error

  It is possible to specify the return of the request when it is enabled the browser cache for GET requests

  As of jQuery 1.5, you can also use a function to set it up, in which case the value of jsonpCallback it is set with the return value of that function

• method

  HTTP method that is utilirá in the request (for example ‘POST‘, ‘GET‘, ‘PUT‘ (added in jQuery 1.9.0)

• mimeType

  mime type that overrides the mime type XHR (added in jQuery 1.5.1)

• password

  password that will be used with XMLHttpRequest as a response to a request of authentication of HTTP access

• processData

  by default, the data passed to data (anything that is not a string) will be processed and transformed to a query string, which will be set to the default content type ‘application/x-www-form-urlencoded‘

  To send a DOMDocument or other data is not processed, set it to false

• scriptAttrs

  defines additional attributes for use in requests ‘script‘ or ‘jsonp‘

  Where:

  • key

    represents the name of the attribute

  • value

    is the value of the attribute

  When you receive this object, you will force the use of the script tag transport

  For example, can be used to declare attributes nonce, integrity or crossorigin to meet the requirements of the security policy of the content (added in jQuery 3.4.0)

• scriptCharset

  only used with the ‘script‘ transport

  Defines the attribute charset in the script tag used in the request

  It is used when the character set on the local page is not the same as that of the remote script

  Alternatively, the attribute charset it can be defined with scriptAttrs, which will also ensure the use of transport ‘script‘

• statusCode

  numeric codes HTTP and functions that will be called as a response to that code

  For example, when the response status is a 404, it will display a prompt to the user:

  $.ajax({
      statusCode: {
          404: function() {
              alert( "Page not found" );
          }
     }
  });

  If the request is successful, the status code of the function will take the same parameters as the return of the petition to be correct; if an error occurs (including the redirection 3xx), it will take the same parameters as the error callback (added in jQuery 1.5 )

• success

  event Ajax call if the request is correct

  It has the following arguments:

  • data

    data returned by the server, formatted according to the parameter dataType or the callback function dataFilterif one has been defined

  • textStatus

    text string that describes the state

  • jqXHR

    (in jQuery 1.4.x, XMLHttpRequest)

  As of jQuery 1.5, supports an array of methods and each one will be called per turn

• timeout

  sets a timeout (in milliseconds) for the request
  The value 0 means no timeout

  This will override any global timeout set with the $.ajaxSetup()

  The timeout period begins when the call is made to $.ajax

  If there are other requests in progress and the browser has no connections available, it is possible that any request to time out before it can be sent

  As of jQuery 1.4.x, the object XMLHttpRequest it will take the state to invalid if the request times out

  To access any field of the object can generate an exception

  Only in Firefox 3.0+, applications, script and JSONP are not cancelled by a timeout; the script will run even if it is received after a timeout

• traditional

  the value will true if you want to use the traditional style of parameters serialized

• type

  alias for method. Use type for versions of jQuery prior to 1.9.0

• url

  string that contains the URL to which to send the request

• username

  user name that will be used with XMLHttpRequest in response to a request of authentication of HTTP access

• xhr

  return of the request to create the object XMLHttpRequest

  Its default value is ActiveXObject when available (IE), XMLHttpRequest otherwise

  Sobreescribalo to provide your own implementation of XMLHttpRequest or any improvement own

• xhrFields

  defines the native object XHR (added in jQuery 1.5.1 )

  For example, can be used to define withCredentials to true for requests cross-domain, if necessary:

  $.ajax({
      url: a_cross_domain_url,
      xhrFields: {
          withCredentials: true
      }
  });

  In jQuery 1.5, the property withCredentials it is not native to XHR and therefore, the requests CORS (Cross-Origin Resource Sharing) that the require be ignored

  For this reason, I recommend using jQuery 1.5.1+ should you require to be used