
Security News
pnpm 10.12 Introduces Global Virtual Store and Expanded Version Catalogs
pnpm 10.12.1 introduces a global virtual store for faster installs and new options for managing dependencies with version catalogs.
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'
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) => {
}
});
import {AjaxClient2 as AjaxClient} from 'ajax-client'
import ajax_client from 'ajax-client';
const { AjaxClient2 } = ajax_client;
<script src="https://cdn.jsdelivr.net/npm/ajax-client@2.0.2/lib/ajax-client.min.js"></script>
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) => {
}
});
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) => {
}
});
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);
});
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
});
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: true,
data:{ },// response payload from server
response:{}, // get raw fetch response.You can get response.status,response.statusText etc.
}
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.
{
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.
}
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.
{
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.
}
Occurs when the network is disconnected or the server cannot be found. Parse the error object yourself if you want to determine more details.
{
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.
{
success: false;
data:null,
cause:'timeout,100ms elapsed',
error:e,// error object
response:null,
}
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) => {
}
});
console.log(result.success); // true if success
console.log(result.data);// get JSON-parsed data
console.log(result.response.status);// get status code 200
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: true,
data:{ },// response payload from server
response:{}, // get raw response.You can get response.status,response.statusText etc.
}
{
success: false;
cause:'error',// 'error' or 'timeout'
error:e,// error object
response:{}, // get raw response.You can get response.status,response.statusText etc.
}
{
success: false;
cause:'timeout',// 'error' or 'timeout'
error:e,// error object
response:null,
}
<!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 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.');
}
});
</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 40 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.
Security News
pnpm 10.12.1 introduces a global virtual store for faster installs and new options for managing dependencies with version catalogs.
Security News
Amaro 1.0 lays the groundwork for stable TypeScript support in Node.js, bringing official .ts loading closer to reality.
Research
A deceptive PyPI package posing as an Instagram growth tool collects user credentials and sends them to third-party bot services.