Json request with javascript

JSON Http Request

A common use of JSON is to read data from a web server, and display the data in a web page.

This chapter will teach you, in 4 easy steps, how to read JSON data, using XMLHttp.

JSON Example

This example reads a menu from myTutorials.txt, and displays the menu in a web page:

JSON Example

Example Explained

1: Create an array of objects.

Use an array literal to declare an array of objects.

Give each object two properties: display and url.

Name the array myArray:

myArray

var myArray = [
«display»: «JavaScript Tutorial»,
«url»: «https://www.w3schools.com/js/default.asp»
>,
«display»: «HTML Tutorial»,
«url»: «https://www.w3schools.com/html/default.asp»
>,
«display»: «CSS Tutorial»,
«url»: «https://www.w3schools.com/css/default.asp»
>
]

2: Create a JavaScript function to display the array.

Create a function myFunction() that loops the array objects, and display the content as HTML links:

myFunction()

Call myFunction() with myArray as argument:

Example

3: Create a text file

Put the array literal in a file named myTutorials.txt:

myTutorials.txt

[
«display»: «JavaScript Tutorial»,
«url»: «https://www.w3schools.com/js/default.asp»
>,
«display»: «HTML Tutorial»,
«url»: «https://www.w3schools.com/html/default.asp»
>,
«display»: «CSS Tutorial»,
«url»: «https://www.w3schools.com/css/default.asp»
>
]

4: Read the text file with an XMLHttpRequest

Write an XMLHttpRequest to read the text file, and use myFunction() to display the array:

XMLHttpRequest

var xmlhttp = new XMLHttpRequest();
var url = «myTutorials.txt»;

xmlhttp.open(«GET», url, true);
xmlhttp.send();

Источник

How to send JSON request using XMLHttpRequest (XHR)

In my previous article, we looked at how to make an HTTP POST request using XMLHttpRequest (XHR) in vanilla JavaScript. Since the most common use of XHR is for sending an asynchronous request with JSON payload, it’s good to know how to do it.

JSON stands for JavaScript Object Notation and is a popular format for sharing data with the server and displaying the result to the client.

The following example shows how you can use the XHR to make a JSON POST request in JavaScript:

const xhr = new XMLHttpRequest() // listen for `load` event xhr.onload = () =>  // print JSON response if (xhr.status >= 200 && xhr.status  300)  // parse JSON const response = JSON.parse(xhr.responseText) console.log(response) > > // create a JSON object const json =  email: 'eve.holt@reqres.in', password: 'cityslicka' > // open request xhr.open('POST', 'https://reqres.in/api/login') // set `Content-Type` header xhr.setRequestHeader('Content-Type', 'application/json') // send rquest with JSON payload xhr.send(JSON.stringify(json)) 

Take a look at the making HTTP requests using XHR tutorial to learn about all available options.

If you work with modern browsers only, I’d suggest using the Fetch API instead of XHR. It has clear and concise syntax and also supports promises:

// create a JSON object const json =  email: 'hi@attacomsian.com', password: '123abc' > // request options const options =  method: 'POST', body: JSON.stringify(json), headers:  'Content-Type': 'application/json' > > // send post request fetch('/login', options) .then(res => res.json()) .then(res => console.log(res)) .catch(err => console.error(err)) 

You might also like.

Источник