jQuery Mobile App + remote REST Webservice: Alternatives to JSONP? - http

Currently I'm working on a jQuery Mobile website which will later be transformed into an app via Titanium. I have created a RESTful JSON web service, which is running on a different server than the jQuery Mobile application. The web service is consumed via AJAX using JSONP.
One thing I find annoying is that I can't make use of HTTP error codes, because jQuery automatically aborts a JSONP call whenever the server issues an error. I can never get hold of the error code on the client side.
Another thing is that JSONP only works with the HTTP verb GET, you cannot issue a JSONP POST for example (Currently, the web service is GET only, but that could change).
Are there any alternatives to JSONP? Or is JSONP the only choice I have when using remote JSON web services with AJAX? For example, how do Twitter apps interact with the Twitter API (they have a REST API)?

Your question is a nice illustration why people complain that jquery is too easy to adopt ;)
JSONP is not ajax. There are no success and failure callbacks. JSONP is this:
put the parameters in the url
add &jsoncallback=random2745273
create a global variable random2745273 and put the callback reference in it
add <script src="theurlhere"></script> to the head
that's all you can do.
The server returns
random2745273({somedata});
and that's how your callback is called.
If you want to report errors, then your server has to generate a correct code. You will not know what HTTP headers were sent.
And this is the only way you can communicate cross-domain with an api.
Sending cross-domain communicates is also possible with generating iframes, but it's hacky and rarely used.
[edit]
Ok, that got me thinking... I could use the iframe hack to wrap over the JSONP!
And as usual - I wasn't the first to have the idea (and I'm finally humble enough to google my ideas expecting it ;) )
Here it is: http://beebole.com/en/blog/general/sandbox-your-cross-domain-jsonp-to-improve-mashup-security/
awesome
[edit2]
awww, I forgot... There's another one.
window.postMessage
It already got implemented in some browsers. If you don't have to be compatible with most of the browsers, you can start using it now! :)

After some more research on postMessage I found an alternative to JSONP: AJAX via Cross-domain messaging with EasyXDM.
See http://easyxdm.net/wp/2010/03/17/cross-domain-ajax/

Related

How does Backbone send a PUT and PATH request to server

Regarding this question and also many documents have stated that sending a PUT request directly via form in browser is impossible due to security reason.
However, What I am seeing in Backbone is that it could still send a direct PUT request via browser without a workaround like adding a hidden form field.
And they're confusing to me. Is there anything that I'm missing here?
A form can only send a GET or a POST request, as set in the method attribute.
However, Backbone delegates its requests to jQuery.ajax by default (or whatever you want via Backbone.ajax) which itself wraps XMLHttpRequest, an object that can send PUT/DELETE/PATCH requests.
From https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
XMLHttpRequest is a JavaScript object that was designed by Microsoft
and adopted by Mozilla, Apple, and Google. It's now being standardized
in the W3C. It provides an easy way to retrieve data from a URL
without having to do a full page refresh. A Web page can update just a
part of the page without disrupting what the user is doing.
XMLHttpRequest is used heavily in AJAX programming.
many documents have stated that sending a PUT request directly via browser is impossible due to security reason
Citation please.
Backbone sends a PUT just like it sends any other request, with jQuery,
Backbone.ajax({
type: 'PUT'
...
});
It is just some server side langauges,like PHP, that have problems with receiving a PUT request.
The hidden form field is used when posting from a <form>. Backbone uses javascript.

How to do an HTTP Options request in AngularJS?

AngularJS' $http service doesn't provide for HTTP Options requests, and I very much would like to have them.
I created a Web API using Django REST framework and I'm trying to leverage all it offers me in an AngularJS web application. My Django REST api provides a plethora of data from HTTP Options requests (e.g. required fields, where to obtain connected data from via hyperlinks, etc.) and I want to leverage that in the Angular application.
However, AngularJS' $http service doesn't appear to support native Options requests which makes this a pretty annoying problem...I mean, if it isn't built-in a workaround isn't going to be pretty.
I tried restangular: definitely not what I need because it doesn't allow me to supply my hyperlinks returned in the JSON from the api, and I'll be darned if I'm parsing a URL for an 'id' - absolutely silly if I have the URL already.
I looked at the angular-django-rest library: highly unsupported and couldn't get PUTs to work for the life of me b/c there's only a $save() method, which somehow automagically selects POST/PUT (?).
So, I'm at a loss! Does anyone have any idea how to get an HTTP Options request in AngularJS?
$http supports options. Options doesn't have a function declared like $http.get() or $http.post(), but you can specify any method you want by specifying the method and passing it directly into $http.
$http({method: 'OPTIONS', url: '/foo'})
You can also use $resource:
$resource(address, {}, {options:{method:'OPTIONS'}});

How do I append a specific header to an HttpResponse by default from an ASP.NET web service?

I have a web service with many methods. Clients accessing this service could be from any domain (which means I have to put some cross-domain magic in here and there). I found a header I can add to my response that enables cross-domain ajax calls to work (this made things work for me on Chrome browser).
To solve my issue, I could just paste this:
HttpContext.Current.Response.AppendHeader("Access-Control-Allow-Origin", "*");
on every method in my service. That's tedious and ugly, and I was wondering if anyone knew a more elegant way of having that header in my web service response by default?
I found an embarrassingly simple solution. My web service is a class, so I just stuck the line mentioned in the question into the class constructor.

http post from firefox extension to ASP.NET

I want to be able to send a simple http post from my firefox extension to my ASP.NET application. From the client side, I have used XMLHTTPRequest by sending the post with the url: http://localhost:15227 which is the url on my ASP.NET app.
What do I need to do to receive a remote request from ASP.NET please?
thanks
This page from Apple has a pretty good example of how to send/receive data using a raw XmlHttpReqeust object (as opposed to a JavaScript library).
You can get the value of the response from the responseText property once you know the response came back successfully. Specifically take a look at where the processReqChange function is defined, your code will go in there (or your equivalent of that function).
If you want to explore JavaScript frameworks, take a look at how much less code you need if you use jQuery get (for example).

asp.net webservice with jquery on different domain

I got to work on PHP app which requires a webservice call to an Asp.net webserivce. Client insist to call this webservice with POST directly via jquery.
My knowledge says its not possible to call different domain webservice from JS and I'll have to create a proxy page to consume this webservice.
So I just want to confirm, is there any hack around to consume webservice directly from jQuery POST call and parse response (Which is XML not JSON) on page.
Thanks
No there is no way around it x-browser. Server Proxy or json-p are your choices.

Resources