html5 - Inconsistent AJAX POST status 400 . Issues with image complexity -

our team has developed js html5 canvas based paint application. in following code, image data fetched canvas base 64 encoding , posted servlet via ajax. data post behaves erratically. if image simple , in straight line, ajax status = 200 , image gets saved. if image complex, status = 400 , data not saved. why should content of post create issues posting of data itself?

function getcode(){   var canvas = document.getelementbyid('imageview');  var context = canvas.getcontext('2d');   // draw cloud   context.beginpath();   // save canvas image data url    var dataurl = canvas.todataurl();    // set canvasimg image src dataurl   // can saved image    document.getelementbyid('canvasimg').src = dataurl;    var uri= document.getelementbyid('canvasimg').src;     uri = uri.replace('data:image/png;base64,','');   uri = uri.replace('=', '');    uri = uri.trim();   alert("uri "+uri);    var ajaxobject ;     if(window.xmlhttprequest){     ajaxobject = new xmlhttprequest();     } else if(window.activexobject){       ajaxobject = new activexobject("microsoft.xmlhttp");     }else if(window.activexobject){      ajaxobject = new activexobject("msxml2.xmlhttp");     }        ajaxobject.open("post", "saveimageservlet?image="+uri, true);    ajaxobject.setrequestheader("content-type","application/x-www-form-urlencoded");    ajaxobject.onreadystatechange = function(){     if(ajaxobject.readystate==4){     alert(ajaxobject.status);      if(ajaxobject.status==200){     alert(ajaxobject.responsetext);          }}   };   ajaxobject.send(null);         } 

from looking @ code, problem seems you're passing data in querystring instead of using request body (as should doing since you're setting post verb).

your uri should this:

saveimageservlet 

without question mark , parameter. parameter should set in request body. using jquery ajax request this:

$.ajax({ contenttype: 'text/plain', data: {     "image": yourbase64string }, datatype: 'application/json', // or whatever return datatype want success: function(data){     // callback in case of success }, error: function(){     // callback in case of error }, type: 'post', url: '/saveimageservlet' }); 

on server side should reading data appropriate place. example, if you're using .net read this:

request.form["image"] 

instead of:

request.querystring["image"] 

this should work intended , consistently.