jQuery.ajax

This commit is contained in:
SheetJS 2023-03-20 14:30:42 -04:00
parent 3581f33075
commit 821130bed1
4 changed files with 158 additions and 0 deletions

@ -289,6 +289,51 @@ function SheetJSFetchUL() {
</details>
### jQuery
`jQuery.ajax` (`$.ajax`) does not support binary data out of the box. A custom
`ajaxTransport` can add required functionality. SheetJS users have reported
success with `jquery.binarytransport.js`.
After including the main `jquery.js` and `jquery.binarytransport.js` scripts,
`$.ajax` will support `dataType: "binary"` and `processData: false`.
_Download Files_
**[Live Download Demo](pathname:///jquery/index.html)**
In a GET request, the default behavior is to return a `Blob` object. Passing
`responseType: "arraybuffer"` returns a proper `ArrayBuffer` object in IE10:
```js
$.ajax({
type: "GET", url: "https://sheetjs.com/pres.numbers",
/* suppress jQuery post-processing */
// highlight-next-line
processData: false,
/* use the binary transport */
// highlight-next-line
dataType: "binary",
/* pass an ArrayBuffer in the callback */
// highlight-next-line
responseType: "arraybuffer",
success: function (ab) {
/* at this point, ab is an ArrayBuffer */
// highlight-next-line
var wb = XLSX.read(ab);
/* do something with workbook here */
var ws = wb.Sheets[wb.SheetNames[0]];
var html = XLSX.utils.sheet_to_html(ws);
$("#out").html(html);
}
});
```
### Wrapper Libraries
Before `fetch` shipped with browsers, there were various wrapper libraries to

@ -0,0 +1,59 @@
<!DOCTYPE html>
<!-- sheetjs (C) 2013-present SheetJS https://sheetjs.com -->
<!-- vim: set ts=2: -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="robots" content="noindex">
<title>SheetJS jQuery Demo</title>
<style>
#drop {
border: 2px dashed #bbb;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 25px;
text-align: center;
font: 20pt bold, "Vollkorn";
color: #bbb
}
a {
text-decoration: none
}
</style>
</head>
<body>
<pre>
<b><a href="https://sheetjs.com">SheetJS jQuery Demo</a></b>
<br />
<button id="doit">Parse pres.numbers</button><br />
<div id="out"></div>
(view source to see the integration code)
</pre>
<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>
<script src="jquery-3.6.4.min.js"></script>
<script src="jquery.binarytransport.js"></script>
<script>
$("#doit").click(function () {
$.ajax({
type: "GET",
url: "https://sheetjs.com/pres.numbers",
processData: false,
dataType: "binary",
responseType: "arraybuffer",
success: function (ab) {
/* at this point, ab is an ArrayBuffer */
var wb = XLSX.read(ab);
var ws = wb.Sheets[wb.SheetNames[0]];
var html = XLSX.utils.sheet_to_html(ws);
$("#out").html(html);
}
});
});
</script>
</body>
</html>

File diff suppressed because one or more lines are too long

@ -0,0 +1,52 @@
/*! https://www.henryalgus.com/reading-binary-files-using-jquery-ajax/ */
/**
*
* jquery.binarytransport.js
*
* @description. jQuery ajax transport for making binary data type requests.
* @version 1.0
* @author Henry Algus <henryalgus@gmail.com>
*
*/
// use this transport for "binary" data type
$.ajaxTransport("+binary", function(options, originalOptions, jqXHR){
// check for conditions and support for blob / arraybuffer response type
if (window.FormData && ((options.dataType && (options.dataType == 'binary')) || (options.data && ((window.ArrayBuffer && options.data instanceof ArrayBuffer) || (window.Blob && options.data instanceof Blob))))) {
return {
// create new XMLHttpRequest
send: function(headers, callback){
// setup all variables
var xhr = new XMLHttpRequest(),
url = options.url,
type = options.type,
async = options.async || true,
// blob or arraybuffer. Default is blob
dataType = options.responseType || "blob",
data = options.data || null,
username = options.username || null,
password = options.password || null;
xhr.addEventListener('load', function(){
var data = {};
data[options.dataType] = xhr.response;
// make callback and send data
callback(xhr.status, xhr.statusText, data, xhr.getAllResponseHeaders());
});
xhr.open(type, url, async, username, password);
// setup custom headers
for (var i in headers) {
xhr.setRequestHeader(i, headers[i]);
}
xhr.responseType = dataType;
xhr.send(data);
},
abort: function(){
jqXHR.abort();
}
};
}
});