重构前后的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 >

重构后的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  }

转载于:https://www.cnblogs.com/theurgy/archive/2009/08/17/1547893.html