PDA

View Full Version : [SOLVED] Simple GET request



ctp
25 Oct 2010, 5:38 AM
Hi all,

the following request http://geocoding.cloudmade.com/8ee2a50541944fb9bcedded5165f09d9/geocoding/v2/find.js?query=Berlin returns me a clean JSON response.

But when I try to send this request via Ajax:


var req = Ext.urlEncode({query: 'Berlin'});
Ext.Ajax.request({
url: 'http://geocoding.cloudmade.com/8ee2a50541944fb9bcedded5165f09d9/geocoding/v2/find.js',
method: 'GET',
params: req,
callback: function(options,success,xhr) { console.dir(arguments); },
success: function(result, request) { console.log("Success") },
failure: function(result, request) { console.log("Failure") }
});... it fails (status text is 'connection error'). Any hints what's going wrong?

Condor
25 Oct 2010, 5:47 AM
Why are you urlEncoding the parameters? Ext will do that for you!

sideeque
25 Oct 2010, 6:03 AM
Try "success": true at the top of your json as shown below.


{"success": true, "features": [{"centroid": {"type": "POINT", "coordinates": [52.51704, 13.38886]}, "bounds": [[52.37982, 13.16428], [52.65383, 13.61343]], "type": "Feature", "properties": {"name:ty": "Berlin", "name:cy": "Berlin", "name:ko": "???", "name:cv": "??????", "name:cu": "???????", "name:cs": "Berlín", "name:tt": "??????", "name:kw": "Berlin", "name:kv": "??????", "name:ku": "Berlîn", "name:pdc": "Berlin, Deitschland", "name:tl": "Berlin", "name:ta": "????????", "name:tg": "??????", "name:ca": "Berlín", "is_in": "Berlin,Bundesrepublik Deutschland,Europe", "name:bat-smg": "Berl?ns", "name:ka": "???????", "name:frp": "Bčrlin", "name:qu": "Berlin", "name:da": "Berlin", "name:de": "Berlin", "name:tr": "Berlin", "name:tet": "Berlín", "name:lv": "Berl?ne", "name:lt": "Berlynas", "name:uz": "Berlin", "name:kk": "??????", "name:als": "Berlin", "name:ur": "????", "name:lb": "Berlin", "name:la": "Berolinum", "name:lg": "Berlin", "name:uk": "??????", "name:nds": "Berlin", "name:li": "Berlien", "name:ln": "Berlin", "name:el": "????????", "name:eo": "Berlino", "name:en": "Berlin", "name": "Berlin", "name:th": "????????", "name:lij": "Berlin", "is_in:continent": "Europe", "name:eu": "Berlin", "name:et": "Berliin", "name:es": "Berlín", "name:ia": "Berlin", "name:rm": "Berlin", "name:az": "Berlin", "name:ie": "Berlin", "name:id": "Berlin", "name:nah": "Berlin", "name:ar": "?????", "name:io": "Berlin", "name:is": "Berlín", "name:am": "????", "name:it": "Berlino", "name:an": "Berlín", "name:ru": "??????", "name:ast": "Berlín", "name:arc": "?????", "name:af": "Berlyn", "name:zu": "Berlin", "name:zh-min-nan": "Berlin", "name:nrm": "Bčrlîn", "capital": "yes", "name:zh-yue": "??", "name:te": "????????", "name:zh": "??", "name:so": "Berlin", "name:sl": "Berlin", "name:sk": "Berlín", "name:ja": "????", "name:sh": "Berlin", "name:se": "Berlin", "name:sc": "Berlinu", "name:br": "Berlin", "name:bs": "Berlin", "name:bn": "???????", "name:bo": "???????", "name:bi": "Berlin", "name:ilo": "Berlin, Alemania", "name:sw": "Berlin", "name:be": "????? ??????", "name:su": "Berliini", "name:bg": "??????", "name:ba": "??????", "name:sq": "Berlini", "name:hsb": "Berlin", "name:jv": "Berlin", "place": "city", "name:kab": "Berlin", "name:sah": "??????", "name:crh": "Berlin", "name:pt": "Berlim", "name:tpi": "Berlin", "name:oc": "Berlin", "name:ro": "Berlin", "name:diq": "Berlin", "osm_id": "240109189", "name:os": "??????", "name:pl": "Berlin", "name:pms": "Berlin", "name:myv": "?????? ??", "name:sr": "??????", "name:nov": "Berlin", "website": "www.berlin.de", "name:csb": "Berlëno", "name:sco": "Berlin", "name:hi": "??????", "name:sv": "Berlin", "name:he": "?????", "name:roa-rup": "Berlin", "name:zh-classical": "??", "name:pam": "Berlin", "name:hy": "??????", "name:jbo": "berlin", "name:ht": "Bčlen", "name:hu": "Berlin", "name:hr": "Berlin", "name:vec": "Berlin", "name:rmy": "Berlin", "name:szl": "Berlin", "name:nap": "Berlino", "name:lmo": "Berlin", "name:bar": "Berlin", "name:yi": "??????", "name:yo": "Berlin", "name:mt": "Berlin", "name:ms": "Berlin", "name:mr": "??????", "name:stq": "Berlin", "name:mg": "Berlin", "name:vi": "Berlin", "name:ml": "??????????", "name:mn": "??????", "name:mk": "??????", "name:vo": "Berlin", "name:fa": "?????", "name:haw": "Pelelina", "name:ksh": "Bälliin Bundesland ", "name:fi": "Berliini", "name:scn": "Birlinu", "name:fo": "Berlin", "name:fr": "Berlin", "name:cbk-zam": "Berlín", "name:fy": "Berlyn", "name:roa-tara": "Berline", "name:nl": "Berlijn", "name:nn": "Berlin", "name:no": "Berlin", "name:na": "Berlin", "name:wo": "Berlin", "name:ang": "Berlin", "name:dsb": "Barli?", "name:ga": "Beirlín", "name:be-x-old": "??????", "name:gd": "Berlin", "name:vls": "Berlyn", "name:fur": "Berlin", "name:gn": "Berlin", "name:gl": "Berlín Berlin", "name:gv": "Berleen"}, "id": 1607620}], "found": 1, "type": "FeatureCollection", "bounds": [[52.37982, 13.16428], [52.65383, 13.61343]], "crs": {"type": "EPSG", "properties": {"code": 4326, "coordinate_order": [0, 1]}}}

Condor
25 Oct 2010, 6:04 AM
Try "success": true at the top of your json as shown below.

Not relevant. success:true is only required for form submission.

Condor
25 Oct 2010, 6:08 AM
You can't do an Ext.Ajax.request to a different domain (cross-site restriction).

You have 2 options:
1. Can you host your application on the same domain (http://geocoding.cloudmade.com) ?
or
2. The server does support JSONP protocol, so you could use a ScriptTagProxy to load a store with it.

ps. If you don't want a store, then you could also use Animal's patch to Ext.data.Connection to make Ext.Ajax.request able to do JSONP requests as well.

sideeque
25 Oct 2010, 6:08 AM
Oh.. Then I think the below code should work..


Ext.Ajax.request({
url: 'http://geocoding.cloudmade.com/8ee2a50541944fb9bcedded5165f09d9/geocoding/v2/find.js',
method: 'GET',
params: {query: 'Berlin'},
callback: function(options,success,xhr) { console.dir(arguments); },
success: function(result, request) { console.log("Success") },
failure: function(result, request) { console.log("Failure") }
});

ctp
25 Oct 2010, 6:13 AM
Hi,

I've broken down the snippet to:


Ext.Ajax.request({
url: 'http://geocoding.cloudmade.com/8ee2a50541944fb9bcedded5165f09d9/geocoding/v2/find.js',
method: 'GET',
params: 'query=Berlin',
callback: function(options,success,xhr) { console.dir(arguments); }
});

but same behaviour: status text is 'connection error' :-(

evant
25 Oct 2010, 6:17 AM
You should take the time to read the responses from people that offer help: https://developer.mozilla.org/En/Same_origin_policy_for_JavaScript

ctp
25 Oct 2010, 6:17 AM
Fails too ... :-( I'm not sure but afaik JSON is not inter-domain compliant? Should this be my trouble? CloudMade is an external domain ...

P.S. Ooops, didnt see Condor's answer covering this topic. Seems to be my problem. Thx guys ...

ctp
25 Oct 2010, 8:45 AM
OK, I've played around with ScriptTagProxy but something seems to break my code.

Populating a grid with ocal JSON data works fine (one record is rendered in the grid):


var myData = {"features": [{"centroid": {"type": "POINT", "coordinates": [52.51704, 13.38886]}, "bounds": [[52.37982, 13.16428], [52.65383, 13.61343]], "type": "Feature", "properties": {"name": "Berlin"}, "id": 1607620}], "found": 1, "type": "FeatureCollection", "bounds": [[52.37982, 13.16428], [52.65383, 13.61343]], "crs": {"type": "EPSG", "properties": {"code": 4326, "coordinate_order": [0, 1]}}}

var localstore = new Ext.data.JsonStore({
root: 'features',
fields: [
{name: 'name', mapping: 'properties.name'},
{name: 'description_short', mapping: 'properties.amenity'},
{name: 'longitude', mapping: 'centroid.coordinates[1]'},
{name: 'latitude', mapping: 'centroid.coordinates[0]'}
]
});

localstore.loadData(myData);

var win_local = new Ext.Window({
width: 500,
height: 250,
items: new Ext.grid.GridPanel({
id: 'grid',
height: 450,
store: localstore,
columns: [
{header: "Name", width: 16, sortable: true, dataIndex: 'name'},
{header: "Amenity", width: 70, sortable: true, dataIndex: 'description_short'},
{header: "Longitude", width: 200, sortable: true, dataIndex: 'longitude'},
{header: "Latitude", width: 200, sortable: true, dataIndex: 'latitude'}
]
})
});

win_local.show(this);


... but retrieving the same JSON set via ScriptTagProxy fails (no line rendered in the grid):


var remotestore = new Ext.data.JsonStore({
proxy: new Ext.data.ScriptTagProxy({
url: 'http://geocoding.cloudmade.com/8ee2a50541944fb9bcedded5165f09d9/geocoding/v2/find.js',
params: { query: 'Berlin' }
}),
root: 'features',
fields: [
{name: 'name', mapping: 'properties.name'},
{name: 'description_short', mapping: 'properties.amenity'},
{name: 'longitude', mapping: 'centroid.coordinates[1]'},
{name: 'latitude', mapping: 'centroid.coordinates[0]'}
]
});

remotestore.load();

var win_remote = new Ext.Window({
width: 500,
height: 250,
items: new Ext.grid.GridPanel({
id: 'grid',
height: 450,
store: remotestore,
columns: [
{header: "Name", width: 16, sortable: true, dataIndex: 'name'},
{header: "Amenity", width: 70, sortable: true, dataIndex: 'description_short'},
{header: "Longitude", width: 200, sortable: true, dataIndex: 'longitude'},
{header: "Latitude", width: 200, sortable: true, dataIndex: 'latitude'}
]
})
});

win_remote.show(this);
//console.log(Ext.getCmp('grid').store.getCount());

Did I forget something in my def?

ctp
25 Oct 2010, 10:23 AM
OK, replaced params by extraParams and all runs fine now :-)

Condor
25 Oct 2010, 10:24 AM
'params' is not a config option of ScriptTagProxy. Move the params to the load() call.

(I assume you want to make the city configurable, so the load params seem more appropriate than the extraParams)