npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@fdaciuk/ajax

v3.0.4

Published

Ajax module in Vanilla JS

Downloads

371

Readme

Ajax

Ajax module in Vanilla JS

Build Status Coveralls Coverage Status License CONTRIBUTING

You can use this module with AMD, CommonJS or just like a method of window object!

Installation

Bower

You can install via bower (but you should avoid that):

bower install ajax

Manual installation

Just download dist/ajax.min.js file, and add dist/ajax.min.js on your HTML file:

<script src="js/ajax.min.js"></script>

NPM

npm i --save @fdaciuk/ajax

CDN

You may use a CDN to get the latest version.

CDNJS:

https://cdnjs.com/libraries/fdaciuk-ajax

GitHub:

Or you may just add the following line to your HTML file:

<script src="//cdn.rawgit.com/fdaciuk/ajax/v3.0.4/dist/ajax.min.js"></script>

Usage

AMD

define(['ajax'], function (ajax) {
  ajax().get(...)
  ...
})

CommonJS

var ajax = require('@fdaciuk/ajax')
ajax().post(...)
...

ES6 / ES2015 module

import ajax from 'ajax'
ajax().put(...)

Method of window object

window.ajax().get(...)

or just

ajax().get(...)

Signature

ajax([options])

Options

Optional object with request options. See all accepted options below.

HTTP Methods

You may pass any HTTP method as you want, using method property:

var request = ajax({
  method: 'options',
  url: '/api/users',
  data: {
    user: 'john'
  }
})

request.then(function (response) {...})

For using this kind of request, you must pass url property.

The property data is optional, but may used to pass any data via body on request.

headers

An object when key is a header name, and value is a header value.

ajax({
  headers: {
    'content-type': 'application/json',
    'x-access-token': '123@abc'
  }
})

If content-type is not passed, application/x-www-form-urlencoded will be used when you pass data as a query string.

Passing data as object, application/json will be automatically used (since v3.0.0).

Note about uploads:

If you need to upload some file, with FormData, use content-type: null.

baseUrl

You can pass a baseUrl param to improve calls. Example:

const request = ajax({ baseUrl: 'http://example.com/api/v2' })
request.get('/users') // get `http://example.com/api/v2/users` url

Methods

You may use any of this methods, instead the above approach:

get(url, [data])

Get data as a JSON object.

ajax().get('/api/users')

You can pass data on get method, that will be added on URL as query string:

ajax().get('/api/users', { id: 1 })

It will request on /api/users?id=1.

post(url, [data])

Save a new register or update part of this one.

// Without headers
ajax().post('/api/users', { slug: 'john' })

// With headers
var request = ajax({
  headers: {
    'x-access-token': '123@abc'
  }
})

request.post('/login', { username: 'user', password: 'b4d45$' })

data might be a complex object, like:

ajax().post('/api/new-post', {
  slug: 'my-new-post',
  meta: {
    categories: ['js', 'react'],
    tags: ['code']
  }
})

put(url, [data])

Update an entire register.

ajax().put('/api/users', { slug: 'john', age: 37 })

delete(url, [data])

Delete a register.

ajax().delete('/api/users', { id: 1 })

Return methods

Disclaimer: these return methods are not from real Promises, and they will just being called once. If you want to work with real Promises, you should make your own abstraction.

then(response, xhrObject)

Promise that returns if the request was successful.

ajax().get('/api/users').then(function (response, xhr) {
  // Do something
})

catch(responseError, xhrObject)

Promise that returns if the request has an error.

ajax().post('/api/users', { slug: 'john' }).catch(function (response, xhr) {
  // Do something
})

always(response, xhrObject)

That promise always returns, independent if the status is done or error.

ajax().post('/api/users', { slug: 'john' }).always(function (response, xhr) {
  // Do something
})

Abort request

If a request is very slow, you can abort it using abort() method:

const getLazyUser = ajax().get('/api/users/lazy')

const timer = setTimeout(function () {
  getLazyUser.abort()
}, 3000)

getLazyUser.then(function (response) {
  clearTimeout(timer)
  console.log(response)
})

In the above example, if request is slowest than 3 seconds, it will be aborted.

Deprecated methods

You may see the deprecated methods here

Contributing

Check CONTRIBUTING.md

Code coverage and Statistics

https://github.com/reportz/ajax

Browser compatibility

| Chrome | Firefox | IE | Edge | Opera | Safari | | ---------------------- | ------------------------ | -------------- | ------------------ | -------------------- | ---------------------- | | Latest ✔ | Latest ✔ | 9+ ✔ | Latest ✔ | Latest ✔ | 3.2+ ✔ |

License

MIT © Fernando Daciuk