Location: PHPKode > scripts > Sigma visual ajax UI builder > sigma-visual-ajax-ui-builder/Samples/linb/IO/monitor/index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta name="keywords" content="javascript framework, RIA, SPA, client SOA, linb, jsLinb, RAD, IDE, Web IDE, widgets, javascript OOP, opensource, open-source, Ajax, cross-browser, prototype, web2.0, platform-independent, language-independent" />
    <meta name="description" content="Web application powered by LINB framework" />
    <meta name="copyright" content="hide@address.com" />
    <meta http-equiv="imagetoolbar" content="no" />
    <title>jsLinb IO sample -- monitor</title>
</head>
    <body>
        <div id='loading'><img src="../../../../runtime/loading.gif" alt="Loading..." /></div>
        <div style='height:20px;'></div>
        <div id='layout' style="margin:0 auto;width:680px;border:solid 1px;padding:4px;">
            <div>
                <p><strong>Service uri</strong> : You can change it to raise some kind of error!</p>
                <input id='uri' value="../basic/request.php" style='width:100%;'/>
<br />
                <p><strong>Request data</strong> : You can try to change it.</p>
                <textarea id='request' style='width:100%;height:80px;'>{
    key:'test',
    para:{
        p1:'client_set'
    }
}</textarea>
<br /><br />

                <div> <button id='ajax_get'>use linb.Ajax 'get'</button> <button id='ajax_post'>use linb.Ajax 'post'</button></div><br />
                <div> <button id='sajax'>use linb.Sajax</button></div><br />
                <div> <button id='iajax_get'>use linb.IAjax 'get'</button> <button id='iajax_post'>use linb.IAjax 'post'</button></div><br />


                <p style="font-weight:bold">Monitor:</p>
                <div id='monitor' style='border: dashed 1px #ccc;background-color:#FFFF00;height:auto!important;height:50px;min-height:50px;'>
                </div>
                <br /><br />
                <p style="font-weight:bold">Response data:</p>
                <textarea id='response' style='width:100%;height:50px;' readonly=readonly>
                </textarea>
             </div>
        </div>

        <script type="text/javascript" src="../../../../runtime/jsLinb/js/linb.js"></script>
        <script type="text/javascript">
            linb.main(function(){
                linb('loading').remove();

                var getRequest=function(){
                    setResponse("");
                    return _.unserialize(linb.Dom.byId('request').value);
                },
                setResponse=function(value){
                    linb('response').attr('value', value.data?_.serialize(value.data[0]):value);
                },
                onOK=function(response){
                    trace(this,'onSuccess');
                    var obj;
                    if(typeof response=='string')obj=_.unserialize(response);
                    else obj=response;
                    if(obj){
                        setResponse(obj);
                    }else setResponse('There\'s format err in response data:' + response);
                },
                onFail=function(msg){
                    trace(this,'onFail:' + (msg?': "' + msg +'"':''));
                },
                trace=function(obj, eventName, clear){
                    if(clear)linb('monitor').empty();
                    linb('monitor').append(linb.create('<p>'+obj.KEY+" ["+ eventName +'] -- Time stamp:' +_()+' </p>'));
                };

                //use linb.Ajax get method
                linb('ajax_get').onClick(function(){
                    var hash=getRequest();
                    if(hash)
                        linb.Thread.observableRun(function(threadid){
                            linb.Ajax({
                                uri:linb('uri').get(0).value,
                                query: hash,
                                threadid:threadid,

                                onSuccess: onOK,
                                onFail: onFail,
                                onStart:function(){trace(this,'onStart')},
                                onEnd:function(){trace(this,'onEnd')},
                                onTimeout:function(){trace(this,'onTimeout')},
                                onRetry:function(){trace(this,'onRetry')},
                                beforeStart:function(){trace(this,'beforeStart',true)},
                                beforeSuccess:function(){trace(this,'beforeSuccess')},
                                beforeFail:function(){trace(this,'beforeFail')}

                            }).start();
                        });
                });
                //use linb.Ajax post
                linb('ajax_post').onClick(function(){
                    var hash=getRequest();
                    if(hash)
                        linb.Thread.observableRun(function(threadid){
                            linb.Ajax({
                                uri:linb('uri').get(0).value,
                                query: hash,
                                threadid:threadid,

                                method:'post',

                                onSuccess: onOK,
                                onFail: onFail,
                                onStart:function(){trace(this,'onStart')},
                                onEnd:function(){trace(this,'onEnd')},
                                onTimeout:function(){trace(this,'onTimeout')},
                                onRetry:function(){trace(this,'onRetry')},
                                beforeStart:function(){trace(this,'beforeStart',true)},
                                beforeSuccess:function(){trace(this,'beforeSuccess')},
                                beforeFail:function(){trace(this,'beforeFail')}

                            }).start();
                        });
                });
                //use linb.SAjax
                linb('sajax').onClick(function(){
                    var hash=getRequest();
                    if(hash)
                        linb.Thread.observableRun(function(threadid){
                            linb.SAjax({
                                uri:linb('uri').get(0).value,
                                query: hash,
                                threadid:threadid,

                                onSuccess: onOK,
                                onFail: onFail,
                                onStart:function(){trace(this,'onStart')},
                                onEnd:function(){trace(this,'onEnd')},
                                onTimeout:function(){trace(this,'onTimeout')},
                                onRetry:function(){trace(this,'onRetry')},
                                beforeStart:function(){trace(this,'beforeStart',true)},
                                beforeSuccess:function(){trace(this,'beforeSuccess')},
                                beforeFail:function(){trace(this,'beforeFail')}

                            }).start();
                        });
                });
                //use linb.IAjax get
                linb('iajax_get').onClick(function(){
                    var hash=getRequest();
                    if(hash)
                        linb.Thread.observableRun(function(threadid){
                            linb.IAjax({
                                uri:linb('uri').get(0).value,
                                query: hash,
                                threadid:threadid,

                                method:'get',

                                onSuccess: onOK,
                                onFail: onFail,
                                onStart:function(){trace(this,'onStart')},
                                onEnd:function(){trace(this,'onEnd')},
                                onTimeout:function(){trace(this,'onTimeout')},
                                onRetry:function(){trace(this,'onRetry')},
                                beforeStart:function(){trace(this,'beforeStart',true)},
                                beforeSuccess:function(){trace(this,'beforeSuccess')},
                                beforeFail:function(){trace(this,'beforeFail')}

                            }).start();
                        });
                });
                //use linb.IAjax post
                linb('iajax_post').onClick(function(){
                    var hash=getRequest();
                    if(hash)
                        linb.Thread.observableRun(function(threadid){
                            linb.IAjax({
                                uri:linb('uri').get(0).value,
                                query: hash,
                                threadid:threadid,

                                onSuccess: onOK,
                                onFail: onFail,
                                onStart:function(){trace(this,'onStart')},
                                onEnd:function(){trace(this,'onEnd')},
                                onTimeout:function(){trace(this,'onTimeout')},
                                onRetry:function(){trace(this,'onRetry')},
                                beforeStart:function(){trace(this,'beforeStart',true)},
                                beforeSuccess:function(){trace(this,'beforeSuccess')},
                                beforeFail:function(){trace(this,'beforeFail')}
                            }).start();
                        });
                });
            });
        </script>




</body>
</html>
Return current item: Sigma visual ajax UI builder