ajax-client
Advanced tools
A simple ajax client with jQuery like ajax API for js.
jQuery is great, but do you use jQuery(80KB over) only for ajax?
npm install ajax-client
and write followings in your code
import {AjaxClient} from 'ajax-client'
import {AjaxClient2 as AjaxClient} from 'ajax-client'
<script src="https://cdn.jsdelivr.net/npm/ajax-client/lib/ajax-client.js"></script>
const client = new AjaxClient();
//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: (response, xhr) => {
},
error: (e, xhr) => {
},
timeout: (e, xhr) => {
}
});
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: (response, xhr) => {
},
error: (e, xhr) => {
},
timeout: (e, xhr) => {
}
});
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
});
{
success: true,
data:{ },// response payload from server
}
{
success: false;
cause:'error',// 'error' or 'timeout'
error:e,// error object
}
const client = new AjaxClient();
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: (response, xhr) => {
},
error: (e, xhr) => {
},
timeout: (e, xhr) => {
}
});
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: true,
data:{ },// response payload from server
}
{
success: false;
cause:'error',// 'error' or 'timeout'
error:e,// error object
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax-client example</title>
</head>
<body>
<script src="https://raw.githubusercontent.com/riversun/ajax-client/master/dist/ajaxclient.js"></script>
<script>
const ajax = new AjaxClient();
//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.');
}
});
</script>
</body>
</html>
If you set up node-fetch externally, you can use AjaxClient with node.js.
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.
import fetch from 'node-fetch';
import { AjaxClient2 as AjaxClient } from 'ajax-client';
const ajax = new AjaxClient({ fetch });
TestServer.js
npm run test-server
/**
* 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery ajax example</title>
</head>
<body>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script>
//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');
}
});
</script>
</body>
</html>
FAQs
A simple ajax client with 'jquery-like' API
The npm package ajax-client receives a total of 54 weekly downloads. As such, ajax-client popularity was classified as not popular.
We found that ajax-client demonstrated a not healthy version release cadence and project activity because the last version was released a year ago.Ā It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Malicious PyPI checkers validate stolen emails against TikTok and Instagram APIs, enabling targeted account attacks and dark web credential sales.
Security News
The Node.js TSC opted not to endorse a feature bounty program, citing concerns about incentives, governance, and project neutrality.
Research
Security News
A look at the top trends in how threat actors are weaponizing open source packages to deliver malware and persist across the software supply chain.