无法操纵来自xmlHttpRequest 2的响应

Question

I'm using XHR 2 to upload/save files.

According to the response of the server I want to perform an action. For example if the responce is "Saved" I want to hide a div or if the response is "Not Saved" I want to show another div etc...

I implemented what appears to be a simple code that should be working , but is not

Here is the snippet of the XHR

    //initialize

     var xhr = new XMLHttpRequest();
          xhr.open('POST', 'upload.php');
          xhr.responseType="text";
          xhr.onload = function() {

                                  //if all ok.... 
                      if (xhr.status === 200)         
                      { 
                                       //update html5 progress bar                                   
                       progress.value = progress.innerHTML = 100;

                                       //get the respnse  
                      var data=xhr.response;

                                      //convert it to sting - kind of overkill, I know, but I'm stack
                           var data2=data.toString();

                                      //alert it -- works    
                      alert('data2     '+data2);



                                 //now, do something, according to the response -- NOT working, never alert anything
                               if (data2=="Not Saved"){alert('Ooops, not saved');}


                                if(data2=="Saved"){alert('It's all good');} 


                              if(data2=="File too big"){alert('hey, you are watching Jake and Amir');}  


                              document.getElementById('imagesaved').innerHTML=data; 


                     } 

//refers to if (xhr.status === 200)               
else {document.getElementById("imagesaved").innerHTML="Connect to server failed";}

What is wrong here? This should be working right? Any suggestions?

Thanks

EDIT

I put the alerts for testing. What I actually want to do is call some functions.

If I put

if (data2=="Not Saved"){functionOne();}


if(data2=="Saved"){functionTwo();}  


if(data2=="File too big"){functionThree();} 

the functions never get called

if I put

if (data2!="Not Saved"){functionOne();}


if(data2!="Saved"){functionTwo();}  


if(data2!="File too big"){functionThree();}

ALL the functions are called!!!

I still dont get it...Maybe its something with the response? Or the onload function?

Thanks again

Answer 1

What I finally did is make the server response with numbers, not text. So encoding does not matter any more...

This is the code

    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
                      if (xhr.status == 200)          
                      {                                      
                      var data=xhr.response;



                              if(data==1) 

         //say to  the user is saved
{document.getElementById('imagesaved').innerHTML="Saved";}  

    //say to the user, there was an error

    else{document.getElementById('imagesaved').innerHTML="Error";}


                                    }         
                        //say to the user that connection to the server failed
                     else {document.getElementById("imagesaved").innerHTML="Cannot connect";}
          };


          xhr.open('POST', 'upload.php');
     xhr.send(formData);

This is a workaround. I dont know if its the right way to solve this problem , technically. I decided to post it anyway, to help others to quickly solve similar problems. If anyboy else has a better way to suggest , please do.

Answer 2

In this line : if(data2=="Saved"){alert('It's all good');} , you have to escape " ' ". So convert it to : if(data2=="Saved"){alert('It\\'s all good');}

Are you sure that the response of your ajax is text/plain ? Look on the console (ctrl+shift+i on chrome, F12 on firefox), on net or network tab.

Look on console tab if you got some javascript errors too.