A simple ajax client with 'jquery-like' API
npm install ajax-clientA simple ajax client with jQuery like ajax API for js.
jQuery is great, but do you use jQuery(80KB over) only for ajax?
- 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
`
- 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) => {
}
});
`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);
});
`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,
}
`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
`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,
}
`html
`
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 });
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 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);
`
index_jquery.html
`html
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
``