调试失败ajax POST调用，类型处于挂起状态

Question

I have a javascript file that generates some JSON and makes an AJAX call to a php file that writes and creates the JSON file. Everything has been working well until I started generating pretty big JSON files. Currently, I have a 9mb json file and I know it is structured correctly because when I print it out using console.log and manually put into a file, it works.

However, the Ajax call fails to succeed. I have tried a normal XHR call and jQuery Ajax, both fail and do not provide much information. I tried in Chrome and Firefox. Looking at Developer Tools, the status text says (failed) and type says pending. No status code appears and all I have is statusText: "error" in Ajax error callback. I tried messing around with timeout and synchronous calls but nothing seems to work/

Any ideas on how I can debug further?

Code Sample

var name = "test.json";
var json = '{
    "type": "FeatureCollection",
    "bbox": [
        1.4137153625488281,
        42.4288330078125,
        1.7842082977294922,
        42.652313232421875
    ],
    "features": [
        {
            "type": "Feature",
            "bbox": [
                1.4137153625488281,
                42.4288330078125,
                1.7842082977294922,
                42.652313232421875
            ],
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [
                            1.5753068923950195,
                            42.6473388671875
                        ],
                        [
                            1.5828666687011719,
                            42.63543701171875
                        ],
                        [
                            1.5753068923950195,
                            42.6473388671875
                        ]
                    ]
                ]
            },
            "properties": {
                "ID_0": "6",
                "ISO": "AND",
                "NAME_ENGLI": "Andorra",
                "NAME_OBSOL": ""
            }
        }
    ]
}';



$.ajax({
        type:"POST",
        url:"log.php",
        data: { data: json, file: name },
        dataType: "json",
        success:function(response) {
            console.log(response);
        },
        error:function(error) {
            console.log(error);
        }
});

This is log.php:

if (isset($_POST['file'])) {
$file = $_POST['file'];
$data = str_replace("\\", "", $_POST['data']);

file_put_contents($file, $data);
exit();
}

My main question is this, when AJAX fails, how do you debug better? My error callback here does not provide any good information. I tried looking at net-internals in chrome but I can't find much there. Any ideas?

Perhaps this is a Server Side problem. When I look at Chrome net-internals I see that processing a smaller JSON (length = 121664) makes a successful POST request and net-internals show HTTP_TRANSACTION_READ_RESPONSE_HEADERS but the large JSON (length = 7036490) give me --> net_error = -324 (ERR_EMPTY_RESPONSE) instead of response headers. I did not see a timeout information in the phpinfo though...

Answer 1

First, check your error logs on the server side.
Try increasing maxRequestLength setting in PHP, if the request takes to long to handle.

If it's a client side problem your best bet to get it to work cross browser would be to split your post on the client side and posting it in several parts. On the server side you could save it in a temporary file for instance.