enyo.Ajax Examples?

edited March 2012 in Enyo 2
I normally use JQuery for Ajax calls but I am working on an Enyo2.0 app and would like to use the enyo.Ajax instead but I have having problems getting it to work. So I am looking for some basic examples of using this.

To be more specific, I am looking to POST a couple of fields to a classic ASP page that will return a string of HTML.

Comments

  • edited March 2012
    loadCareerGoals: function( career_id ) {
        this.setCareerId( career_id );
        var params = { method: 'getCareerGoals', career_id: career_id };
        var request = new enyo.Ajax( { url: 'private.php', method: 'GET' } ).response( this, 'loadCareerGoalsResponse' ).go( params );
      },
      loadCareerGoalsResponse: function( inSender, inResponse ) {
        for( var i = 0; i < inResponse.length; i++ ) {
          var oneGoal = inResponse[ i ];
          this.addGoal( oneGoal.id, oneGoal.title, oneGoal.votes, oneGoal.voted );
        }
        this.render( );
      }
    Here is one piece of code from my current project.
    This is an example of getting json from a local PHP file. You could also just set the method POST and do anything you want here.

    The inResponse in here is something like:[ { id: 1, title: 'Goal1', votes: 5, voted: true }, {id: 2, title: 'Goal2', votes: 6, voted: false } ]
  • edited March 2012
    I wrote a kind of service/component for myself so I don't need to construct it every time. Code looks like that (compiled from CoffeeScript):
    enyo.kind({
      name: 'Ajax',
      kind: enyo.Ajax,
      constructor: function(_arg) {
        this.callback = _arg.callback;
        return this.inherited(arguments);
      },
      respond: function(data) {
        if (this.callback) return this.callback(data);
      }
    });
    
    enyo.kind({
      name: 'AjaxService',
      kind: enyo.Component,
      create: function() {
        var get, k, set;
        this.inherited(arguments);
        this.ajax = new Ajax({
          callback: enyo.bind(this, 'respond')
        });
        for (k in this.ajax.published) {
          set = "set" + (enyo.cap(k));
          get = "get" + (enyo.cap(k));
          this[set] = enyo.bind(this.ajax, set);
          this[get] = enyo.bind(this.ajax, get);
          if (this[k] !== void 0) {
            this[set](this[k]);
            delete this[k];
          }
        }
        return this.go = enyo.bind(this.ajax, 'go');
      },
      respond: function(data) {
        return this.bubble('onSuccess', data);
      }
    });

    Then you can put it in your components array:
    enyo.kind({
        name: 'MyStuff',
        components: [
            {kind: AjaxService, url: '/somewhere/', onSuccess: 'handleResponse'}
        ],
        handleResponse: function(sender, data) {
            console.log(data);
        }
    });
    Not sure that's the best way to approach service-building in enyo, but didn't think of anything better. Multiple inheritance would be nice here, but... you use what you've got. :)

    There is no error-handling though, but it's not hard to add. :P

    If anybody can come up with better idea/shorter code, I'd like to hear that. :)
  • Thanks guys, I got it working.
  • My first full week-end on enyo 2.0, but no success to use Ajax component to replace WebService of enyo 1.0. I am planning to convert my enyo 1.0 application to enyo 2.0, but I have obtained the result when I reuse "FlickrSearch.js" with my own url...
    XMLHttpRequest cannot load http://free.worldweatheronline.com/feed/apiusage.ashx?&key=xxxxxxxxxxxx&format=json&0.8247209063265473.
    Origin http://polarjack.software.perso.sfr.fr is not allowed by Access-Control-Allow-Origin.

    So, how to allow my website to access to another url than "http://query.yahooapis.com/v1/public/yql".
    I was expected that enyo 2.0 is design to develop web applications, but without ajax request to other websites will limit the scope of app...

    Regards,
    Polar Jack Software
  • Make sure you have --disable-web-security in your launch options for your chrome developer shortcut?
    Mine gets erased every time Chrome does an upgrade, which is like every other day :|
  • This is not the problem, if I want to create a webapp, I can't control the "--disable-web-security" on the client web browser.
    I have tested the app on my chrome developer and it is working well.
    My problem is, why the query to "http://query.yahooapis.com/v1/public/yql" is allowed and not to "http://free.worldweatheronline.com/feed/apiusage.ashx" on a standard chrome browser ?

    Regards,
    Polar Jack Software
  • The reason is :
    • Yahoo set an addition header in their HTTP response, Access-Control-Allow-Origin:*
    • WorldWeatherOnline doesn't have it
    This addition header has been created for Cross Domain limitation (by adding this header, the web site assume that they are protect against XSS attacks)
  • ahh , that's different. yeah, didn't get that it was a web app.

    Here's an interesting starter on the whole web-security thing:

    http://jimbojw.com/wiki/index.php?title=Introduction_to_Cross-Domain_Ajax
  • Thanks for your answers, I have also found that it was due to a security constraint, but I knew not how "yahoo" can send the header ...
    So, I know that for a chrome-app, the manifest allows to list the authorized url, but what will be the rule for Enyo 2.0 and Open webOS ?
    I am experimenting a method to use Ajax for JSONP or callback requests.
    Seems working, but I need to package it in a Component...

    Regards,
    Polar Jack Software
  • I would expect that same as with webOS prior, as well as WebWorks, and the Android and iOS WebViews, probably Windows equivalent too, that those will ignore the cross-domain restriction so long as you're not running in an open web browser
  • We also have the enyo.JsonP kind in the extras library. If your webservice supports the JSONP format (JSON wrapped in a function name), this kind will let you do a load to access the data from the site. This is what's used in the Twitter search tutorial to get around cross-origin there.
Sign In or Register to comment.