Tag: javascript array

Javascript AJAX Database Example

AJAX can be used for interactive communication with a database.

Example – The showCustomer() Function

When a user selects a customer in the dropdown list , a function called showCustomer() is executed. The function is triggered by the onchange event:

showCustomer

function showCustomer(str) {
  if (str == "") {
    document.getElementById("txtHint").innerHTML = "";
    return;
  }
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("txtHint").innerHTML = this.responseText;
  }
  xhttp.open("GET", "getcustomer.php?q="+str);
  xhttp.send();
}

The showCustomer() function does the following: Continue reading Javascript AJAX Database Example

Javascript AJAX PHP Example

AJAX is used to create more interactive applications.

Example

In the example , when a user types a character in the input field, a function called showHint() is executed.

The function is triggered by the onkeyup event.

Here is the code  : Continue reading Javascript AJAX PHP Example

Javascript AJAX XML Example

AJAX can be used for interactive communication with an XML file.

Example

When a user clicks on the “Get CD info” button , the loadDoc() function is executed.

The loadDoc() function creates an XMLHttpRequest object, adds the function to be executed when the server response is ready, and sends the request off to the server. Continue reading Javascript AJAX XML Example

Javascript AJAX – Server Response

Server Response Properties

Property Description
responseText get the response data as a string
responseXML get the response data as XML data

The responseText Property

The responseText property returns the server response as a JavaScript string, and you can use it accordingly : Continue reading Javascript AJAX – Server Response

Javascript AJAX – XMLHttpRequest

The XMLHttpRequest object is used to request data from a server.

Send a Request To a Server

To send a request to a server, we use the open() and send() methods of the XMLHttpRequest object:

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
Method Description
open(method, url, async) Specifies the type of request

method: the type of request: GET or POST
url: the server (file) location
async: true (asynchronous) or false (synchronous)
send() Sends the request to the server (used for GET)
send(string) Sends the request to the server (used for POST)

Continue reading Javascript AJAX – XMLHttpRequest

Javascript AJAX – The XMLHttpRequest Object

The keystone of AJAX is the XMLHttpRequest object.

  1. Create an XMLHttpRequest object
  2. Define a callback function
  3. Open the XMLHttpRequest object
  4. Send a Request to a server

The XMLHttpRequest Object

All modern browsers support the XMLHttpRequest object.

The XMLHttpRequest object can be used to exchange data with a web server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page. Continue reading Javascript AJAX – The XMLHttpRequest Object

Javascript AJAX Introduction

AJAX is a developer’s dream, because you can:

  • Read data from a web server – after the page has loaded
  • Update a web page without reloading the page
  • Send data to a web server – in the background

AJAX Example

HTML Page

<!DOCTYPE html>
<html>
<body>

<div id="demo">
  <h2>Let AJAX change this text</h2>
  <button type="button" onclick="loadDoc()">Change Content</button>
</div>

</body>
</html>

The HTML page contains a <div> section and a <button>. Continue reading Javascript AJAX Introduction

Javascript Web Geolocation API

Locate the User’s Position

The HTML Geolocation API is used to get the geographical position of a user.

Since this can compromise privacy, the position is not available unless the user approves it.

Note

Geolocation is most accurate for devices with GPS, like smartphones.

Browser Support

The Geolocation API is supported in all browsers:

Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

Continue reading Javascript Web Geolocation API

JavaScript Fetch API

The Fetch API interface allows web browser to make HTTP requests to web servers.

😀 No need for XMLHttpRequest anymore.

Browser Support

The numbers in the table specify the first browser versions that fully support Fetch API:

Chrome 42 Edge 14 Firefox 40 Safari 10.1 Opera 29
Apr 2015 Aug 2016 Aug 2015 Mar 2017 Apr 2015

Continue reading JavaScript Fetch API

Javascript Web Workers API

A web worker is a JavaScript running in the background, without affecting the performance of the page.

What is a Web Worker?

When executing scripts in an HTML page, the page becomes unresponsive until the script is finished.

A web worker is a JavaScript that runs in the background, independently of other scripts, without affecting the performance of the page. You can continue to do whatever you want: clicking, selecting things, etc., while the web worker runs in the background. Continue reading Javascript Web Workers API