Sigma Php Ajax framework, Ajax Components, GUI Builder
May 23, 2012, 09:46:19 PM *
Welcome, Guest. Please login or register.
Did you miss your activation email?

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: How can I get linb.SAjax to work?  (Read 384 times)
migolanduga
Newbie
*
Posts: 3


View Profile
« on: January 29, 2012, 03:30:51 AM »

I am trying to access a local server on port 3333 using linb.SAjax but I get constantly the error "Error: SAjax return script doesn't match", no mather what I try. If I use linb.request, I notice that linb.SAjax is used (and not linb.Ajax) thus I assume that this request to localhost port 3333 is considered a cross-domain request, even when the domain is localhost both for port 80 and port 3333.

This is the linb4.0 code I am using:

// The default code is a com class (inherited from linb.Com)
Class('App', 'linb.Com',{
    // Ensure that all the value of "key/value pair" does not refer to external variables
    Instance:{
        // To initialize instance(e.g. properties)
        initialize : function(){
            // To determine whether or not the com will be destroyed, when the first UI control be destroyed
            this.autoDestroy = true;
            // To initialize properties
            this.properties = {};
        },
        // To initialize internal components (mostly UI controls)
        // *** If you're not a skilled, dont modify this function manually ***
        iniComponents : function(){
            // [[code created by jsLinb UI Builder
            var host=this, children=[], append=function(child){children.push(child.get(0))};
           
            append(
                (new linb.UI.SButton)
                .setHost(host,"ctl_sbutton1")
                .setLeft(590)
                .setTop(330)
                .setCaption("click me")
                .onClick("_ctl_sbutton1_onclick")
            );
           
            append(
                (new linb.UI.Panel)
                .setHost(host,"ctl_panel3")
                .setDock("width")
                .setTop(-20)
                .setHeight(260)
                .setZIndex(1)
                .setPosition("relative")
                .setCaption("ctl_panel3")
                .setToggleBtn(true)
                .setCloseBtn(true)
                .setRefreshBtn(true)
            );
           
            host.ctl_panel3.append(
                (new linb.UI.Input)
                .setHost(host,"ctl_input2")
                .setLeft(21)
                .setTop(11)
                .setWidth(610)
                .setLabelSize(120)
                .setLabelCaption("fromServer")
            );
           
            host.ctl_panel3.append(
                (new linb.UI.Button)
                .setHost(host,"ctl_button5")
                .setLeft(521)
                .setTop(191)
                .setWidth(211)
                .setCaption("request from server")
                .setImage("img/demo.gif")
                .onClick("_ctl_button5_onclick")
            );
           
            host.ctl_panel3.append(
                (new linb.UI.Input)
                .setHost(host,"ctl_input8")
                .setLeft(20)
                .setTop(40)
                .setWidth(240)
                .setLabelSize(120)
                .setLabelCaption("Ajax-reqType")
            );
           
            host.ctl_panel3.append(
                (new linb.UI.Input)
                .setHost(host,"ctl_input9")
                .setLeft(21)
                .setTop(71)
                .setWidth(240)
                .setLabelSize(120)
                .setLabelCaption("Ajax-retry")
            );
           
            host.ctl_panel3.append(
                (new linb.UI.Input)
                .setHost(host,"ctl_input10")
                .setLeft(21)
                .setTop(91)
                .setWidth(240)
                .setLabelSize(120)
                .setLabelCaption("Ajax-rspType")
            );
           
            host.ctl_panel3.append(
                (new linb.UI.Input)
                .setHost(host,"ctl_input11")
                .setLeft(21)
                .setTop(111)
                .setWidth(240)
                .setLabelSize(120)
                .setLabelCaption("Ajax-timeout")
            );
           
            return children;
            // ]]code created by jsLinb UI Builder
        },
        // Give a chance to load other com
        iniExComs : function(com, threadid){
        },
        // Give a chance to determine which UI controls will be appended to parent container
        customAppend : function(parent, subId, left, top){
            // "return false" will cause all the internal UI controls will be added to the parent panel
            return false;
        },
        // This instance's events
        events : {},
        _ctl_sbutton1_onclick : function (profile, e, src, value) {
            var uictrl = profile.boxing();
            linb.alert("hi","I'm " + uictrl.getAlias());
        },
        _ctl_button5_onclick : function (profile, e, src, value) {
            var ns = this, uictrl = profile.boxing();
            //---------------
            //linb.SAjax.rspType= 'string';
            // /**
            ns.ctl_input8.setValue(linb.SAjax.reqType, true);
            ns.ctl_input9.setValue(linb.SAjax.retry, true);
            ns.ctl_input10.setValue(linb.SAjax.rspType, true);
            ns.ctl_input11.setValue(linb.SAjax.timeout, true);
            // **/
           
            // linb.request(uri, query, onSuccess, onFail, threadid, options)
            // previously:  linb.Ajax   
            linb.SAjax('http://localhost:3333/bla', {'get':'whatever','xmit':'nonsense'}
                      , function(response, respType, threadId){
                           linb.log('@onSuccess: RespType='+respType+' Response='+response);
                           ns.ctl_input2.setValue(response.toString(), true);   
                        }, function(response, respType, threadId){
                           linb.log('@onFail : RespType='+respType+' Response='+response);
                           ns.ctl_input2.setValue("some **ERROR*** receiving serverdata", true);
                        }, null, {asy:true}
                     ).start();
        }
    }
});



In the documentation ( linb4.0-guide.en.pdf ) I read the following:

Server’s return data must be the following format: 
 
linb.SAjax.$response({id: "12483145855311"/*,data*/})



When I look at the http request and reply using Fidler, I see for example (one of the different experiments I have made) the following request:

GET http://localhost:3333/bla?get=whatever&xmit=nonsense&callback=linb.SAjax.No._1 HTTP/1.1
Host: localhost:3333
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:9.0.1) Gecko/20100101 Firefox/9.0.1
Accept: */*
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip, deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
Referer: http://localhost/linb4/VisualJS/debug.php
Cookie: __utma=111872281.943148632.1327150137.1327771099.1327773866.5; __utmz=111872281.1327150137.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none); __utmc=111872281



In this request, linb.SAjax has added the field callback to the http GET request, with the value linb.SAjax.No._1. I do not see any field with the name id as I was expecting, after reading the documentation. Thus I assume the id value is the value of the callback field.

Thus from the server at localhost:3333 I am replying (again extracted from Fidler):

HTTP/1.1 200 OK
Content-Type: text/plain
Connection: keep-alive
Transfer-Encoding: chunked

a7
inb.SAjax.$response({id:'linb.SAjax.No._1', 'callback':'linb.SAjax.No._1', 'data': 'request=(/bla?get=whatever&xmit=nonsense&callback=linb.SAjax.No._1) reqCount[2]' })
0



As I thought that possibly the field name expected was not id as mentioned in the documentation but callback, I have included also the field callback in the reply.

This is what I get in the JsLINB Monitor Window:

Time stamp : 1327776420412(80969)
" >> Object Info:"
" -- fileName : http://localhost/linb4/runtime/jsLinb/js/linb-debug.js"
" -- lineNumber : 1932"
" >> Function Trace: function \"$response\" in Class \"linb.SAjax\""
Time stamp : 1327776420926(514)
"@onFail : RespType=json Response=Error: SAjax return script doesn't match"



I have also tried to reply from the server at port 3333 with the value id: "12483145855311" (as written in the documentation) instead of id:'linb.SAjax.No._1', but I always got the same error "Error: SAjax return script doesn't match"

By the way: the server at port 3333 is using node.js and the server code (written in Javascript) is:

var http = require('http');
var iPort=3333;
var iCnt=1;
http.createServer(function (req, res) {
  var infoIn='request=('+req.url+') reqCount['+(iCnt++)+']';
  // var replydata="linb.$response({'data': '"+infoIn + "', 'id':linb.SAjax.No._1 });";
  // var replydata="linb.SAjax.$response({id:'12483145855311', 'callback':'linb.SAjax.No._1', 'data': '"+infoIn + "' })";
  // var replydata="linb.SAjax.$response({id:'12483145855311', 'callback':'linb.SAjax.No._1', 'data': '"+infoIn + "' })";
  var replydata="linb.SAjax.$response({id:'linb.SAjax.No._1', 'callback':'linb.SAjax.No._1', 'data': '"+infoIn + "' })";
  //linb.SAjax.No._1
  console.log(infoIn+' Reply->'+replydata);
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end(replydata);
}).listen(iPort, "127.0.0.1");
console.log('Server (type Nodejs) running at http://127.0.0.1:'+iPort+'/');



Just to help with the context: I am using XAMPP at local host to host the linb UIBuilder and I am using Firefox 9.01.

Thus the big question is: What is wrong here? Why is linb.SAjax producing that error about the script not matching?

Thanks in advance for your reply.




« Last Edit: January 29, 2012, 03:37:19 AM by migolanduga » Logged
linb
Administrator
Hero Member
*****
Posts: 435


View Profile
« Reply #1 on: January 29, 2012, 08:37:29 PM »

I think you should select a server side like PHP/Java/C#...
-------------------------------------------------------
At the server side, the only thing you need to do is :

to get the "callback" string, and response text :

   [callback]([json data])


=> may be like =>

   linb.SAjax.No._1({id:'xxx', result:'ok'})

Logged
migolanduga
Newbie
*
Posts: 3


View Profile
« Reply #2 on: January 30, 2012, 12:20:34 AM »

Thanks, Linb, it works now with your last clarification.
In my opinion the linb4 guide needs updating to make it clear how to comunicate with the server. I spent hours and hours trying to make it to work. if you had made it clear in the docs that the server needs to use the value of the callback field to construct a function with all the return data inside a JSON string as a parameter, this should help the linb users and avoid frustrations. As far as have seen, linb4 has a lot of potential. It seems much better than other opensource java script visual builders out there, but I did not yet try enough of the product to have a definitive opinion. But I think that if users bump into problems caused by insuficient clarification in the docs, a lot of them will forget about your  product and use something else. I think a good product needs good documentation to break out and become the leading framework in the field instead of only a niche product. Massive usage of linb will automatically result in extra income for payed support, as there are allways a lot of companies that will only use a framework with payed support. Thus from a pool of 8 million users you can generate a lot more income on support contracts than from only a pool of 80 thousand users.

Concerning your observation "I think you should select a server side like PHP/Java/C#...": I think you should not dismiss node.js. It is becoming main stream! The echo system is growing by the day, there are now already lots and lots of frameworks built around it, servers using it offer better performance than the traditional solutions you mention and the big advantage is that you can develop the client and the server in the same language: javascript! Big companies are now using node.js, even Microsoft is promoting it in the Azure site. I am convinced that in a couple of years (perhaps 2, perhaps 5) server side javascript like node.js will be mainstream and the other solutions you mention will be legacy. Just my opinion.
Logged
migolanduga
Newbie
*
Posts: 3


View Profile
« Reply #3 on: January 30, 2012, 11:06:29 AM »

Linb,
I have created a bit of documentation for myself on the usage of linb.SAjax to communicate with a server (for example node.js). As this documentation can be useful for others, I am posting it here, just my small contribution to your product.


How to send and receive data from a server using linb.SAjax() (linb4.0)

linb.SAjax sends (at the end of the url string, separated by a '?' character) the request fields you have sent in the second parameter of linb.SAjax and adds an extra field called "callback".
The value of that callback field is the name of a function inside linb that should be used to return the JSON values as the only parameter for that function.
Example: you send this request from LINB:


   linb.SAjax('http://localhost:3333/bla', {'get':'whatever','xmit':'nonsense'}
     , function(response, respType, threadId){
         linb.log('@onSuccess: RespType='+respType+' Response='+response);
         var sData= response.field1;  // for example server is returning {field1='whatever', 'field2'=1234}

         ns.ctl_input2.setValue(sData, true);   // assume you have an input field named ctl_input2
      }, function(response, respType, threadId){
         linb.log('@onFail : RespType='+respType+' Response='+response);
         ns.ctl_input2.setValue("some **ERROR*** receiving serverdata", true);
      }).start();


Linb will send the following request string via HTTP:
GET http://localhost:3333/bla?get=whatever&xmit=nonsense&callback=linb.SAjax.NO._1 HTTP/1.1

You see there the extra field callback that was automatically added by LINB.
Now when the server returns the data as a reply to this request, it should build a string
as follows:
<valueOfTheCallbackField>(<stringContainingJsonObjectData>)

Note: the symbols "<" and ">" are just meant to identify concepts, they are not part of the string to return.
 
Suppose the server is returning the following JSON string: {field1='whatever', 'field2'=1234}

Now on the server we build the return string, for example in javascript if we are using a javascript server like node.js


var valueofCallbackField= "linb.SAjax.NO._1";  // could  be obtained as for example
                                                             // var valueofCallbackField= httpRequest.callback
var jsonString= "{'field1'='whatever', 'field2'=98765}"; // the data the server is sending back to the client
var returnData= valueofCallbackField + "(" + jsonString + ")" ;  // the "(" and ")" brackets are needed to define a function.


You can see in the bit of LINB code used to make the request using linb.SAjax (see above) how the value of the returned field field1 can be obtained from the returned JSON string.
Logged
linb
Administrator
Hero Member
*****
Posts: 435


View Profile
« Reply #4 on: January 30, 2012, 05:48:46 PM »

I updated pdf file in SVN.
Logged
Hachiushima
Newbie
*
Posts: 3


View Profile
« Reply #5 on: February 27, 2012, 07:29:06 AM »

I check all the codes you have lots of errors in it please fix them
Logged

Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.7 | SMF © 2006-2008, Simple Machines LLC Valid XHTML 1.0! Valid CSS!