It's AJAX
All over again. Includes support for xmlHttpRequest, JSONP, CORS, and CommonJS Promises A.
It is also isomorphic allowing you to require('reqwest') in Node.js through the peer dependency xhr2, albeit the original intent of this library is for the browser. For a more thorough solution for Node.js, see mikeal/request.
API
reqwest('path/to/html', function (resp) {
qwery('#content').html(resp)
})
reqwest({
url: 'path/to/html'
, method: 'post'
, data: { foo: 'bar', baz: 100 }
, success: function (resp) {
qwery('#content').html(resp)
}
})
reqwest({
url: 'path/to/html'
, method: 'get'
, data: [ { name: 'foo', value: 'bar' }, { name: 'baz', value: 100 } ]
, success: function (resp) {
qwery('#content').html(resp)
}
})
reqwest({
url: 'path/to/json'
, type: 'json'
, method: 'post'
, error: function (err) { }
, success: function (resp) {
qwery('#content').html(resp.content)
}
})
reqwest({
url: 'path/to/json'
, type: 'json'
, method: 'post'
, contentType: 'application/json'
, headers: {
'X-My-Custom-Header': 'SomethingImportant'
}
, error: function (err) { }
, success: function (resp) {
qwery('#content').html(resp.content)
}
})
// Uses XMLHttpRequest2 credentialled requests (cookies, HTTP basic auth) if supported
reqwest({
url: 'path/to/json'
, type: 'json'
, method: 'post'
, contentType: 'application/json'
, crossOrigin: true
, withCredentials: true
, error: function (err) { }
, success: function (resp) {
qwery('#content').html(resp.content)
}
})
reqwest({
url: 'path/to/data.jsonp?callback=?'
, type: 'jsonp'
, success: function (resp) {
qwery('#content').html(resp.content)
}
})
reqwest({
url: 'path/to/data.jsonp?foo=bar'
, type: 'jsonp'
, jsonpCallback: 'foo'
, jsonpCallbackName: 'bar'
, success: function (resp) {
qwery('#content').html(resp.content)
}
})
reqwest({
url: 'path/to/data.jsonp?foo=bar'
, type: 'jsonp'
, jsonpCallback: 'foo'
, success: function (resp) {
qwery('#content').html(resp.content)
}
, complete: function (resp) {
qwery('#hide-this').hide()
}
})
Promises
reqwest({
url: 'path/to/data.jsonp?foo=bar'
, type: 'jsonp'
, jsonpCallback: 'foo'
})
.then(function (resp) {
qwery('#content').html(resp.content)
}, function (err, msg) {
qwery('#errors').html(msg)
})
.always(function (resp) {
qwery('#hide-this').hide()
})
reqwest({
url: 'path/to/data.jsonp?foo=bar'
, type: 'jsonp'
, jsonpCallback: 'foo'
})
.then(function (resp) {
qwery('#content').html(resp.content)
})
.fail(function (err, msg) {
qwery('#errors').html(msg)
})
.always(function (resp) {
qwery('#hide-this').hide()
})
var r = reqwest({
url: 'path/to/data.jsonp?foo=bar'
, type: 'jsonp'
, jsonpCallback: 'foo'
, success: function () {
setTimeout(function () {
r
.then(function (resp) {
qwery('#content').html(resp.content)
}, function (err) { })
.always(function (resp) {
qwery('#hide-this').hide()
})
}, 15)
}
})
Options
urla fully qualified urimethodhttp method (default:GET)headershttp headers (default:{})dataentity body forPATCH,POSTandPUTrequests. Must be a queryStringorJSONobjecttypea string enum.html,xml,json, orjsonp. Default is inferred by resource extension. Eg:.jsonwill settypetojson..xmltoxmletc.contentTypesets theContent-Typeof the request. Eg:application/jsoncrossOriginfor cross-origin requests for browsers that support this feature.successA function called when the request successfully completeserrorA function called when the request fails.completeA function called whether the request is a success or failure. Always called when complete.jsonpCallbackSpecify the callback function name for aJSONPrequest. This value will be used instead of the random (but recommended) name automatically generated by reqwest.
Security
If you are still requiring support for IE6/IE7, consider including JSON3 in your project. Or simply do the following
<script>
(function () {
if (!window.JSON) {
document.write(' + 'ipt src="http://cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"><\/scr' + 'ipt>')
}
}());
script>
Contributing
$ git clone git://github.com/ded/reqwest.git reqwest
$ cd !$
$ npm install
Please keep your local edits to src/reqwest.js. The base ./reqwest.js and ./reqwest.min.js will be built upon releases.
Running Tests
make test
Browser support
- IE6+
- Chrome 1+
- Safari 3+
- Firefox 1+
- Opera
Ender Support
Reqwest can be used as an Ender module. Add it to your existing build as such:
$ ender add reqwest
Use it as such:
$.ajax({ ... })
Serialize things:
$(form).serialize() // returns query string -> x=y&...
$(form).serialize({type:'array'}) // returns array name/value pairs -> [ { name: x, value: y}, ... ]
$(form).serialize({type:'map'}) // returns an object representation -> { x: y, ... }
$(form).serializeArray()
$.toQueryString({
foo: 'bar'
, baz: 'thunk'
}) // returns query string -> foo=bar&baz=thunk
Or, get a bit fancy:
$('#myform input[name=myradios]').serialize({type:'map'})['myradios'] // get the selected value
$('input[type=text],#specialthing').serialize() // turn any arbitrary set of form elements into a query string
ajaxSetup
Use the request.ajaxSetup to predefine a data filter on all requests. See the example below that demonstrates JSON hijacking prevention:
$.ajaxSetup({
dataFilter: function (response, type) {
if (type == 'json') return response.substring('])}while(1);'.length)
else return response
}
})
RequireJs and Jam
Reqwest can also be used with RequireJs and can be installed via jam
jam install reqwest
define(function(require){
var reqwest = require('reqwest')
});
spm
Reqwest can also be installed via spm
spm install reqwest
jQuery and Zepto Compatibility
There are some differences between the Reqwest way and the jQuery/Zepto way.
method
jQuery/Zepto use type to specify the request method while Reqwest uses method and reserves type for the response data type.
dataType
When using jQuery/Zepto you use the dataType option to specify the type of data to expect from the server, Reqwest uses type. jQuery also can also take a space-separated list of data types to specify the request, response and response-conversion types but Reqwest uses the type parameter to infer the response type and leaves conversion up to you.
JSONP
Reqwest also takes optional jsonpCallback and jsonpCallbackName options to specify the callback query-string key and the callback function name respectively while jQuery uses jsonp and jsonpCallback for these same options.
But fear not! If you must work the jQuery/Zepto way then Reqwest has a wrapper that will remap these options for you:
reqwest.compat({
url: 'path/to/data.jsonp?foo=bar'
, dataType: 'jsonp'
, jsonp: 'foo'
, jsonpCallback: 'bar'
, success: function (resp) {
qwery('#content').html(resp.content)
}
})
// or from Ender:
$.ajax.compat({
...
})
If you want to install jQuery/Zepto compatibility mode as the default then simply place this snippet at the top of your code:
$.ajax.compat && $.ender({ ajax: $.ajax.compat });
Happy Ajaxing!
7 May 23, 2022
13 Nov 7, 2022
29 Dec 21, 2022
3 Oct 24, 2022
15 Oct 2, 2022
4 Jun 19, 2022
331 Jan 4, 2023
4 Oct 17, 2022
98k Jan 5, 2023
199 Jan 2, 2023
6 Mar 2, 2022
516 Jan 3, 2023
7 Nov 21, 2022
293 Jan 3, 2023
3 May 24, 2022
7 Dec 16, 2022
3 Jun 30, 2022
4 Aug 2, 2022
5 Jul 31, 2022