【原创】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. }
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. }
专注 + 保持追求精益求精的精神 + 完美的心态 == 天才