Why not use jQuery Ajax for this?

Question

5.00/5 (1 vote)

See more:

I have just found a bug in some ajax code, where the UI 'hangs' when the size of an uploaded image exceeds a size set in my action filter, or in requestLimits maxAllowedContentLength. Debugging tells me the code below is used to upload the offending image. All other Ajax requests for this project are handled by jQuery ajax, with decent error handling, except this image upload request. In the face of it, I don't see why I can't just replace this old school code with a call to the already tested jQuery ajax code. Is there any reason I can't see, as a real JS noob, for this code still being used?

dataAccess.submitJsonWithFileRequest = function(targetUrl, fileToUpload, onComplete) {
    var formData = new FormData();
    formData.append(fileToUpload.name, fileToUpload);

    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
              

            var jsonData = jQuery.parseJSON(xhr.responseText);
         
            onComplete(jsonData);
        }
    };
    xhr.open('POST', targetUrl, true);
    xhr.send(formData);
};

Posted 11-Dec-14 17:25pm

Brady Kelly

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Chubby Ninja · Accepted Answer · 2014-12-12T05:23:00

In the snippet you've posted, there is nothing out of the ordinary going on - there's no reason why you must keep this in-place instead of moving to jQuery, having said that, the reason your code is hanging is because you are waiting for readyState to be 4 and status to be 200 (success) - if your server is throwing an error because the post size is too big you probably wont get a 200 status code, more likely 500

Instead of converting it to jQuery, you could just add some more checks in place

JavaScript

dataAccess.submitJsonWithFileRequest = function(targetUrl, fileToUpload, onComplete) {
    var formData = new FormData();
    formData.append(fileToUpload.name, fileToUpload);
 
    var xhr = new XMLHttpRequest();
 
    xhr.onreadystatechange = function() {

        // first check that the readyState is 4 (request completed)
        if (xhr.readyState == 4) {

            // now check the status
        	if(xhr.status == 200)
        	{
	            var jsonData = jQuery.parseJSON(xhr.responseText);
	            onComplete(jsonData);
        	} else {
        		// there was an error, so status codes could be 
        		// 404 - file not found 
        		// 500 - Server error 
        		// 0 - Request aborted (browser stopped transfer) 
        	}
        }
    };
    xhr.open('POST', targetUrl, true);
    xhr.send(formData);
};