【原创】cs+html+js+css模式(五)：页面调用JS的编写
2024-05-12 07:34:41
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
【原创】cs+html+js+css模式(五)：页面调用JS的编写相关推荐
- 使用js在前端web页面调用打印机
使用js在前端web页面调用打印机 最近参与了一个比较老的项目改造,需要使用到打印机相关的技术. 由于打印机也是比较老旧,所以没有SDK相关的应用,虽然有桌面的插件,但是需要集成到web中来,最终找到 ...
- 如何在页面调用JS函数的代码
如何在页面调用JS函数的代码 这个所有的人都不能回复啊,只有一个人可以的,晕!我第一次发现JS的功能有"打下来",呵呵! 言归正传: 下面是一个很简单的例子: 首先写一个JS函数, ...
- [ASP.NET]动态页面调用JS错误。保存为HTML文件就不报错了。
[ASP.NET]动态页面调用JS错误.保存为HTML文件就不报错了. 郁闷死了.因为调用的JS文件中有中文,不晓得为啥子.要设置编码就可以了. 加上type="text/javascrip ...
- js中ajax刷新页面,django+js+ajax实现刷新页面的方法
本文实例讲述了django+js+ajax实现刷新页面的方法.分享给大家供大家参考,具体如下: 在服务器开发的时候,为了方便将服务器对外开一个接口来操作,可以使用django制作网页,通过页面来操作服 ...
- js代码 父页面调用子页面中的js方法，子页面调用父页面中的js方法
文中代码亲测可用,转载以示尊重!!! <!--主页面中的JS代码--> <script type="text/javascript"> //调用子页面的方法 ...
- .net页面调用JS时出现乱码
最近在开发大鹏网时调用一个JS文件时,JS文件里的中文都变成了乱码. 主要是GB2312的文件调用了utf-8的js文件时,或utf-8的文件调用了GB2312的js文件才会出现,调用时可以写成如下方 ...
- php a标签 执行js,关于a标签不能调用js方法的小细节，你注意到了么？
[导读]在我们做后台删除的时候,当点击删除标签时,你希望弹出一个友好的提示框!比如这样:那代码应该怎样写呢? 在我们做后台删除的时候,当点击删除标签时,你希望弹出一个友好的提示框!比如这样: 那代码应 ...
- js 引用 java常量_java调用JS 与JS 调java
这个 刚开始 我也不会,把我整的是个蛋疼的啊, 最后发现其实挺简单的,我现在给大家说的是我自己掌握的一种, 1. 先是要给项目配置一些权限 (1).访问网络权限 (2).访问SD卡权限 2.给webv ...
- html+js+css实现登录页面
当前页面还有极大优化空间,奈何本人能力及时间有限,望各位大佬轻喷,当然能指点一下还是很乐意接受的 css代码 <style>html,body {font-size: 10px;max-w ...
最新文章
- C# 如何创建Excel多级分组
- JGG | TaxonKit：一款实用又高效的NCBI分类学数据工具包
- windows下检测网站是否正常运行并自动重启服务
- django安装--mac系统
- mysql双向复制（主主模式）
- Windows上部署Ngnix
- Alpha阶段第2周/共2周 Scrum立会报告+燃尽图 04
- 微电网日前优化调度 。算例有代码（1）
- 揭秘《死者之书》之环境资源及特效创作
- Linux磁盘分区了解多少？Linux入门必看
- Javaimport以及Java类的搜索路径
- 【区块链】区块链学习要点记录
- Linux下线程同步对象(3)——条件变量
- centos php 安装openssl,详解Linux(centos7)下安装OpenSSL安装图文方法
- 嵌入式ARM核心板介绍
- 分散的无纸记录仪如何通过无线集中实现短信报警
- 小鸟云服务器如何进行重装系统？
- 肝了一晚帮她搭建完个人网站——利用Docker在单节点上实现内外网隔离网站部署（Nginx、Wordpress、MySQL）
- 自建内网穿透之frp
- 今日头条后台止步一面