{"id":9150,"date":"2020-07-29T08:59:28","date_gmt":"2020-07-29T08:59:28","guid":{"rendered":"https:\/\/www.experfy.com\/blog\/?p=9150"},"modified":"2023-11-24T14:13:12","modified_gmt":"2023-11-24T14:13:12","slug":"ajax-and-javascript-with-examples","status":"publish","type":"post","link":"https:\/\/www.experfy.com\/blog\/software-ux-ui\/ajax-and-javascript-with-examples\/","title":{"rendered":"AJAX and JavaScript with examples"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Ajax stands for \u201cAsynchronous JavaScript + XML\u201d (although JSON is mostly used today) and is a group of technologies designed to dynamically create web pages. By using AJAX we improve the quality of interactivity with the user, with the desire to resemble desktop applications as much as possible (according to the speed of interaction). The idea behind Ajax is to load the webpage of the Web application only once, and that any further communication with the server is done asynchronously without blocking the interface and without reloading the entire page.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Asynchronous behavior means that after the user interacts with the interface, the request to the server accepts a JavaScript and XMLHttpRequest object, which in the background sends requests to the server, displaying the results when available, while the user can continue working in the meantime.<\/p>\n\n\n\n

Ajax is not without flaws, as Ajax pages dynamically generate the biggest problem for sites is search engine optimization. Search engines are often unable to interpret the site well, causing problems with site indexing. A similar problem exists with Page Traffic Analysis Tools, as a user can spend all day on a single Ajax page, and classic traffic analysis tools will interpret this as a single pageview.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

XMLHttpRequest object<\/h2><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

XMLHttpRequest is the foundation of AJAX and is a JavaScript object used to send HTTP requests. Designed by Microsoft and then accepted by other major search engines and in 2014 it became standard in W3C.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

XHR object properties<\/h2><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n

readyState<\/strong><\/p>\n\n\n\n

The numerical value that describes the state of an object The possible states are: 0, 1, 2, 3 and 4
state 0: The initial value of the object after creation<\/p>\n\n\n\n

<\/ins>
state 1: open () method successfully executed; request headsets can be set at this stage with the setRequestHeader () function
state 2: all response heads have arrived
condition 3: starts reading the answer data part
condition 4: The response data part was loaded successfully or an error occurred<\/p>\n\n\n\n

responsType<\/strong><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n

The text data corresponding to the type of server response the possible values are: \u201c\u201d, \u201carraybuffer\u201d, \u201cblob\u201d, \u201cdocument\u201d, \u201cjson\u201d and \u201ctext\u201d<\/p>\n\n\n\n

response<\/strong><\/p>\n\n\n\n

A property that accesses the server\u2019s response body<\/p>\n\n\n\n

responseText<\/strong><\/p>\n\n\n\n

Returns the server response as a string<\/p>\n\n\n\n

responseXML<\/strong><\/p>\n\n\n\n

Returns the server response as XML data<\/p>\n\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n

status<\/strong><\/p>\n\n\n\n

A numeric value that corresponds to the HTTP hour of the server response. We are most interested in status 200 \u2013 an indication that the request has been successfully processed<\/p>\n\n\n\n

statusText<\/strong><\/p>\n\n\n\n

A text message that responds to an HTTP response server message (e.g., \u201cNot Found\u201d or \u201cOK\u201d)<\/p>\n\n\n\n

timeout<\/strong><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n

The numeric value after which the HTTP request will end; the timeout value should be slightly higher than the time provided for response generation; the responseText property value will then be null<\/p>\n\n\n\n

withCredentials<\/strong><\/p>\n\n\n\n

A Boolean value that defines whether cross-site Access-Control requires credentials such as cookies, an authorized header, or a TLS certificate.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

XHR object methods<\/h2><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n

abort ()<\/strong><\/p>\n\n\n\n

Cancels the current request<\/p>\n\n\n\n

getAllResponseHeaders ()<\/strong><\/p>\n\n\n\n

Returns all header information<\/p>\n\n\n\n

getResponseHeader ()<\/strong><\/p>\n\n\n\n

Returns specific header information<\/p>\n\n\n\n

open (method, url, async, uname, PSWD)<\/strong><\/p>\n\n\n\n

The function that initiates the HTTP request and the parameters it accepts are:
Method: POST, GET, HEADER, ROAD, DELETE
URL is the URL of the requesting server
Asynchrony can be true or false depending on whether the request realizes asynchronous or synchronous
Username and password are optional arguments that are specified if needed to access the server<\/p>\n\n\n\n

send ()<\/strong><\/p>\n\n\n\n

The method by which data is sent to the server (if we have something to send)<\/p>\n\n\n\n

setRequestHeader (header, value)<\/strong><\/p>\n\n\n

Adds a label\/value pair in the header when sending data. It must be called after the open () method and before the send () method<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

Procedure<\/h2><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n

a) Creating an object<\/strong><\/p>\n\n\n\n

It is created by invoking the XMLHttpRequest constructor:<\/p>\n\n\n\n

var xhr = new XMLHttpRequest();<\/code><\/pre>\n\n\n\n
b) Event handler and a callback function<\/strong><\/p>\n\n\n\n
onreadystatechange<\/strong><\/p>\n\n\n\n
This mode is the oldest and is supported in all browsers. EventHandler monitors every readyState and triggers every state change.<\/p>\n\n\n\n
xhr.onreadystatechange = function(){\n    if (this.readyState == 4 && this.status == 200) {\n       \/\/ Process the server response here.\n    }\n};<\/code><\/pre>\n\n\n\n
loadstart<\/strong><\/p>\n\n\n\n
The process started \u2013 Once \u2013 First<\/p>\n\n\n\n
progress<\/strong><\/p>\n\n\n\n
Process in progress \u2013 zero or higher \u2013 When the loadstart is complete.<\/p>\n\n\n\n
error<\/strong><\/p>\n\n\n\n
With this eventListener, we listen to network-level errors:<\/p>\n\n\n\n
xhr.addEventListener(error, function(e) {\n  var error = e.error;\n  console.log(error);\n  });<\/code><\/pre>\n\n\n\n
abort<\/strong><\/p>\n\n\n\n
The process is interrupted. \u2013 Once or not<\/p>\n\n\n\n
load<\/strong><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n
onreadystatechange \u201ctriggers\u201d an event at every change of state of an object, however, we are usually only interested when the state of an object changes to a value: readyState == 4. If you do not care about information about other states and want to reduce the \u201ctrigger\u201d of unnecessary events, it may be better newer and more modern approach when only one load event is generated when the server responds:<\/p>\n\n\n\n
xhr.addEventListener(\"load\", function(){\n    if (this.status < 400) {\n      \/\/ Process the server response here.\n    } else {\n      new Error(\"Request failed: \" + xhr.statusText);\n}, false);<\/code><\/pre>\n\n\n\n
loadend<\/strong><\/p>\n\n\n\n
The entire process is completed \u2013 Once \u2013 Activated after some error, deliberate abortion or when the load is completed successfully.<\/p>\n\n\n\n
c) Defining Connection Parameters<\/strong><\/p>\n\n\n\n
After creating the XMLHttpRequest object, it is necessary to define the basic parameters for communication. This method does not send the request to the webserver but saves its arguments for sending the request later.<\/p>\n\n\n\n
xhr.open(method,url,async,username,password)<\/code><\/pre>\n\n\n\n
Description of method arguments:<\/p>\n\n\n\n
Method<\/p>\n\n\n\n
The methods that can be used are\u00a0POST, GET, HEADER, PUT, DELETE.<\/strong><\/p>\n\n\n\n
The\u00a0GET\u00a0<\/strong>method sends the request and data through the URL, the request can be cached, the request remains in the browser history and can be bookmarked. The disadvantage is the limited amount of data that can be passed through the URL, as well as the visibility of the data in the URL (read \u201cinsecurity\u201d). This is why this method is not used to send important data.<\/p>\n\n\n\n
The\u00a0POST\u00a0<\/strong>method does not send data through a URL but through the send () attribute of the method, so it is more secure and is used when sending confidential information (usually user-entered). The\u00a0POST\u00a0<\/strong>method is also used when it is necessary to send a larger amount of data with the consideration that it does not have a limited data size, as is the case with the\u00a0GET\u00a0<\/strong>method. However, with this method, the request cannot be cached, it does not remain in browser history, nor can it be bookmarked.
The\u00a0HEAD\u00a0<\/strong>method requests the header server from the specified\u00a0URL\u00a0<\/strong>without the contents of the document (used, for example, to check the date of change of resources).<\/p>\n\n\n\n
URL<\/strong>
URL is the URL of the requesting server<\/p>\n\n\n\n
Asynchrony requires
<\/strong>This parameter defines the asynchrony of the request. It can be true or false. If omitted or defined as TRUE then the request is asynchronous.<\/p>\n\n\n\n
REMARK:<\/strong><\/em>
The XMLHttpRequest request may also be synchronous, but it is not recommended because if the north does not send a response, the send () method may block the browser. There is no \u201cmagic button\u201d that stops XMLHttpRequest, no maximum waiting time, so the JavaScript engine does not allow the request to be stopped once sent.<\/em><\/strong><\/p>\n\n\n\n
User Name and Password
<\/strong>Username and password are optional arguments that are specified if needed to access the server<\/p>\n\n\n\n
d) Defining header information<\/strong><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n
Syntax<\/strong>
With the setRequestHeader () method, we can define some values in the request header. It is most commonly used when sending data to a server using the POST method. The method parameter is in the form of a key, value pair.<\/p>\n\n\n\n
xhr.setRequestHeader(key, value);<\/code><\/pre>\n\n\n\n
REMARK:
The setRequestHeader () method must be located between the open () and send () methods.<\/em><\/strong><\/p>\n\n\n\n
Use<\/strong>
Most often, the parameter of the \u201csetRequestHeader ()\u201d method sends data in which way the encoded data is sent.<\/p>\n\n\n\n
xhr.setRequestHeader(\"Content-type\", \"application\/x-www-form-urlencoded\");<\/code><\/pre>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n
What is encoding?
<\/strong>There are three ways that it can be encoded:<\/p>\n\n\n\n
application\/x-www-form-urlencoded<\/strong><\/p>\n\n\n\n
By default, all characters are encoded before sending (spaces are converted to \u201c+\u201d symbols, and special characters are converted to ASCII HEX values. Actually, a query string consisting of name\/value pairs separated by \u201c&\u201d, where names separated by values are equal to \u201c=\u201d if there are special characters, they are transferred to ASCII HEX values.<\/p>\n\n\n\n
multipart\/form-data<\/strong><\/p>\n\n\n\n
No characters are encoded. This value is required when using templates with control to upload files<\/p>\n\n\n\n
text\/plain<\/strong><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n
Spaces are converted to \u201c+\u201d symbols, but there are no other special characters<\/p>\n\n\n\n
The content-type \u201capplication \/ x-www-form-urlencoded\u201d is used in most cases, except for sending large amounts of binary data or text containing non-ASCII characters because it is inefficient for this purpose. And \u201cmultipart \/ form-data\u201d should be used to submit forms containing files, non-ASCII data, and binary data.<\/p>\n\n\n\n
e) Preparing data for submission<\/strong><\/p>\n\n\n\n
In the case of sending data, it is necessary to prepare the data in a format that is suitable for sending.<\/p>\n\n\n\n
Serializing data in query string<\/strong><\/p>\n\n\n\n
a) Simple information<\/strong><\/p>\n\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n
If the data is simple, it is sent as a query string consisting of name\/value pairs separated by the character \u201c&\u201d, where the names are separated from the value by a character equal to \u201c=\u201d, and if there are special characters they are transferred to ASCII HEX values.<\/p>\n\n\n\n
var data = \"MyVariableOne=ValueOne&MyVariableTwo=ValueTwo\";<\/code><\/pre>\n\n\n\n
b) Object<\/strong><\/p>\n\n\n\n
If it is a JSON object, it must first be moved to a string.<\/p>\n\n\n\n
var arr = JSON.stringify([ 'foo', 'bar' ]);  \/\/ Returns: [\"foo\",\"bar\"]<\/code><\/pre>\n\n\n\n
Then encode the resulting string:<\/p>\n\n\n\n
var encoArr = encodeURIComponent(arr)  \/\/ Returns: %5B%22foo%22%2C%22bar%22%5D\nvar url = 'http:\/\/example.com\/?data=' + encoArr ;<\/code><\/pre>\n\n\n\n
You can check decoding and encoding through online services such as\u00a0https:\/\/www.freeformatter.com\/url-encoder.html<\/a>\u00a0or\u00a0http:\/\/www.url-encode-decode.com\/<\/a>.<\/p>\n\n\n\n
Example<\/strong>
This snippet has similar functionality to the jQuery serialize () method<\/p>\n\n\n\n
function serialize(form) {\n    var field, l, s = [];\n    if (typeof form == 'object' && form.nodeName == \"FORM\") {\n        var len = form.elements.length;\n        for (var i=0; i<len; i++) {\n            field = form.elements[i];\n            if (field.name && !field.disabled && field.type != 'file' && field.type != 'reset' && field.type != 'submit' && field.type != 'button') {\n                if (field.type == 'select-multiple') {\n                    l = form.elements[i].options.length;\n                    for (var j=0; j<l; j++) {\n                        if(field.options[j].selected)\n                            s[s.length] = encodeURIComponent(field.name) + \"=\" + encodeURIComponent(field.options[j].value);\n                    }\n                } else if ((field.type != 'checkbox' && field.type != 'radio') || field.checked) {\n                    s[s.length] = encodeURIComponent(field.name) + \"=\" + encodeURIComponent(field.value);\n                }\n            }\n        }\n    }\n    return s.join('&').replace(\/%20\/g, '+');\n}<\/code><\/pre>\n\n\n\n
Serialize data into a series
<\/strong>This snippet has similar functionality to the jQuery serializeArray () method<\/p>\n\n\n\n
function serializeArray(form) {\n    var field, l, s = [];\n    if (typeof form == 'object' && form.nodeName == \"FORM\") {\n        var len = form.elements.length;\n        for (var i=0; i<len; i++) {\n            field = form.elements[i];\n            if (field.name && !field.disabled && field.type != 'file' && field.type != 'reset' && field.type != 'submit' && field.type != 'button') {\n                if (field.type == 'select-multiple') {\n                    l = form.elements[i].options.length;\n                    for (j=0; j<l; j++) {\n                        if(field.options[j].selected)\n                            s[s.length] = { name: field.name, value: field.options[j].value };\n                    }\n                } else if ((field.type != 'checkbox' && field.type != 'radio') || field.checked) {\n                    s[s.length] = { name: field.name, value: field.value };\n                }\n            }\n        }\n    }\n    return s;\n}<\/code><\/pre>\n\n\n\n
f) Submit request<\/strong><\/p>\n\n\n\n
The initiation of connecting a prepared and defined request to the server is done with the send () method. We can use the send method attribute to pass data to the server. Exactly with the POST method, this is the main principle of sending data. We simply send all the \u201cpreparation\u201d data as an attribute of the \u201csend\u201d method. However, since the GET method sends all information through a URL, then we do not use this option to send it through an attribute, but instead, define the attribute with a null send (null) or simply not fill it.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n
g) Server response<\/strong><\/p>\n\n\n\n
The status of the request<\/strong>
The status of our request as a server response is accessed using the XMLHttpRequest property of the status object<\/p>\n\n\n\n
xhr.status<\/code><\/pre>\n\n\n\n
and status text with:<\/p>\n\n\n\n
xhr.statusText<\/code><\/pre>\n\n\n\n
String answer
<\/strong>The server response in the form of a \u201cstring string\u201d is accessed via the responseText property<\/p>\n\n\n\n
xhr.responseText<\/code><\/pre>\n\n\n\n
REMARK:
XMLHttpRequest does not have a direct response server property in JSON format, so it is necessary to parse the response:
JSON.parse (xhr.responseText);<\/em><\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n
XML response<\/strong><\/p>\n\n\n\n
The server response that is some XML is accessed with responseXML<\/p>\n\n\n\n
xhr.responseXML<\/code><\/pre>\n\n\n\n
HTTP response server header<\/strong>
Access to all headers returned by the webserver is via the getResponseHeader () method:<\/p>\n\n\n\n
xhr.getResponseHeader()<\/code><\/pre>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
Examples<\/h2><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n
EXPLANATION:
In the examples, I use the online resource myjson.com to quickly generate REST endpoints.<\/em><\/strong><\/p>\n\n\n\n
a) Getting data from the server<\/strong><\/p>\n\n\n\n
Example No.1<\/strong>
I access the JSON file saved at\u00a0http:\/\/myjson.com\/<\/a>\u00a0through endpoint:\u00a0https:\/\/api.myjson.com\/bins\/erxi9<\/a>. With ajax request towards the endpoint, I get the following content:<\/p>\n\n\n\n
[\n    {\n    name: \"Alen\",\n    position: \"CEO\"\n    },\n    {\n    name: \"John\",\n    position: \"Director\"\n    },\n    {\n    name: \"Mark\",\n    position: \"Worker\"\n    },\n    {\n    name: \"Hasan\",\n    position: \"Worker\"\n    },\n    {\n    name: \"Deen\",\n    position: \"Worker\"\n    }\n]<\/code><\/pre>\n\n\n\n
This example shows all persons who satisfy the chosen position:<\/p>\n\n\n\n
HTML<\/strong><\/p>\n\n\n\n
<label for=\"position\">Select Position<\/label>\n<select id=\"position\">\n  <option value=\"ceo\">CEO<\/option>\n  <option value=\"director\">Director<\/option>\n  <option value=\"worker\">Worker<\/option>\n<\/select>\n<br><br><br>\n<div id=\"btn1\" class=\"btn\">Get data from server<\/div>\n<div id=\"output\"><\/div><\/code><\/pre>\n\n\n\n
SCSS<\/strong><\/p>\n\n\n\n
.btn {\n  border: 1px solid black;\n  padding: 8px;\n  display: inline-block;\n  background-color:red;\n  color:white;\n  margine: 0 auto;\n  display: block;\n  text-align:center;\n  cursor: pointer;\n  \n}\n#output {\n  font-size: 24px;\n  padding: 15px;\n  text-align: center;\n}<\/code><\/pre>\n\n\n\n
Babel<\/strong><\/p>\n\n\n\n
var output = document.getElementById(\"output\");\nvar btn = document.getElementById(\"btn1\");\nvar select = document.getElementById(\"position\");\n\n\/* the part where the selected option from the dropdown is stored *\/\nvar selectPosition= \"director\";\nselect.addEventListener(\"change\", function(){\n  selectPosition= select.options[select.selectedIndex].value;\n}) \t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n
var output = document.getElementById(\"output\");\nvar btn = document.getElementById(\"btn1\");\nvar select = document.getElementById(\"position\");\n\n\/* the part where the selected option from the dropdown is stored *\/\nvar selectPosition= \"director\";\nselect.addEventListener(\"change\", function(){\n  selectPosition= select.options[select.selectedIndex].value;\n}) \n\n\/* Event handler on the button *\/\nbtn.addEventListener(\"click\", function() {\n  \/* Cleaning the screen *\/\n  output.innerHTML=\"\";\n  \/* New XMLHttpRequest object *\/\n  var httpRequest = new XMLHttpRequest();\n  \/* EventHandler for ajax request *\/\n  httpRequest.addEventListener(\"load\", function(){\n    if (this.status < 400) {\n      \/* Data obtained by ajax *\/\n      var myObj = JSON.parse(this.responseText);\n      \/* Print only selected positions *\/\n      var SelectArray= myObj.filter(function (obj) {\n          return obj.position== selectPosition;    \n      });\n       for (let select in SelectArray) {\n          output.innerHTML += SelectArray[select].position + \" \" + SelectArray[select].name+ \"<br>\";\n      }\n    } else {\n      var errors= new Error(\"Request failed: \" + httpRequest.statusText);\n      console.log(\"Server is OK but some transport error\");\n    }\n  }, false);\n  \/* Opening a connection and defining parameters *\/\n  httpRequest.open(\"GET\", \"https:\/\/api.myjson.com\/bins\/erxi9\", true);\n  httpRequest.send();\n}, false )<\/code><\/pre>\n\n\n\n
Example No.2<\/strong>
For this example, I use the generated endpoint\u00a0https:\/\/api.myjson.com\/bins\/amz5t<\/a>.<\/p>\n\n\n\n
<p>(Titles obtained by AJAX)<\/p>\n<h1 id=\"title\"><\/h1>\n<h3 id=\"description\"><\/h3>\n<hr>\n<div>\n  <p>(Links to articles were provided by AJAX)<\/p> \n  <div id=\"text\"><\/div>\n<\/div><\/code><\/pre>\n\n\n\n
TypeScript<\/strong><\/p>\n\n\n\n
function ajax_get(url, callback) {\n    var xmlhttp = new XMLHttpRequest();\n    xmlhttp.onreadystatechange = function() {\n        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {\n            try {\n                var data = JSON.parse(xmlhttp.responseText);\n            } catch(err) {\n                console.log(err.message + \" in \" + xmlhttp.responseText);\n                return;\n            }\n            callback(data); \n        }\n    };\n    xmlhttp.open(\"GET\", url, true);\n    xmlhttp.send();\n}\n\najax_get('https:\/\/api.myjson.com\/bins\/amz5t', function(data){\n  var eNaslov = document.getElementById(\"title\");\n  var eOpis = document.getElementById(\"description\");\n  var eArtikli = document.getElementById(\"text\");\n  var serverArtikli = '';\n  serverArtikli += \"<ul>\";\n  for (var i=0; i < data[\"articles\"].length; i++) {\n    serverArtikli += '<li><a href=\"' + data[\"articles\"][i][\"url\"] + '\">' + data[\"articles\"][i][\"title\"] + \"<\/a><\/li>\";\n  }\n  serverArtikli += \"<\/ul>\";\n  \n  eNaslov.innerHTML = data[\"title\"]; \/\/\n  eOpis.innerHTML = data[\"description\"];\n  eArtikli.innerHTML = serverArtikli;\n})<\/code><\/pre>\n\n\n\n
b) Uploading data to the server<\/strong><\/p>\n\n\n\n
Example<\/strong><\/p>\n\n\n\n
var newName = 'John Smith';\nvar xhr = new XMLHttpRequest();\n \nxhr.open('POST', 'myservice\/username?id=some-unique-id');\nxhr.setRequestHeader('Content-Type', 'application\/x-www-form-urlencoded');\nxhr.onload = function() {\n    if (xhr.status === 200 && xhr.responseText !== newName) {\n        alert('Something went wrong.  Name is now ' + xhr.responseText);\n    }\n    else if (xhr.status !== 200) {\n        alert('Request failed.  Returned status of ' + xhr.status);\n    }\n};\nxhr.send(encodeURI('name=' + newName));<\/code><\/pre>\n\n\n\n
Example: submitting form information<\/strong><\/p>\n\n\n\n
document.getElementById(\"myform\").onsubmit = function(e) {\n   e.preventDefault();\n   var f = e.target,\n       formData = '',\n       xhr = new XMLHttpRequest();\n   \/\/ fetch form values\n   for (var i = 0, d, v; i < f.elements.length; i++) {\n       d = f.elements[i];\n       if (d.name && d.value) {\n           v = (d.type == \"checkbox\" || d.type == \"radio\" ? (d.checked ? d.value : '') : d.value);\n           if (v) formData += d.name + \"=\" + escape(v) + \"&\";\n       }\n   }\n   xhr.open(\"POST\", f.action);\n   xhr.setRequestHeader(\"Content-Type\",\"application\/x-www-form-urlencoded; charset=UTF-8\");\n   xhr.send(formData);\n}<\/code><\/pre>\n\n\n\n
c) Uploading files to the server<\/strong><\/p>\n\n\n\n
var file = document.getElementById('test-input').files[0];\nvar xhr = new XMLHttpRequest();\nxhr.open('POST', 'myserver\/uploads');\nxhr.setRequestHeader('Content-Type', file.type);\nxhr.send(file);<\/code><\/pre>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"
Ajax stands for \u201cAsynchronous JavaScript + XML\u201d and is a group of technologies designed to dynamically create web pages. By using AJAX we improve the quality of interactivity with the user, with the desire to resemble desktop applications as much as possible <\/p>\n","protected":false},"author":685,"featured_media":14487,"comment_status":"open","ping_status":"open","sticky":false,"template":"single-post-2.php","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[200],"tags":[499,424,500],"ppma_author":[3475],"class_list":["post-9150","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software-ux-ui","tag-ajax","tag-javascript","tag-xml"],"authors":[{"term_id":3475,"user_id":685,"is_guest":0,"slug":"alen-ibric","display_name":"Alen \u0130bri\u00e7","avatar_url":"https:\/\/www.experfy.com\/blog\/wp-content\/uploads\/2020\/04\/medium_7b9fc7fb-1f17-4554-9f19-b942b50e055c-150x150.jpg","user_url":"http:\/\/www.bilkent.edu.tr\/","last_name":"\u0130bri\u00e7","first_name":"Alen","job_title":"","description":"Alen \u0130bri\u00e7<\/a> is Senior Computer Engineer at Bilkent University, Turkey."}],"_links":{"self":[{"href":"https:\/\/www.experfy.com\/blog\/wp-json\/wp\/v2\/posts\/9150","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.experfy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.experfy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.experfy.com\/blog\/wp-json\/wp\/v2\/users\/685"}],"replies":[{"embeddable":true,"href":"https:\/\/www.experfy.com\/blog\/wp-json\/wp\/v2\/comments?post=9150"}],"version-history":[{"count":5,"href":"https:\/\/www.experfy.com\/blog\/wp-json\/wp\/v2\/posts\/9150\/revisions"}],"predecessor-version":[{"id":34349,"href":"https:\/\/www.experfy.com\/blog\/wp-json\/wp\/v2\/posts\/9150\/revisions\/34349"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.experfy.com\/blog\/wp-json\/wp\/v2\/media\/14487"}],"wp:attachment":[{"href":"https:\/\/www.experfy.com\/blog\/wp-json\/wp\/v2\/media?parent=9150"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.experfy.com\/blog\/wp-json\/wp\/v2\/categories?post=9150"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.experfy.com\/blog\/wp-json\/wp\/v2\/tags?post=9150"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.experfy.com\/blog\/wp-json\/wp\/v2\/ppma_author?post=9150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}