重构前后的XMLHttpRequest
重构前的XMLHttpRequest:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" >
3 <head>
4 <title></title>
5 <script type="text/javascript">
6
7 var READY_STATE_UNINITIALIZED = 0;
8 var READY_STATE_LOADING = 1;
9 var READY_STATE_LOADED = 2;
10 var READY_STATE_INTERACTIVE = 3;
11 var READY_STATE_COMPLETE = 4;
12 var req;
13 var console;
14
15
16 function sendRequest(url, params, HttpMethod) {
17 if (!HttpMethod) {
18 HttpMethod = "GET";
19 }
20 req = initXMLHTTPRequest();
21 if (req) {
22 req.onreadystatechange = onReadyStateChange;
23 req.open(HttpMethod, url, true);
24 req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
25 req.send(params);
26 }
27 }
28
29 function onReadyStateChange() {
30 var ready = req.readyState;
31 var data = null;
32 if (ready == READY_STATE_COMPLETE) {
33 data = req.responseText;
34 } else {
35 data = "loading
[" + ready + "]";
36 }
37 toConsole(data);
38 }
39
40 function initXMLHTTPRequest() {
41 var xRequest = null;
42 if (window.XMLHttpRequest) {
43 xRequest = new XMLHttpRequest();
44 } else if (window.ActiveXObject) {
45 xRequest = new ActiveXObject("Microsoft.XMLHTTP");
46 }
47 return xRequest;
48 }
49
50 function toConsole(data) {
51 if (console != null) {
52 var newline = document.createElement("div");
53 console.appendChild(newline);
54 var txt = document.createTextNode(data);
55 newline.appendChild(txt);
56 }
57 }
58
59 window.onload = function() {
60 console = document.getElementById("console");
61 sendRequest("data.txt");
62 }
63
64
65 </script>
66 </head>
67 <body>
68 <div id="console"></div>
69 </body>
70 </html>
2 <html xmlns="http://www.w3.org/1999/xhtml" >
3 <head>
4 <title></title>
5 <script type="text/javascript">
6
7 var READY_STATE_UNINITIALIZED = 0;
8 var READY_STATE_LOADING = 1;
9 var READY_STATE_LOADED = 2;
10 var READY_STATE_INTERACTIVE = 3;
11 var READY_STATE_COMPLETE = 4;
12 var req;
13 var console;
14
15
16 function sendRequest(url, params, HttpMethod) {
17 if (!HttpMethod) {
18 HttpMethod = "GET";
19 }
20 req = initXMLHTTPRequest();
21 if (req) {
22 req.onreadystatechange = onReadyStateChange;
23 req.open(HttpMethod, url, true);
24 req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
25 req.send(params);
26 }
27 }
28
29 function onReadyStateChange() {
30 var ready = req.readyState;
31 var data = null;
32 if (ready == READY_STATE_COMPLETE) {
33 data = req.responseText;
34 } else {
35 data = "loading
[" + ready + "]";36 }
37 toConsole(data);
38 }
39
40 function initXMLHTTPRequest() {
41 var xRequest = null;
42 if (window.XMLHttpRequest) {
43 xRequest = new XMLHttpRequest();
44 } else if (window.ActiveXObject) {
45 xRequest = new ActiveXObject("Microsoft.XMLHTTP");
46 }
47 return xRequest;
48 }
49
50 function toConsole(data) {
51 if (console != null) {
52 var newline = document.createElement("div");
53 console.appendChild(newline);
54 var txt = document.createTextNode(data);
55 newline.appendChild(txt);
56 }
57 }
58
59 window.onload = function() {
60 console = document.getElementById("console");
61 sendRequest("data.txt");
62 }
63
64
65 </script>
66 </head>
67 <body>
68 <div id="console"></div>
69 </body>
70 </html>
重构后的XMLHttpRequest:
1 var net = new Object(); //名字空間對象
2 net.READY_STATE_UNINITIALIZED = 0;
3 net.READY_STATE_LOADING = 1;
4 net.READY_STATE_LOADED = 2;
5 net.READY_STATE_INTERACTIVE = 3;
6 net.READY_STATE_COMPLETE = 4;
7 net.ContentLoader = function(url, onload, onerror) { //構造函數
8 this.url = url;
9 this.req = null;
10 this.onload = onload;
11 this.onerror = (onerror) ? onerror : this.defaultError;
12 this.loadXMLDoc(url);
13 }
14
15 net.ContentLoader.prototype = {
16 loadXMLDoc: function(url) { //重新命名的initXMLHttpRequest函數
17 if (window.XMLHttpRequest) { //重構過的loadXML函數
18 this.req = new XMLHttpRequest();
19 }
20 else if (window.ActiveXObject) {
21 this.req = new ActiveXObject("Microsoft.XMLHTTP");
22 }
23 if (this.req) {
24 try {
25 var loader = this;
26 this.req.onreadystatechange = function() {
27 loader.onReadyState.call(loader);
28 }
29 this.req.open('GET', url, true); //重構過的sendRequest函數
30 this.req.send(null);
31 } catch (err) {
32 this.onerror.call(this);
33 }
34 }
35 },
36 onReadyState: function() { //重構過的回調函數
37 var req = this.req;
38 var ready = req.readyState;
39 if (ready == net.READY_STATE_COMPLETE) {
40 var httpStatus = req.status;
41 if (httpStatus == 200 || httpStatus == 0) {
42 this.onload.call(this);
43 } else {
44 this.onerror.call(this);
45 }
46 }
47 },
48 defaultError: function() {
49 alert("error fetching data!"
50 + "\n\nreadyState:" + this.req.readyState
51 + "\nstatus:" + this.req.status
52 + "\nheaders:" + this.req.getAllResponseHeaders());
53 }
54 }
55
56 function myCallBack() {
57 alert{this.url
58 +" loaded! Here's the content:\n\n"
59 +this.req.responseText};
60 }
2 net.READY_STATE_UNINITIALIZED = 0;
3 net.READY_STATE_LOADING = 1;
4 net.READY_STATE_LOADED = 2;
5 net.READY_STATE_INTERACTIVE = 3;
6 net.READY_STATE_COMPLETE = 4;
7 net.ContentLoader = function(url, onload, onerror) { //構造函數
8 this.url = url;
9 this.req = null;
10 this.onload = onload;
11 this.onerror = (onerror) ? onerror : this.defaultError;
12 this.loadXMLDoc(url);
13 }
14
15 net.ContentLoader.prototype = {
16 loadXMLDoc: function(url) { //重新命名的initXMLHttpRequest函數
17 if (window.XMLHttpRequest) { //重構過的loadXML函數
18 this.req = new XMLHttpRequest();
19 }
20 else if (window.ActiveXObject) {
21 this.req = new ActiveXObject("Microsoft.XMLHTTP");
22 }
23 if (this.req) {
24 try {
25 var loader = this;
26 this.req.onreadystatechange = function() {
27 loader.onReadyState.call(loader);
28 }
29 this.req.open('GET', url, true); //重構過的sendRequest函數
30 this.req.send(null);
31 } catch (err) {
32 this.onerror.call(this);
33 }
34 }
35 },
36 onReadyState: function() { //重構過的回調函數
37 var req = this.req;
38 var ready = req.readyState;
39 if (ready == net.READY_STATE_COMPLETE) {
40 var httpStatus = req.status;
41 if (httpStatus == 200 || httpStatus == 0) {
42 this.onload.call(this);
43 } else {
44 this.onerror.call(this);
45 }
46 }
47 },
48 defaultError: function() {
49 alert("error fetching data!"
50 + "\n\nreadyState:" + this.req.readyState
51 + "\nstatus:" + this.req.status
52 + "\nheaders:" + this.req.getAllResponseHeaders());
53 }
54 }
55
56 function myCallBack() {
57 alert{this.url
58 +" loaded! Here's the content:\n\n"
59 +this.req.responseText};
60 }
