markdown 阿贾克斯

Posted 2021-05-06

const xhr = new XMLHttpRequest ;
const url = 'https://api-to-call.com/endpoint';
const data = JSON.stringify({id: '200'});

xhr.responseType = 'json';
xhr.onreadystatechange = function (){
  if (xhr.readyState === XMLHttpRequest.DONE) {
    console.log(xhr.response);
  }
};
xhr.open('POST',url);
xhr.send(data);

<font size=3 color=gray>**GET**</font>
```
$.ajax({
  url: 'https://api-to-call.com/endpoint', 
  type: 'GET',
  dataType: 'json', 
  success(response) {
    console.log(response);
  },
  error(jqXHR,status,errorThrown){
    console.log(jqXHR);
  }
});
```

<font size=2 color=gray>**SHORTHAND**</font>
```js
$.get('https://api-to-call.com/endpoint', response => {...}, 'json');
```
<font size=2 color=silver>OR if your data type is in JSON:</font>
```js
$.getJSON('https://api-to-call.com/endpoint', response => {...});
```

<font size=3 color=gray>**POST**</font>
```
$.ajax({
  url:'https://api-to-call.com/endpoint',
  type: 'POST',
  data: JSON.stringify({id:200}),
  dataType: 'json',
  success(response) {
    console.log(response);
  },
  error(jqXHR, status,errorThrown){
    console.log(jqXHR);
  }
});
```

<font size=2 color=gray>**SHORTHAND**</font>
```js
$.post('https://api-to-call.com/endpoint', {data}, response => {...}, 'json');
``` 
<font size=2 color=silver>OR if your data type is in JSON:</font>
```js
$.postJSON('https://api-to-call.com/endpoint', response => {...});
```

<br><br><br><hr>
<font size=4 color=gray>**AJAX REQUESTS WITH ES6 PROMISE**</font> &emsp;&emsp;&emsp;  
<font size=2 color=gray>(with the new [fetch](https://developers.google.com/web/updates/2015/03/introduction-to-fetch) method)</font>  
<font size=3 color=gray>**GET**</font>
```
fetch('https://api-to-call.com/endpoint')
.then(                                        // handle Promise & network errors
  response => {                               // success
    if(response.ok) {
      return response.json();
    }
    throw new Error('Request failed!');
  },
  networkError => {                           // network error
    console.log(networkError.message);
  }
)
.then(                                        // handle information returned with the Promise
  jsonResponse => { /* .. */ }  //OR jsonResponse => jsonResponse
);
```

<font size=2 color=gray>**SHORTHAND**</font>
```
async function getData(){
  try {
    let response = await fetch('https://api-to-call.com/endpoint');
    if(response.ok) {
      let jsonResponse = await response.json();
      return jsonResponse;
    }
    throw new Error('Request failed!');
  }
  catch(error) {
  	console.log(error);  
	}
}
```

<font size=3 color=gray>**POST**</font>
```
fetch('https://api-to-call.com/endpoint', {
  method: 'POST',
  body: JSON.stringify({id:'200'})
}).then(
    response => {
      if(response.ok) {
        return response.json();
      }
      throw new Error('Request failed!');
    },
    networkError => {
      console.log(networkError.message);
    }
).then(
    jsonResponse => jsonResponse
);
```

<font size=2 color=gray>**SHORTHAND**</font>
```
async function getData(){
  try {
    let response = await fetch(
      'https://api-to-call.com/endpoint',
      {
        method: 'POST',
        body: JSON.stringify({id:200})
      }
    );
    if (response.ok) {
      let jsonResponse = await response.json();
      return jsonResponse;
    }
    throw new Error('Request failed!');
  }
  catch(error){
    console.log(error);
  }
}
```

[when doing multiple tasks with AJAX use this](https://www.w3schools.com/xml/ajax_xmlhttprequest_response.asp)  
Web server data transfer is always in string format. Use [stringify](https://www.w3schools.com/js/js_json_stringify.asp) to send, and [parse](https://www.w3schools.com/js/js_json_parse.asp) into a workable js object.