All Projects → shenfe → Rext

shenfe / Rext

Licence: mit
🎈A lightweight (< 5kb gzipped) and Promise-supported HTTP request library, for all browsers.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Rext

Atomic
A tiny, Promise-based vanilla JS Ajax/HTTP plugin with great browser support.
Stars: ✭ 526 (+3657.14%)
Mutual labels:  promise, ajax, xhr
http
Tiny, embeddable HTTP client with simple API for the browser
Stars: ✭ 21 (+50%)
Mutual labels:  xhr, ajax
Xhr.js
🌎 xhr.js is a library(< 2Kb) to make AJAX/HTTP requests with XMLHttpRequest.
Stars: ✭ 12 (-14.29%)
Mutual labels:  ajax, xhr
electron-request
Zero-dependency, Lightweight HTTP request client for Electron or Node.js
Stars: ✭ 45 (+221.43%)
Mutual labels:  xhr, ajax
Wretch
A tiny wrapper built around fetch with an intuitive syntax. 🍬
Stars: ✭ 2,285 (+16221.43%)
Mutual labels:  promise, ajax
Penpal
A promise-based library for securely communicating with iframes via postMessage.
Stars: ✭ 197 (+1307.14%)
Mutual labels:  promise, iframe
angular-progress-http
[DEPRECATED] Use @angular/common/http instead
Stars: ✭ 43 (+207.14%)
Mutual labels:  xhr, ajax
buzy
Async queue manager for node and browser
Stars: ✭ 23 (+64.29%)
Mutual labels:  promise, ajax
Mappersmith
is a lightweight rest client for node.js and the browser
Stars: ✭ 282 (+1914.29%)
Mutual labels:  promise, ajax
Ironwing
universal, framework agnostic, transport layer
Stars: ✭ 17 (+21.43%)
Mutual labels:  ajax, xhr
Resource Loader
A middleware-style generic resource loader built with web games in mind.
Stars: ✭ 364 (+2500%)
Mutual labels:  ajax, xhr
Postmate
📭 A powerful, simple, promise-based postMessage library.
Stars: ✭ 1,638 (+11600%)
Mutual labels:  promise, iframe
Axios Tutorial
axios实例应用及源码剖析 - xhr篇 (走心教程)
Stars: ✭ 219 (+1464.29%)
Mutual labels:  ajax, xhr
upload-file-to-backblaze-b2-from-browser-example
Demonstrates calling the b2_upload_file Backblaze B2 Cloud Storage API from a web browser using AJAX.
Stars: ✭ 28 (+100%)
Mutual labels:  xhr, ajax
Thwack
A tiny modern data fetching solution
Stars: ✭ 268 (+1814.29%)
Mutual labels:  ajax, xhr
Post Me
📩 Use web Workers and other Windows through a simple Promise API
Stars: ✭ 398 (+2742.86%)
Mutual labels:  promise, iframe
Rapid.js
An ORM-like Interface and a Router For Your API Requests
Stars: ✭ 700 (+4900%)
Mutual labels:  promise, ajax
Node Exec Promise
Execute commands from Node.js and get a Promise back.
Stars: ✭ 5 (-64.29%)
Mutual labels:  promise
Paypal Checkout Components
Javascript Integration for PayPal Button and PayPal Checkout
Stars: ✭ 938 (+6600%)
Mutual labels:  iframe
Infinite Ajax Scroll
Turn your existing pagination into infinite scrolling pages with ease
Stars: ✭ 804 (+5642.86%)
Mutual labels:  ajax

rext

gzip size license

A lightweight (< 5kb gzipped) and Promise-supported HTTP request library, for all browsers (i.e. even cross-domain requests in IE 6 are possible).

IE / Edge IE / Edge Chrome Chrome Firefox Firefox Safari Safari
6+ ✔ All ✔ All ✔ All ✔

Quick Import

$ npm install --save rexter
var rext = require('rexter');

IE 9- Support

If IE9- browsers are required to send cross-domain requests with user credentials, define the invoker-hostname whitelist in dist/iframe-agent.html and put it at the root path of the target origin.

For example:

Define the invoker-hostname whitelist in iframe-agent.html:

Replace

[/* Define a whitelist of host names here, e.g. '.invoker.com'. */]

with

['.my-domain.com', '.my-domain1.com']

Additianally, before rext is imported, the JSON polyfill (e.g. JSON-js) shall be executed.

⚠️ rext does not include full polyfills in itself.

API

As simple as rext(options).

Besides, the format of jQuery ajax's option object is also allowed:

{
    type: 'post',
    url: '/path/to/api',
    data: {},
    contentType: 'application/json',
    dataType: 'json',
    xhrFields: {
        withCredentials: true
    },
    success: function () { /**/ },
    error: function () { /**/ },
    complete: function () { /**/ }
}

XMLHttpRequest

The success, error, always callbacks are allowed both a chain call and defined in the option object.

rext({
    url: '/path/to/resource',
    data: { /**/ },
    promise: false
}).success((data, response) => {
    /**/
}).error((data, response) => {
    /**/
}).always((data, response) => {
    /**/
});

JSONP

The callback function is allowed either as the second parameter behind the option object or defined in the option object.

rext({
    jsonp: true,
    url: '/path/to/resource',
    data: { /**/ }
}, data => {
    /**/
});

Promise Object Returned

A Promise object is returned by default. Set property promise value false if you do not want to get a Promise object or you prefer to use success and error methods actually.

rext({
    url: '/path/to/resource',
    data: { /**/ }
}).then(data => {
    /**/
}).catch(err => {
    /**/
});

👏 shenfe/promises-aplus is used as a polyfill when the browser does not support Promise.

Options

Instructions of the option object:

Property Type Value
type {Undefined|String} 'get' (default), 'post'.
url {String} The resource url string.
data {Undefined|Object} The data to send. Object recommended.
withCredentials {Undefined|Boolean} undefined (false, as default), true. The withCredentials property of the request. Whether to send user credentials with the request to another origin or not. An xhrFields object with withCredentials property of value true is accepted as well.
agent {Undefined|Boolean} undefined (false, as default), true. Whether to fall back to the iframe agent directly when the request is cross-domain and the browser is IE 9-.
agentPageUrl {Undefined|String} undefined (`${targetOrigin}/iframe-agent.html`, as default), a url string. Specify the url of the iframe agent page if it's not in the root path of the target origin.
responseType (or dataType) {Undefined|String} 'text' (default), 'json', .etc. Similar to the dataType option in jQuery ajax. A simple trial of JSON parsing would be conducted upon the response data besides the MIME type. See below for more.
headers {Undefined|Object} The request headers object. Usually used to define the Content-Type property (similar to the contentType option in jQuery ajax), of which 'application/x-www-form-urlencoded' is the default value. See below for more.
contentType {Undefined|String} The same as headers['Content-Type'].
jsonp {Undefined|Boolean} undefined (false, as default), true. The same as setting responseType (or dataType) jsonp.
promise {Undefined|Boolean|Function} undefined, false, true, or a Promise object constructor. Whether to return a Promise object. Set it false if not for a Promise object.
simple {Undefined|Boolean} undefined (false, as default), true. Whether not to force an X-Requested-With header in an XHR.

Case Matrix

All the cases of browser requests.

Cross-Domain With-Credentials Web Browser Approach Restriction Security
no - IE 6- ActiveXObject Almost the same API as the XMLHttpRequest Object. -
no - IE 7-9 XMLHttpRequest The XMLHttpRequest Object. -
yes no IE 8-9 XDomainRequest XDomainRequest - Restrictions, Limitations and Workarounds -
no - IE 10-11, non-IE XMLHttpRequest (Level 2) XMLHttpRequest Level 2. IE 10-11 do not support value json as XHR's responseType, but it doesn't matter. -
yes - IE 10-11, non-IE XMLHttpRequest (Level 2) Server responses should include the Access-Control-Allow-Origin HTTP response header with value *, or the exact origin of the calling page. -
yes yes IE 10-11, non-IE XMLHttpRequest (Level 2) Server responses should include the Access-Control-Allow-Origin HTTP response header with the exact origin of the calling page, and the Access-Control-Allow-Credentials HTTP response header with value true. -
- - - JSONP - Security concerns
- - - iframe agent Be put in a specific place of the target origin. A whitelist of visitor origins is required.

Take a Look at headers['Content-Type']

The MIME type of data to send, like the contentType in jQuery ajax.

Value Effect
application/x-www-form-urlencoded The default, recommended. Almost the same as the url query string.
multipart/form-data HTML 4 specification. This allows entire files to be included in the data. Use this when the form includes any <input type="file"> element. In this case, Content-Type would be ignored because the browser set this header with a boundary generated by itself.
text/plain HTML 5 specification. Not recommended. Do not use it unless for debugging.
application/json Personally not recommended for common POST requests. Make sure you really need to post complex data with user credentials. Additionally, for CORS requests, setting the content type to anything other than application/x-www-form-urlencoded, multipart/form-data, or text/plain will trigger the browser to send a preflight OPTIONS request to the server.

Take a Look at responseType

The alias of the expected MIME type of data to receive, similar to the dataType in jQuery ajax. This option should affect the request header Accept and how to treat the response data, relating the response header Content-Type. However, a simple trial of JSON parsing would be conducted then regardless of the type of response data.

According to the specification of responseType, the value can be:

Value Description
text Default.
json -
blob If to receive files.
arraybuffer If to receive files.
document Seldom.

License

MIT

Copyright © 2017-present, shenfe

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].