The basics of AJAX
Published: 2023-11-17 01:13:54

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
1. Create a basic HTML file

```
<!docttype html>
<html>
<head>
<title>document</title>
</head>
<body>
</body>
</html>
```
2. 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>
```
3. 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>
```
4. 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. 

5. 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>
```

6. 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
```

7. 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>
```



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1vjtm0p2r2ig2fw75d3t.jpg)
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.



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jx27mo12mst4r87lwmyt.png)
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.



//links used in the creation of this blog
https://www.w3schools.com/whatis/whatis_ajax.asp
https://en.wikipedia.org/wiki/Ajax_(programming)
https://www.youtube.com/watch?v=82hnvUYY6QA
https://logo-studio.blogspot.com/2011/08/facebook-icon-vector.html
https://pngpedia.blogspot.com/2019/11/youtube-subscribe-icon-logo.html