Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/riversun/ajax-client
A simple ajax client with jQuery like ajax API for javascript
https://github.com/riversun/ajax-client
ajax ajax-client jquery xmlhttprequest
Last synced: about 1 month ago
JSON representation
A simple ajax client with jQuery like ajax API for javascript
- Host: GitHub
- URL: https://github.com/riversun/ajax-client
- Owner: riversun
- Created: 2018-12-01T08:18:09.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-15T02:09:45.000Z (almost 2 years ago)
- Last Synced: 2024-04-26T04:04:58.215Z (9 months ago)
- Topics: ajax, ajax-client, jquery, xmlhttprequest
- Language: JavaScript
- Homepage:
- Size: 1.19 MB
- Stars: 8
- Watchers: 2
- Forks: 3
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ajax-client
[](https://badge.fury.io/js/ajax-client)
[](https://circleci.com/gh/riversun/ajax-client/tree/master)
[](https://codecov.io/gh/riversun/ajax-client)
[](https://opensource.org/licenses/MIT)
A simple ajax client with jQuery like ajax API for js.
jQuery is great, but do you use jQuery(80KB over) only for ajax?
## install
- use package with npm
```shell
npm install ajax-client
```
and write followings in your code
- AjaxClient is based on the XmlHttpRequest2 and HAS APIs most similar to jQuery's API
```javascript
import {AjaxClient} from 'ajax-client'
client.ajax({
type: 'post',
url: 'http://localhost:9999/api',
headers: {
'X-Original-Header1': 'header-value-1',//Additional Headers
'X-Original-Header2': 'header-value-2',
},
contentType: 'application/json',//content-type of sending data
data: JSON.stringify(data),//text data
dataType: 'json',//data type to parse when receiving response from server
timeoutMillis: 5000,//timeout milli-seconds
// crossDomain: true,
// xhrFields: {
// withCredentials: true,
// },
success: (response, xhr) => {
},
error: (e, xhr) => {
},
timeout: (e, xhr) => {
}
});
```
- AjaxClient2(**recommended**) is base on **fetch API**
```javascript
import {AjaxClient2 as AjaxClient} from 'ajax-client'
```
```javascript
import ajax_client from 'ajax-client';
const { AjaxClient2 } = ajax_client;
```
- use from CDN
```
```
## usage
### Post
- Post JSON string to server,Receive JSON string from server.
```javascript
const client = new AjaxClient2();
//Data object to send
const data = {
message: "hello"
}
client.ajax({
type: 'post',
url: 'http://localhost:9999/api',
headers: {
'X-Original-Header1': 'header-value-1',//Additional Headers
'X-Original-Header2': 'header-value-2',
},
contentType: 'application/json',//content-type of sending data
data: JSON.stringify(data),//text data
dataType: 'json',//data type to parse when receiving response from server
timeoutMillis: 5000,//timeout milli-seconds
// crossDomain: true,
// xhrFields: {
// withCredentials: true,
// },
success: (data, response) => {
// response is fetch response
},
error: (data,response,cause,err) => {
},
timeout: (data,response,cause,err) => {
}
});
```
- Post form data
```javascript
const client = new AjaxClient2();
const data = {
message: "hello"
}
// first access = Receive cookies with the intention of credential
client.ajax({
type: 'post',
url: `http://localhost:${serverPort}/form`,
headers: {
'X-Original-Header1': 'header-value-1',//Additional Headers
'X-Original-Header2': 'header-value-2',
},
contentType: 'application/x-www-form-urlencoded',
data,
dataType: 'json',//data type to parse when receiving response from server
timeoutMillis: 5000,//timeout milli-seconds
// crossDomain: true,
// xhrFields: {
// withCredentials: true,
// },
success: (data, response) => {
// response is fetch response
},
error: (data,response,cause,err) => {
},
timeout: (data,response,cause,err) => {
}
});
```
### Post with done/fail
```javascript
client.ajax({
type: 'post',
url: 'http://localhost:9999/api',
//contentType: 'application/json',//content-type of sending data
dataType: 'text',//data type to parse when receiving response from server
timeoutMillis: 5000,//timeout milli-seconds
}).done((data,response) => {
console.log(data);
console.log(response.status);
}).fail((data,response,cause,err) => {
console.log(data);
console.log(response.status);
});
```
### Post with Async/Await
```javascript
const client = new AjaxClient2();
const result = await client.post({
url: 'http://localhost:9999/api',
headers: {
'X-Original-Header1': 'header-value-1',//Additional Headers
'X-Original-Header2': 'header-value-2',
},
contentType: 'application/json',//content-type of sending data
data: data,
dataType: 'json',//data type to parse when receiving response from server
timeoutMillis: 5000,//timeout milli-seconds
});
```
```js
console.log(result.success); // true if success
console.log(result.data);// get JSON-parsed data
console.log(result.response.status);// get status code 200
```
#### Success Response
```javascript
{
success: true,
data:{ },// response payload from server
response:{}, // get raw fetch response.You can get response.status,response.statusText etc.
}
```
#### Error Response
- server error
Occurs when the server side returns a status code other than 200-299.
Parse the error object yourself if you want to determine more details.
```javascript
{
success: false;
data:{ },// response payload from server
cause:'server error,statusCode:404',
error:e,// error object
response:{}, // get raw fetch response.You can get response.status,response.statusText etc.
}
```
- client error
When you specify json as the expected data type, but the server returns text, etc.
Parse the error object yourself if you want to determine more details.
```javascript
{
success: false;
data:{ },// response payload from server
cause:'client error,${error_message_thrown_at_client}',
error:e,// error object
response:{}, // get raw fetch response.You can get response.status,response.statusText etc.
}
```
- network error
Occurs when the network is disconnected or the server cannot be found.
Parse the error object yourself if you want to determine more details.
```javascript
{
success: false;
data:null,
cause:'network error',
error:e,// error object
response:null, // no server response
}
```
- timeout error
- Occurs when no reply is received from the server for more than the specified timeout milliseconds.
```javascript
{
success: false;
data:null,
cause:'timeout,100ms elapsed',
error:e,// error object
response:null,
}
```
### Get
```javascript
const client = new AjaxClient2();
client.ajax({
type: 'get',
url: 'http://localhost:9999/something.html',
dataType: 'text',//data type to parse when receiving response from server
timeoutMillis: 5000,//timeout milli-seconds
success: (data, response) => {
// response is fetch response
},
error: (data,response,cause,err) => {
},
timeout: (data,response,cause,err) => {
}
});
```
```js
console.log(result.success); // true if success
console.log(result.data);// get JSON-parsed data
console.log(result.response.status);// get status code 200
```
### Get with Async/Await
```javascript
const client = new AjaxClient2();
const result = await client.get({
url: 'http://localhost:9999/api',
headers: {
'X-Original-Header1': 'header-value-1',//Additional Headers
'X-Original-Header2': 'header-value-2',
},
dataType: 'text',//data type to parse when receiving response from server
timeoutMillis: 5000,//timeout milli-seconds
});
```
#### Success Response
```javascript
{
success: true,
data:{ },// response payload from server
response:{}, // get raw response.You can get response.status,response.statusText etc.
}
```
#### Error Response
- server error
```javascript
{
success: false;
cause:'error',// 'error' or 'timeout'
error:e,// error object
response:{}, // get raw response.You can get response.status,response.statusText etc.
}
```
- timeout error
```javascript
{
success: false;
cause:'timeout',// 'error' or 'timeout'
error:e,// error object
response:null,
}
```
## Example (using ajax-client)
```html
ajax-client example
const ajax = new AjaxClient2();
//Data object to send
const data = {
message: "hello"
}
//Do async post request
ajax.postAsync({
url: 'http://localhost:9999/api',//Endpoint
headers: {
'X-Original-Header1': 'header-value-1',//Additional Headers
'X-Original-Header2': 'header-value-2',
},
contentType: 'application/json; charset = UTF-8',//content-type of sending data
data: JSON.stringify(data),//text data
dataType: 'json',//data type to parse when receiving response from server
timeoutMillis: 5000,//timeout milli-seconds
success: response => {
console.log(response);
},
error: e => {
console.error('Error occurred');
},
timeout: e => {
console.error('Timeout occurred.');
}
});
```
### Run on node.js (ES6 -)
If you set up `node-fetch` externally, you can use AjaxClient with node.js.
```javascript
import fetch from 'node-fetch';
import ajax_client from 'ajax-client';
const { AjaxClient2 } = ajax_client;
const ajax = new AjaxClient2({ fetch });
```
### Run on node.js (commonJS/babel)
If you set up `node-fetch` externally, you can use AjaxClient with node.js.
```javascript
import fetch from 'node-fetch';
import { AjaxClient2 as AjaxClient } from 'ajax-client';
const ajax = new AjaxClient({ fetch });
```
### Run test server (node.js)
- run test-server to test example above
**TestServer.js**
```shell
npm run test-server
```
```javascript
/**
* Test Server for ajax-client
*
* npm run test-server
*
* @type {createApplication}
*/
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
app.use(bodyParser.json());
//Specify port
var port = process.env.PORT || 9999;
//Allow CORS
app.use(function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin,Content-Type,Accept,X-Original-Header1,X-Original-Header2");
next();
});
//Handle 'post' as 'http://localhost:9999/api'
app.post('/api', bodyParser.json(), function (req, res, next) {
res.status(200);
const data = req.body;
if (data) {
let message = "Hi,there! You say " + data.message;
res.json({
output: message
});
} else {
let message = 'error:message not found.';
res.json({
error: message
});
}
});
app.listen(port);
console.log('Server started on port:' + port);
```
## Classical approach(using jQuery)
**index_jquery.html**
```html
jQuery ajax example
//Data object to send
const data = {
message: "hello"
}
$.ajax({
type: "post",
url: 'http://localhost:9999/api',//Endpoint
headers: {
'X-Original-Header1': 'header-value-1',//Additional Headers
'X-Original-Header2': 'header-value-2',
},
contentType: 'application/json; charset = UTF-8',//content-type of sending data
data: JSON.stringify(data),
dataType: "json",
success: response => {
console.log(response);
},
error: e => {
console.error('Error occurred');
}
});
```