The basics of AJAX

At some point in time, every developer out there will learn
how to make a website. When they do they should have learned how to do a Ajax request. It's a function that sends a request to a server to add or require some data, for whatever your website is doing, from something like sending your Facebook account information from the server to your computer.

HISTORY
Ajax or Asynchronous Javascript and XML, was created in March 1999. Then on February 18, 2005, people used the term Ajax to represent it. This was made public by Jesse James Garrentt. You won't need to download anything to use Ajax. It's built-in and ready-to-use
from the start.

//a glitch/bug is causing the numbered bullet points to all be 1. //For some reason

let's Look at where you can start

Create a basic HTML file

<!docttype html>
<html>
<head>
<title>document</title>
</head>
<body>
</body>
</html>

In the body tag, create a button tag and a script tag. Also, create a new txt file in the same project. You can put anything you want in that file, but everything in that file will be considered a string.

<!docttype html>
<html>
<head>
<title>document</title>
</head>
<body>
<button id="button">press</button>
<script>

</script>
</body>
</html>

Inside the script tag, create an event when the button is clicked and a function with an xhr Object that xhr will create an object that will allow you to use an Ajax request

<!docttype html>
<html>
<head>
<title>document</title>
</head>
<body>
<button id="button">press</button>
<script>
document.getElementById('button').addEventListener('click', runFunc)

function runFunc(){
  //a big object of functions
var xhr = new XMLHttpRequest();
}
</script>
</body>
</html>

In the runFunc you will need to run the open, onload, and send functions. These functions will make the request, check if there are any errors with the request, and then send the request. The request we are using is a GET request to get data

<!docttype html>
<html>
<head>
<title>document</title>
</head>
<body>
<button id="button">press</button>
<script>
document.getElementById('button').addEventListener('click', runFunc)

function runFunc(){
//a big object of functions
var xhr = new XMLHttpRequest();
//take in the type of request, url/file, async (true/false)
xhr.open('GET', simpleText.txt, true)
//check the status and run the specific code based on the status
xhr.onload = function(){
//check the status of the request
if(this.status === 200){
//log the return value which would be a message
console.log(this.responseText)
}
}
//http status
//200: 'ok'
//403: 'forbidden'
//404: 'not found"

//send request
xhr.send()


</script>
</body>
</html>

When you click the button you should get a message in the console based on what is in your txt file.

When doing a GET, the data that is returned will mostly be in a JSON style. That makes it hard for our code to read. To fix that problem, we need to wrap it in a JSON.parse function

<script>
function runFunc(){
var xhr = new XMLHttpRequest();
//the url/file this time is an object
xhr.open('GET', coder.json, true)
xhr.onload = function(){
if(this.status === 200){
//wrap the data into readable JavaScript code that we can use
var coder = JSON.parse(this.responseText)
console.log(coder.data)
}
}
xhr.send()
</script>

When you make a GET request to a website, most of the time it will require an API key. It's a sort of authentication that allows you to make that request for that site. For example, the YouTube API needs to be in the URL string that passes to the .open function. EXAMPLE:

"https://youtube.googleapis.com/youtube/v3/searchpart=snippet&maxResults=5&q=minecraft&type=video&key=" + apiKey

Besides getting data, we also need to send data, too. POST request will send the data given to it to the URL/file. This is mostly used for sending data to a database to store that data. To send data you need to use the setRequsetHeader function. Then give the send function a parameter.

<script>
function runFunc(){
//the POST request will take a string that sets a key to be equal //to something. Then if you are send multiple keys use the & //character to separate the keys
var params = 'name=you&id=you'
var xhr = new XMLHttpRequest();
xhr.open('POST', coder.json, true)
//tells the code what type of data your posting
xhr.setRequsetHeader('content-type', 'application/x-www-form-urlencoded')
xhr.onload = function(){
//
console.log(this.responseText)
}
//to post anything pass it in the send function
xhr.send(params)
</script>

One good example of using Ajax is Facebook. When you create an account or post something, it is stored in a server, holding all information about your account.

When you click a video title, the site makes an Ajax request to the server, which looks for the requested video and then sends back it to the site, allowing you to watch that video.