XHR Lv2 act

XHR Lv2 act.md

<script>
function successCase() {
  var href = location.href;

  console.log(href);

  var xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function(event) {
    console.log("onreadystatechange", "readyState", this.readyState, "status", this.status);
  };
  xhr.onloadstart = function(event) { console.log("onloadstart", "readyState", this.readyState, "status", this.status); };
  xhr.onprogress  = function(event) { console.log("onprogress", "readyState", this.readyState, "status", this.status); };
  xhr.onabort     = function(event) { console.log("onabort", "readyState", this.readyState, "status", this.status); };
  xhr.onerror     = function(event) { console.log("onerror", "readyState", this.readyState, "status", this.status); };
  xhr.onload      = function(event) { console.log("onload", "readyState", this.readyState, "status", this.status); };
  xhr.ontimeout   = function(event) { console.log("ontimeout", "readyState", this.readyState, "status", this.status); };
  xhr.onloadend   = function(event) { console.log("onloadend", "readyState", this.readyState, "status", this.status); };
  xhr.addEventListener("readystatechange", function(event) {
    console.log("readystatechange", "readyState", this.readyState, "status", this.status);
  });
  xhr.addEventListener("loadstart", function(event) { console.log("loadstart", "readyState", this.readyState, "status", this.status); });
  xhr.addEventListener("progress",  function(event) { console.log("progress", "readyState", this.readyState, "status", this.status); });
  xhr.addEventListener("abort",     function(event) { console.log("abort", "readyState", this.readyState, "status", this.status); });
  xhr.addEventListener("error",     function(event) { console.log("error", "readyState", this.readyState, "status", this.status); });
  xhr.addEventListener("load",      function(event) { console.log("load", "readyState", this.readyState, "status", this.status); });
  xhr.addEventListener("timeout",   function(event) { console.log("timeout", "readyState", this.readyState, "status", this.status); });
  xhr.addEventListener("loadend",   function(event) { console.log("loadend", "readyState", this.readyState, "status", this.status); });

  xhr.open("GET", href);
  xhr.send();
}

function errorCase() {
  var href = location.href + ".jpg";

  console.log(href);

  var xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function(event) {
    console.log("onreadystatechange", "readyState", this.readyState, "status", this.status);
  };
  xhr.onloadstart = function(event) { console.log("onloadstart", "readyState", this.readyState, "status", this.status); };
  xhr.onprogress  = function(event) { console.log("onprogress", "readyState", this.readyState, "status", this.status); };
  xhr.onabort     = function(event) { console.log("onabort", "readyState", this.readyState, "status", this.status); };
  xhr.onerror     = function(event) { console.log("onerror", "readyState", this.readyState, "status", this.status); };
  xhr.onload      = function(event) { console.log("onload", "readyState", this.readyState, "status", this.status); };
  xhr.ontimeout   = function(event) { console.log("ontimeout", "readyState", this.readyState, "status", this.status); };
  xhr.onloadend   = function(event) { console.log("onloadend", "readyState", this.readyState, "status", this.status); };
  xhr.addEventListener("readystatechange", function(event) {
    console.log("readystatechange", "readyState", this.readyState, "status", this.status);
  });
  xhr.addEventListener("loadstart", function(event) { console.log("loadstart", "readyState", this.readyState, "status", this.status); });
  xhr.addEventListener("progress",  function(event) { console.log("progress", "readyState", this.readyState, "status", this.status); });
  xhr.addEventListener("abort",     function(event) { console.log("abort", "readyState", this.readyState, "status", this.status); });
  xhr.addEventListener("error",     function(event) { console.log("error", "readyState", this.readyState, "status", this.status); });
  xhr.addEventListener("load",      function(event) { console.log("load", "readyState", this.readyState, "status", this.status); });
  xhr.addEventListener("timeout",   function(event) { console.log("timeout", "readyState", this.readyState, "status", this.status); });
  xhr.addEventListener("loadend",   function(event) { console.log("loadend", "readyState", this.readyState, "status", this.status); });

  xhr.open("GET", href);
  xhr.send();
}
</script>

http://localhost/oss/my/Proxy.js/test/act/index.html
readystatechange readyState 1 status 0
loadstart readyState 1 status 0
readystatechange readyState 2 status 200
progress readyState 2 status 200
readystatechange readyState 3 status 200
readystatechange readyState 4 status 200
load readyState 4 status 200
loadend readyState 4 status 200

http://localhost/oss/my/Proxy.js/test/act/index.html.jpg
readystatechange readyState 1 status 0
loadstart readyState 1 status 0
GET http://localhost/oss/my/Proxy.js/test/act/index.html.jpg 404 (Not Found)
readystatechange readyState 2 status 404
progress readyState 2 status 404
readystatechange readyState 3 status 404
readystatechange readyState 4 status 404
load readyState 4 status 404
loadend readyState 4 status 404