zoukankan      html  css  js  c++  java
  • 【原创】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.    }

     

  • 相关阅读:
    《程序员代码面试指南》第五章 字符串问题 去掉字符串中连续出现k 个0 的子串
    《程序员代码面试指南》第五章 字符串问题 字符串中数字子串的求和
    《程序员代码面试指南》第五章 字符串问题 判断两个字符串是否互为变形词
    《程序员代码面试指南》第三章 二叉树问题 统计和生成所有不同的二叉树
    《程序员代码面试指南》第三章 二叉树问题 Tarjan算法与并查集解决二叉树节点间最近公共祖先的批量查询问题
    《程序员代码面试指南》第三章 二叉树问题 在二叉树中找到两个节点的最近公共祖先
    《程序员代码面试指南》第三章 二叉树问题 找到二叉树中符合搜索二叉树条件的最大拓扑结构
    《程序员代码面试指南》第三章 二叉树问题 判断t1 树中是否有与t2 树拓扑结构完全相同的子树
    #使用Python的turtle绘制正六边形、叠边形
    #Python语言程序设计Demo
  • 原文地址:https://www.cnblogs.com/NoRoad/p/1701160.html
Copyright © 2011-2022 走看看