The JSON syntax is a subset of the JavaScript syntax.
JSON Syntax Rules
JSON syntax is derived from JavaScript object notation syntax:
- Data is in name/value pairs
- Data is separated by commas
- Curly braces hold objects
- Square brackets hold arrays
Category: JavaScript
Javascript JSON – Introduction
JSON Example
This example is a JSON string:
'{"name":"John", "age":30, "car":null}'
It defines an object with 3 properties:
- name
- age
- car
Each property has a value.
If you parse the JSON string with a JavaScript program, you can access the data as an object:
let personName = obj.name;
let personAge = obj.age;
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 |
| send() | Sends the request to the server (used for GET) |
| send(string) | Sends the request to the server (used for POST) |
Javascript AJAX – The XMLHttpRequest Object
The keystone of AJAX is the XMLHttpRequest object.
- Create an XMLHttpRequest object
- Define a callback function
- Open the XMLHttpRequest object
- 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 |