I am creating a SPA with Backbone & Underscore JS. The basic feature of the app being that on entering a search term , it needs a trigger an external REST web service call and fetch the JSON response. However when i try this, the browser cancels the request as i guess it tries to make a cross-domain AJAX call.
I am hosting this SPA in my local and the REST web service is hosted on a external server. If i need to make cross-domain calls, what is the procedure which i need to follow without making any changes in the server side? I heard JSONP is one of the alternatives but not sure on the approach.
It looks like it is the same problem as in this question. It is pretty useful:
JSONP and Backbone.js
If your external service supports it already, you are correct that JSONP would be the way to go for cross domain requests without having to change anything on the server side. I assume you're using jQuery. Here's an example from jQuery's docs:
var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
$.getJSON( flickerAPI, {
tags: "mount rainier",
tagmode: "any",
format: "json"
})
.done(function( data ) {
console.log(data);
});
You'll notice the ?jsoncallback=? in the flickr URL. That tells flickr to wrap the response in a JSONP callback instead of just returning normal JSON. When flickr sees that, they wrap the response like this:
jQuery19104044632513541728_1395560629443({
"title": "Recent Uploads tagged mountrainier",
...other json data...
});
So instead of returing JSON, they wrap it in a function call which jQuery puts on the global window object. That function call will call your success function with the json data.
Luckily, you don't have to know anything about the inner-workings of it. All you do is call $.getJSON and it'll work!
Related
I'm asking this one for the record:
So I have a client making an Ajax call and I'm trying to have the server handle it and redirect the client server-side.
The express docs make it seem res.redirect(path) is going to actually send a response from the server for the client to redirect(re-route).
e.g.
var path = 'http://localhost:8080/newRoute';
res.redirect(path);
//the client will now go to http://localhost:8080/newRoute
But it appears that this only tells the client to make another request to
the url given.(Which seems useless, but that is what my network requests are showing currently).
Many suggest to do the following to do an actual redirect server-side
var path = 'http://localhost:8080/newRoute';
response.writeHead(302, {'Location': path});
response.end();
So does this mean that that we need to change the header in order for the redirect work?
i.e.
res.location('http://localhost:8080/newRoute');
res.redirect('http://localhost:8080/newRoute');
But the above looks horribly redundant and makes res.redirect look like it wasn't intended for server-side redirects to a new page.
Yet the Express docs show an example like this:
res.redirect('http://google.com');
which I don't know how that could be interpreted any other way than "send the client to the page 'http://google.com' ".
Big Question:
So is res.redirect(path) suppose to handle server-side redirects? If not, what do we do?
I'm currently working on e-commerce based website for our country.I need to integrate a local payment gateway solution. The architecture of that system is actually to based on REST. so I need to post several data to a specific url and they response back with a content of another url where my app should be redirected. After the transaction either success/failed/canceled, the third party system redirects back to my app url.
now I'm having problem with redirecting to the third-party url from my app.
var result = HTTP.post(url,{params:data_me});
console.log(result.content+' ....');
The post method is synchronous and i recieve the url properly. how do I now redirect my app to their response url.
Note: these statements are written in a server method. And I'm using iron router for my app.
You can use location.href in client side code, better put it under onRendered
location.href="http://example.com"
or use iron-router's Router to write redirect header in server side
Router.route('/myurl', function () {
//do sth
var url = "http://example.com"
this.response.writeHead(302, {
'Location': url
});
this.response.end();
}, {
where: 'server'
});
Since you're doing the integration on the server, have the server method return the new url to the client. Then on the client simply do:
window.location=url;
iron-router won't take you to an offsite url because it only manages internal routes.
docs
Given a one page app that uses push state and RESTful backend, we can imagine accessing the listing of a resource at /resourceName (i.e. /users). So /users would create a formated list of users
Now the problem is that this resource JSON or XML feed should also be mapped to /resourceName, so if boot form my application entry point at / then all is good, when navigating to /users the JS router can trigger a Ajax call that get the JSON data. Now the problem is if the URL is pointing directly at /users then i will land on a JSON feed instead of the actual listing. I could route all call to a main entry point and then let the JS router do the work though if i do so the AJAX call to fetch JSON wil brake.
I remember a while ago people adding .json to their json request, or even a GET parameter ?format=json and then having the controller taking different actions. I find that somewhat hacky.. Are there any other ways to go about this?
For that matter i am using laravel4 backend and backboneJS
I think the .json on the end of the request is the best approach. the other approach could be to create a separate endpoint endpoint for api request api.mydomain.com vs www.mydomain.com
What method you use to get a different response depends on how you'd like to go about it. Since you're asking about an opinionated topic (There is no one right answer), here's some options you can explore.
First, here's a good read from Apigee on API design, which covers what I'll write about here. See page 20 on "Support multiple formats"
The Rails way: Append a .json, .xml or other extension at the end of your request and handle that code within Laravel (You may want to use the "before" filter to check the request or Laravel's excellent route parameters, which allow the use of regex to define the route).
You can check the "accept" header in the request and set that header in your ajax calls to "application/json" instead of the default "application/html" to inform your application which format to use in its response. Again, the before or after filters may come in handy to check the request and define the response as appropriate
Create a query string `?format=json" or similar. Same comments as in point 1.
Laravel doesn't have built-in methods to change the response for you. You can, however, fairly easily detect what's being asked and choose which format to return in. It does take some thinking about how you want to accomplish that, however.
Some options off the top of my head:
Use the "before" or "after" filter to check what the request "wants" for a format, and do some transformations on the response to make that work
Extend the request and response class to "automate" this (request class to detect format, response class to transform the response to the correct format)
Hope that helps
It's valid to say which representation do you want. E.g. JSON, XML or binary, depends on what you want and which serializers have you developed.
You framework should support either setting of default representation or if you provide some mapping URL -> method you should be able to say which representation you are going to return - also either by default or taken within some object which represents your request.
I ended up using different endpoints as suggested by #Aaron Saunders. In laravel 4 this is dumb easy to implement using group routes:
app.php:
'domain' => 'whatever.dev',
routes.php:
define('APP_DOMAIN', 'app.' . Config::get('app.domain'));
define('API_DOMAIN', 'api.' . Config::get('app.domain'));
Route::group(array('domain' => API_DOMAIN), function()
{
// API ROUTES
});
Route::group(array('domain' => APP_DOMAIN), function()
{
// VIEW ROUTES
});
Beautiful!
I'm using GWT to develop a web app. I'm currently using AJAX calls to retrieve values from the server. I have following queries regarding to AJAX calls:
Assume: I have an app, name of which is: "Application" and the entry point class is: "entry.java"
I know: the application could be invoked as: http://localhost:8080/Application/entry.html
1. I would like to know what what is the output URL given by gwt.getmodulebaseURL()?
Assume: In the same application I have a service called "ServerValuesService" and its corresponding Async. I have corresponding serviceImpl, which has a method called List < String >search(String) at the server side.
I could retrieve the values from the server as well. However,
2. I would like to know what would be the direct URL to access this service? For Instance, I need to obtain the list of values, by just giving a URL (passing value for the String). i.e. I need to access the method search(String) and retrieve the list just by typing a url such as:
http://localhost:8080/Application/entry/serverValuesService?string="hello"
I'm sure the above URL is wrong. I need to know exact conversion between URL and the corresponding service. Is this possible at all?
Thanks in advance!
1) In your case it will give you http://localhost:8080/Application . Application is your modulename.
2) These services are actually HttpServlets and their URL's are defined in the web.xml file. But Google uses POST method to send your variables and takes care of serialization for you, what you are trying to do is send it via GET method which is as far as I know not implemented by Google RemoteServiceServlet.So I would say no its not possible unless you extend these services to work with GET methods yourself but I don't know if that is possible.
Assume: I have an app, name of which is: "Application" and the entry point class is: "entry.java"
I know: the application could be invoked as: http://localhost:8080/Application/entry.html
The url http://localhost:8080/Application/entry.html is called host page url. In this html page you load your GWT module using a script tag:
<!-- This script tag is what actually loads the GWT module. The -->
<!-- 'nocache.js' file (also called a "selection script") is -->
<!-- produced by the GWT compiler in the module output directory -->
<!-- or generated automatically in hosted mode. -->
<script language="javascript" src="calendar/calendar.nocache.js"></script>
So if you put above example in your entry.html, the module will be loaded from http://localhost:8080/Application/calendar/calendar.nocache.js making http://localhost:8080/Application/calendar/ your module base url.
I would like to know what would be the direct URL to access this
service? For Instance, I need to obtain the list of values, by just
giving a URL (passing value for the String). i.e. I need to access the
method search(String) and retrieve the list just by typing a url
GWT RPC use a custom serialization format to encode requests to the RPC Service on server. The RPC service is implemented as a subclass of RemoteServiceServlet on the server. The RemoteServiceServlet handles the http POST requests, de-serializing the request from client and invvoking appropriate service method of sub-class.
So for directly accessing the service you'll need:
1. The service URL
2. Request payload encoded in GWT's custom serialization format
3. Ability to HTTP POST the payload to the Service URL
1 and 3 are easy to acquire. You already know the URL at which your service is mapped in web.xml. And you can do post from any http client or browser plugins like this. The hard-part would be to generate request payload in GWT's custom serialization format. For simple cases, you can generate a request from your application and capture the raw payload from Firebug, Fiddler or similar tool and simply replay it using your http client.
I have a web service in the form `http://....../methodName
It returns a jsonp result such as:
methodName(["a":"a", "b":"b"])
GWT provides JsonpRequestBuilder class to parse jsonp.
JsonpRequestBuilder rb = new JsonpRequestBuilder();
rb.setCallbackParam("callback");
rb.requestObject("http://...../methodName", new AsyncCallback<TestJS>(){
...
});
This structure makes a request to url :
"http://...../methodName/?callback=__gwt_jsonp_P0.onSuccess".
My web service returns a callback with methodName not with __gwt_json.....
So gwt could not create a JavaScriptObject from that response.
Also JsonpRequestBuilder works with GET not POST.
How can I achieve those: Sending requests with POST and modifying GWT's default callback name.
JSONP will NOT work with POST. Its not a GWT limitation btw.
JSONP is essentially including a javascript file from your server. So, when you make a JSONP call, a temporary tag is added to the DOM.
Now, a <script> tag can always makes a GET request. That's a browser thing, and GWT cannot do much about it.
If you want to make a cross-domain POST call, you have to chose from one of the following options (and they have nothing to do with GWT)
Use Flash plus a crossdomain.xml that allows cross domain posts
Use Cross Origin Resource Sharing, or CORS. NOTE that this is only supported in modern browsers
Use a proxy server on your domain
Unfortunatly, this isn't how JsonP works. The requests are made by adding a tag to the page, and the results are passed into a function wrapped around the data – in your case, __gwt_jsonp_P0.onSuccess.
The callback name can't be affected, at least while using JsonpRequestBuilder – the system needs to account for the fact that you could send multiple requests out at once, possibly even to different endpoints. A JsonP endpoint that doesn't allow the caller to customize the callback function name is very unusual, and even more odd is an endpoint expecting JsonP calls that expects an impossible POST.
You can implement your own JsonP client side code by using the ScriptElement type, and registering your own global callback to call into your GWT java code.
Look into the API docs for the web service, and see if there is perhaps a better way to communicate with it, perhaps by using a proxy on your own server, avoiding the cross domain issue altogether.