Teach your XMLHttpRequest some JSON | Pixels vs. Bytes. I recently started to use JSON for the data exchange between websites and servers (Yeah, I know I’m late ;)) and was looking for a lightweight solution to send HTTP requests carrying JSON encoded data via JavaScript. The best idea I’ve found was the JSONRequest proposal on json.org, but this has two essential flaws: browser support is not really existent and it doesn’t allow RESTful communication. So I stuck with the native XMLHttpRequest object and extended it’s functionality. The compressed code is just 822 Bytes and XMLHttpRequest compatible.
You’re even able to send cross-domain-requests with a bit extra code (see my AJAX cross domain requests with CORS post for more). The code is reported to work with IE9, FF7, Chrome 16, Safari 5.1 and Opera 11.60 beta, but I’m pretty sure every browser with JSON and XMLHttpRequest support should work (tell me whether it works with your browser or not). The JSONHttpRequest is a transparent extension of the standard XMLHttpRequest object. New Tricks in XMLHttpRequest2. Introduction One of the unsung heros in the HTML5 universe is XMLHttpRequest. Strictly speaking XHR2 isn't HTML5. However, it's part of the incremental improvements browser vendors are making to the core platform. I'm including XHR2 in our new bag of goodies because it plays such an integral part in today's complex web apps.
Turns out our old friend got a huge makeover but many folks are unaware of its new features. This tutorial highlights some of the new features in XMLHttpRequest, especially those that can be used for working with files. Fetching data Fetching a file as a binary blob has been painful with XHR. The old way to fetch an image: While this works, what you actually get back in the responseText is not a binary blob. Specifying a response format In the previous example, we downloaded the image as a binary "file" by overriding the server's mime type and processing the response text as a binary string. Xhr.responseType xhr.response Much nicer! ArrayBuffer responses Blob responses. Demo upload html5. Upload folders. Reading local files in JavaScript. Introduction HTML5 finally provides a standard way to interact with local files, via the File API specification.
As example of its capabilities, the File API could be used to create a thumbnail preview of images as they're being sent to the server, or allow an app to save a file reference while the user is offline. Additionally, you could use client-side logic to verify an upload's mimetype matches its file extension or restrict the size of an upload. The spec provides several interfaces for accessing files from a 'local' filesystem: File - an individual file; provides readonly information such as name, file size, mimetype, and a reference to the file handle. When used in conjunction with the above data structures, the FileReader interface can be used to asynchronously read a file through familiar JavaScript event handling. Selecting files The first thing to do is check that your browser fully supports the File API: Using form input for selecting Example: Using form input for selecting.
File API.