Callback callback, although an Ajax request is being executed, and the server returns 200 with data

Question

I have an HTML5 test web page test.html with a cache manifest. The web page executes an Ajax request to the same server, to the do_get_data.php web page specified in the NETWORK: section NETWORK: in the cache manifest.

The request is executed by both Firefox 10 and iPhone iOS 5 Safari (it is registered in the do_get_data.php script serving PHP). Firefox 10 calls the success callback in 10 seconds, that is, when returning data from the server. However, my iPhone iOS 5 Safari calls the fail callback function immediately after starting the request and does not call the success callback function.

On iPhone Safari iOS 5, textStatus has error and JSON.stringify(jqXHR) has {"readyState":0,"responseText":"","status":0,"statusText":"error"} .

The request is executed using the following code in test.html :

 <script type="text/javascript"> function test_ok(data) { alert('Test OK, data: ' + JSON.stringify(data)); } function testFail(jqXHR, textStatus) { alert(textStatus + ' | ' + JSON.stringify(jqXHR)); } function get_data(testurl) { var senddata, request; alert('Request for ' + testurl + ' started.'); window.testid = new Date().getTime(); senddata = { background: true, requestId: window.testid }; request = $.ajax({ url: testurl, cache: false, type: "GET", data: senddata, success: test_ok }); request.fail(testFail); } </script> 

 <input type="button" onclick="get_data('do_get_data.php')" value="test sending" /> 

For reference, do_get_data.php looks like this:

 <?php $id = md5(rand() . rand()); trigger_error(implode("\t", array('start', $id, $_SERVER['REQUEST_URI'], $_SERVER['REMOTE_ADDR'], $_SERVER['USER_AGENT'])); sleep(10); header('Content-Type: application/json'); $json = json_encode(array('msg'=>'Test was OK')); trigger_error(implode("\t", array('echo', $id, $json)); echo $json; ?> 

Answer 1

I was given to understand that the reason for status code 0 is (1) loading from file:// , (2) an unreachable network resource, and (3) cross-domain policy. Since you are loading PHP, we can safely manage number 1, and since your server also registers Safari also number 2, which leaves us with 3. Is all the code data in the same domain? If not, use the Access-Control-Allow-Origin HTTP header in PHP to allow cross-domain requests.

 header('Access-Control-Allow-Origin: http://example.org') 

In addition, you must make sure that clicking on the button tab only performs onclick , and not any other default behavior (regardless of what may be on iOS). Returning false from the onclick handler will prevent it:

 <input type="button" onclick="get_data('do_get_data.php'); return false" ... /> 

UPDATE:

As a last resort, you can always simply turn off the cache manifest to move it, possibly a complex implementation.

Answer 2

I struggled with this for a while, and the response was a response to the error message:

use

NETWORK: *

in the cache manifest to avoid caching an ajax request.

Answer 3

What if you change your $.ajax to

 $.ajax({ url: testurl, cache: false, type: "GET", data: senddata }).then( function(result) { test_ok(result); }, function(result) { testFail(result); } ); 

Answer 4

You don’t know how you use your site under iOS, but when using manifest files, there was a problem with jQuery and AJAX requests: http://bugs.jquery.com/ticket/8412

Although you are already listing the resource in the NETWORK section of the manifest, I would suggest trying another workaround listed there:

 jQuery.ajaxSetup({ isLocal: true });