John Resig over at jQuery has announced the release of jQuery 1.0.4 to the public! As usual, there are bug fixes…plus a bit more. His focus for this patch was adding improvements to jQuery’s Ajax functionality. Below is a list of all the updates:
- Tons of bug fixes (Full List)
- Extensions to $.ajax(): $.ajax accepts additional options: beforeSend, async and processData; returns XMLHttpRequest to allow manual aborting of requests, see docs for details.
Example: Add extra headers to an Ajax request using beforeSend
$.ajax({ type: "POST", url: "/files/add/", beforeSend: function(xhr) { xhr.setRequestHeader( "Content-type", "text/plain" ); }, data: "This is the contents of my text file." });
Example: Perform a synchronous Ajax request.
// Get the HTML of a web page and save it // to a variable (the browser will freeze until the // entire request is completed). var html = $.ajax({ type: "GET", url: "test.html", async: false }).responseText; // Add the HTML into the page $("#list").html( html );
Example: Sending a JavaScript object using processData.
// The data to send to the server var params = { name: "John", city: "Boston" }; $.ajax({ type: "POST", url: "/user/add/", processData: params });
Example: Aborting an Ajax request after a specific delay in time.
// Perform a simple Ajax request var req = $.ajax({ type: "GET", url: "/user/list/", success: function(data) { // Do something with the data... // Then remove the request. req = null; } }); // Wait for 5 seconds setTimeout(function(){ // If the request is still running, abort it. if ( req ) req.abort(); }, 5000);
- AJAX module: The public $.ajax API is now used internally (for $.get/$.post etc.); loading scripts works now much more reliably in all browsers (with the exception of Safari, which is a work in progress).
- New global Ajax handler: ajaxSend – called before an Ajax request is sent.
Example: Add extra headers to all Ajax requests using the ajaxSend event.
$(document).ajaxSend(function(xhr){ xhr.setRequestHeader("X-Web-Request", "MySite.com"); });
- Extensions to global Ajax handlers: ajaxSend, ajaxSuccess, ajaxError and ajaxComplete get XMLHttpRequest and settings passed as arguments.
Example: Prevent any POST requests that are sending too much data.
$(document).ajaxSend(function(xhr,options){ if ( options.type == "POST" && options.data.length > 1024 ) xhr.abort(); });
Example: Show a special message for requests submitted using an Ajax POST.
$("#dataSent").ajaxSend(function(xhr,options){ if ( options.type == "POST" ) $(this).show(); });
- Extensions to event handling: pageX and pageY are available in all browsers now. (IE does not provide native pageX/Y).
Example: Have a tooltip follow a user’s mouse around the page.
$(document).mousemove(function(e){ $("#mousetip").css({ top: e.pageY + "px", left: e.pageX + "px" }); });
- Improved docs: $(String) method has now two separate descriptions, one for selecting elements, one for creating html on-the-fly.
- FX module: Most inline styles added by animations are now removed when the animation is complete, eg. height style when animating height (exception: display styles).