Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/demonicious/vjax
Vanilla JavaScript AJAX but not tedious.
https://github.com/demonicious/vjax
ajax js library
Last synced: 6 days ago
JSON representation
Vanilla JavaScript AJAX but not tedious.
- Host: GitHub
- URL: https://github.com/demonicious/vjax
- Owner: Demonicious
- Created: 2020-02-23T16:59:13.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-06-26T21:14:21.000Z (over 1 year ago)
- Last Synced: 2023-10-15T16:06:56.446Z (about 1 year ago)
- Topics: ajax, js, library
- Language: JavaScript
- Homepage:
- Size: 13.7 KB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### VJAX
Vanilla JavaScript AJAX but not as messy. 4KB File Size (Minified).
Similar to jQuery AJAX.
Built as an educational project.
### CDN (jsDelivr)
```html
```
### Usage
```javascript
let request = vjax.request({
url: 'somewhere.com',
method: 'POST',
data: {
id: 5,
},
preProcess: () => {
console.log('About to send request');
},
onSend: () => {
console.log('Request Sent');
},
onProgress: () => {
console.log('Request is being Processed.');
},
onResponse: (response) => {
console.log('Plain Text: ', response.text);
console.log('JSON: ', response.json);
},
onAbort: () => {
console.log('Request Aborted');
},
onError: (e) => {
console.error(e);
}
});
// All Lifecycle Methods are Optional.
// Alternative Methods :-
// - Parameters, Same as Above excluding "method" Property
vjax.get();
vjax.post();
```
### Basic Example
```html
VJAX Test
Call API!
const btn = document.getElementById('call_api');
const resArea = document.getElementById('response');
btn.onclick = () => {
const request = vjax.request({
url: 'https://jsonplaceholder.typicode.com/todos/',
method: 'GET',
data: {
_limit: 5,
},
preProcess: () => {
console.log('About to send request!');
},
onSend: () => {
resArea.innerText = 'Sent Request!';
},
onProgress: () => {
resArea.innerText = 'Request is being processed...';
},
onResponse: (response) => {
resArea.innerText = response.text;
console.log(response.json);
}
});
}
```