【原创】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/p/1701160.html