Abort pending XHR in popstate handler.

Author: AlexHill

jquery.pjax.js

@@ -331,11 +331,7 @@ function pjax(options) {
   }
 
   // Cancel the current request if we're already pjaxing
-  var xhr = pjax.xhr
-  if ( xhr && xhr.readyState < 4) {
-    xhr.onreadystatechange = $.noop
-    xhr.abort()
-  }
+  abortXHR(pjax.xhr)
 
   pjax.options = options
   var xhr = pjax.xhr = $.ajax(options)
@@ -402,6 +398,12 @@ if ('state' in window.history) {
 // You probably shouldn't use pjax on pages with other pushState
 // stuff yet.
 function onPjaxPopstate(event) {
+
+  // Hitting back or forward should override any pending PJAX request.
+  if (!initialPop) {
+    abortXHR(pjax.xhr)
+  }
+
   var state = event.state
 
   if (state && state.container) {
@@ -504,6 +506,15 @@ function fallbackPjax(options) {
   form.submit()
 }
 
+// Internal: Abort an XmlHttpRequest if it hasn't been completed,
+// also removing its event handlers.
+function abortXHR(xhr) {
+  if ( xhr && xhr.readyState < 4) {
+    xhr.onreadystatechange = $.noop
+    xhr.abort()
+  }
+}
+
 // Internal: Generate unique id for state object.
 //
 // Use a timestamp instead of a counter since ids should still be

test/unit/pjax.js

@@ -749,6 +749,49 @@ if ($.support.pjax) {
     }, 0)
   }
 
+  asyncTest("clicking back while loading cancels XHR", function() {
+    var frame = this.frame
+
+    frame.$("#main").one('pjax:complete', function() {
+
+      frame.$("#main").one('pjax:send', function() {
+
+        // Check that our request is aborted (need to check
+        // how robust this is across browsers)
+        frame.$("#main").one('pjax:complete', function(e, xhr, textStatus) {
+          equal(xhr.status, 0)
+          equal(textStatus, 'abort')
+        })
+
+        // Make sure the URL and content remain the same after the
+        // XHR would have arrived (delay on timeout.html is 1s)
+        setTimeout(function() {
+          var afterBackLocation = frame.location.pathname
+          var afterBackTitle = frame.document.title
+
+          setTimeout(function() {
+            equal(frame.location.pathname, afterBackLocation)
+            equal(frame.document.title, afterBackTitle)
+            start()
+          }, 1000)
+        }, 500)
+
+        frame.history.back()
+
+      })
+
+      frame.$.pjax({
+        url: "timeout.html",
+        container: "#main"
+      })
+    })
+
+    frame.$.pjax({
+      url: "hello.html",
+      container: "#main"
+    })
+  })
+
   asyncTest("popstate going back to page", function() {
     var frame = this.frame