Why If and else condition work both in JavaScript. if (xhr.readyState == 4 && xhr.status == 200)

I am working on php MVC project.

I created a profile edit page in background JavaScript If and Else both code executing. profile edit Successfully but else code work and it's show error "Sorry, this content isn't available right now".

why this else condition work??

• same This code work in login and registration page.
• save in local file and run than it work :-

  help me! Thank you!!

  CodePudding user response：

  The readystatechange event fires multiple times.

  Value   State       Description
  0       UNSENT      Client has been created. open() not called yet.
  1       OPENED      open() has been called.
  2       HEADERS_RECEIVED    send() has been called, and headers and status are available.
  3       LOADING     Downloading; responseText holds partial data.
  4       DONE        The operation is complete.
  

  Your

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

  branch will only be entered into at the end of a request, if the request was successful. But earlier, while the request is still ongoing, other state changes will occur, and the else branch will be entered into.

  Instead, only do anything if the readyState is 4 - and, when it is 4, you can parse the response, or populate the #Profile_Edit_Msg to say there was a problem.

  Other improvements:

  • Save the Profile_Edit_Msg in a variable instead of repetitively selecting it over and over again
  • Use strict equality, not sloppy equality
  • Use .textContent when assigning text to an element - only use .innerHTML when inserting HTML markup
  • JSON is a particular format of a string that can be deserialized into an object or other value. JSON.parse does not return JSON - JSON.parse is called with a JSON-formatted string and returns an object. Call your json variable something else.
  • denger looks misspelled - did you mean danger? (Typos are a common problem in programming - better to fix them earlier than later)

  xhr.onreadystatechange = function () {
      if (xhr.readyState !== 4) {
          return;
      }
      const profile = document.querySelector("#Profile_Edit_Msg");
      if (xhr.status === 200) {
          const result = JSON.parse(xhr.responseText);
          if (result.Status === "Ok") {
              window.location.href = "Profile";
          } else {
              profile.classList.remove("active_success");
              profile.classList.add("active_denger");
              profile.innerHTML = json.Message;
          }
      } else {
          profile.classList.add("active_denger");
          profile.textContent = "Sorry, this content isn't available right now";
      }
  };
  

  You could also consider using the fetch API instead of XMLHttpRequest - fetch is a bit nicer to work with and has been supported in all modern browsers for ages.