【原创】cs+html+js+css模式(五)：页面调用JS的编写

1.         回顾：

上面的几章，把我们在服务器端需要写得代码与内容已经介绍完了，大家应该能基本理解是怎么与服务器端代码交互的了吧，主要是用到了HttpHander类来进行信息的窃取，也用了vs中的特性来进行开发的。

2.         提要：

在本节会介绍下js前端的调用，怎么用它来进行后台调用与处理。

3.         Js代码解析：

 

主要代码

1 .     if  ( ! window.Request) {
2 .         // /<summary>请求类。只能通过调用 requestPool 对象的 getRequest 方法返回 Request 类的实例。</summary>
3 .        window.Request  =   function (obj) {
4 .             if  ( ! obj) {  throw   ' argument \ ' obj\ '  is a null reference or undefined. ' ; }
5 .             if  (arguments.callee.caller  !=  window.requestPool.getRequest) {  throw   ' Can not call Request constructor directly ' ; }
6 .             var  timerId  =   0 ;
// 设置请求的方式只允许进行POST请求，给请求对象加上头
7 .             function  prepare(requestType, url) {
8 .                 var  rtype  =  requestType.toUpperCase();
9 .                obj.open(rtype, url, _self.async);
10 .                setHeader();
11 .                 if  (rtype  ==   ' SOAP ' ) {  throw   ' SOAP request deos not implement. ' ; }
12 .                 if  (rtype  ==   ' POST ' ) { obj.setRequestHeader( " Content-Type " ,  " application/x-www-form-urlencoded " ); }
13 .            }
// 设置头函数
14 .             function  setHeader() {  for  ( var  header  in  headers) { obj.setRequestHeader(header, headers[header]); } }
// 根据接收类型取请求结果
15 .             function  assignResult(receiveType) {
16 .                 switch  (receiveType) {
17 .                     case   0 :  // responseText    [default]
18 .                         return  obj.responseText;
19 .                         break ;
20 .                     case   1 :  // responseXML
21 .                         return  obj.responseXML;
22 .                         break ;
23 .                     case   2 :  // responseBody
24 .                         return  obj.responseBody;
25 .                         break ;
26 .                     default :
27 .                         throw   ' unknown receive type. ' ;
28 .                }
29 .            }
// 设置超时时间
30 .             function  fireTimeOut() {
31 .                obj.abort();
32 .                fireEvent( null , _self.ontimeout, { code:  600 , message:  ' 请求超时。 '  });
33 .            }
// 回调设置
34 .             function  callback() {
35 .                 if  (obj.readyState  ==   4 ) {
36 .                     //  已获取到服务器端的响应，清除超时计时。
37 .                     if  (timerId) {
38 .                        clearTimeout(timerId);
39 .                        timerId  =   0 ;
40 .                    }
41 .                     if  (obj.status  ==   200 ) {
42 .                         try  {
43 .                            fireEvent( null , _self.oncomplete, assignResult(_self.receiveType));
44 .                        }
45 .                         catch  (e) {
46 .                            fireEvent( null , _self.onerror,e);
47 .                        }
48 .                    }
49 .                     else  {
50 .                        fireEvent( null , _self.onerror, parseJson(obj.responseText));
51 .                    }
52 .                }
53 .            }
// 发送请求数据
54 .             function  sendRequest(data) {
55 .                 if  (_self.async  ==   true ) {
56 .                    obj.onreadystatechange  =  callback;
57 .                    obj.send(data);
58 .                     //  开始超时计时
59 .                     if  (_self.timeout) {
60 .                        timerId  =  setTimeout(fireTimeOut, _self.timeout);
61 .                    }
62 .                }
63 .                 else  {
64 .                    obj.send(data);
65 .                    callback();
66 .                }
67 .            }
68 .    
69 .             var  _self  =   this ;
70 .             var  headers  =  {};
71 .            _self.async  =   true ;
72 .            _self.timeout  =   0 ;
73 .            _self.receiveType  =   0 ;
74 .            _self.oncomplete  =  {};
75 .            _self.onerror  =  {};
76 .            _self.ontimeout  =  {};
77 .            _self.sendGetRequest  =   function (url) {
78 .                prepare( ' GET ' , url);
79 .                sendRequest( null );
80 .            };
81 .            _self.sendPostRequest  =   function (url, data) {
82 .                prepare( ' POST ' , url);
83 .                sendRequest(data);
84 .            };
85 .            _self.sendSoapRequest  =   function (url, data) {
86 .                prepare( ' SOAP ' , url);
87 .                sendRequest(data);
88 .            };
89 .            _self.sendHeadRequest  =   function (url) {
90 .                prepare( ' HEAD ' , url);
91 .                sendRequest( null );
92 .            };
93 .            _self.isIdle  =   function () {  return  obj.readyState  ==   4   ||  obj.readyState  ==   0 ; };
94 .            _self.setHeader  =   function (key, val) { headers[key]  =  val; }
95 .        }
96 .    }
97 .     if  ( ! window.requestPool) {
98 .        window.requestPool  =   new   function () {
99 .             // /<summary>请求池对象。</summary>
100 .             function  createRequest() {
101 .                 return  window.XMLHttpRequest
102 .                     ?   new  XMLHttpRequest()
103 .                    :  function () {
104 .                         if  (window.ActiveXObject) {
105 .                             var  vers  =   new  Array(
106 .                               ' MSXML2.XMLHTTP.6.0 ' ,
107 .                               ' MSXML2.XMLHTTP.5.0 ' ,
108 .                               ' MSXML2.XMLHTTP.4.0 ' ,
109 .                               ' MSXML2.XMLHTTP.3.0 ' ,
110 .                               ' MSXML2.XMLHTTP ' ,
111 .                               ' Microsoft.XMLHTTP '
112 .                            );
113 .                             for  ( var  i  =   0 ; i  <  vers.length; i ++ ) {
114 .                                 try  {  return   new  ActiveXObject(vers[i]); }
115 .                                 catch  (e) { }
116 .                            }
117 .                        }
118 .                    } ();
119 .            }
120 .             var  _self  =   this ;
121 .             var  _requestPool  =  [];
122 .            _self.getRequest  =   function () {
123 .                 for  ( var  i  =   0 ; i  <  _requestPool.length; i ++ ) {
124 .                     if  (_requestPool[i].isIdle()) {
125 .                         return  _requestPool[i];
126 .                    }
127 .                }
128 .                _requestPool.push( new  Request(createRequest()));
129 .                 return  _requestPool[_requestPool.length  -   1 ];
130 .            }
131 .        } ();
132 .    }
133 .     function  Method(host, assembly, type, method, timeout) {
134 .         // /<summary>表示服务器端方法的类。</summary>
135 .     // <param name="assembly">程序集</param>
136 .         // /<param name="host">类型</param>
137 .         // /<param name="type">调用目标类。</param>
138 .         // /<param name="method">方法名称。</param>
139 .         // /<param name="timeout">以毫秒为单位的超时时间。</param>
140 .         var  result  =   function (params, fncomp, fnerror, fntimeout) {
141 .             // /<param name="params"></param>
142 .             var  request  =  requestPool.getRequest();
143 .            request.oncomplete  =  fncomp;
144 .            request.onerror  =  fnerror;
145 .            request.ontimeout  =  fntimeout;
146 .            request.setHeader( ' RemoteInvoke ' ,  ' MethodInvoke ' );
147 .             if  (result.assembly) { request.setHeader( ' Assembly ' , result.assembly); }
148 .             if  (result.type) { request.setHeader( ' TargetType ' , result.type); }
149 .             if  (result.method) { request.setHeader( ' CallingMethod ' ,result.method + ' 517MethodEnd ' ); }
150 .            request.sendPostRequest(result.host, params);
151 .        }
152 .        result.host  =  host;
153 .        result.assembly  =  assembly;
154 .        result.type  =  type;
155 .        result.method  =  method;
156 .        result.timeout  =  timeout;
157 .    
158 .         return  result;
159 .    }

 

 

转载于:https://www.cnblogs.com/NoRoad/archive/2010/03/31/1701160.html