Here's something I knew wouldn't be a problem but I wanted to confirm. As you know, an HTML page cannot make an Ajax request to a remote server. There are ways around this (a proxy on your server or JSONP), but for the most part, it's a hard and fast rule. But what about for Android apps? Specifically - what if i use Phonegap and jQuery Mobile to build a "real" native application, will the same restrictions hold true? As I expected - they do not - and that's awesome news for folks wanting to make use of remote services. Here is a trivial example I built using Dreamweaver CS 5.5.
First - my HTML page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link href="jquery-mobile/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.5.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
<!-- This reference to phonegap.js will allow for code hints as long as the current site has been configured as a mobile application.
To configure the site as a mobile application, go to Site -> Mobile Applications -> Configure Application Framework... -->
<script src="phonegap.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#testLink").click(function(e) {
e.preventDefault();
$("#resultBlock").html("Getting the funk - stand by...");
$.get("http://www.raymondcamden.com/demos/may62011/ray.cfc?method=hellofromray&returnFormat=plain", {}, function(data) {
$("#resultBlock").html(data);
})
});
});
</script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>Page One</h1>
</div>
<div data-role="content">
<a id="testLink" rel="external">Bring the Funk</a>
<div data-role="collapsible">
<h3>Result from Ray</h3>
<p id="resultBlock"></p>
</div>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
Most of this is pretty vanilla HTML but make note of the content with the DIV block. I've got a link with an ID and then right below it a collapsible block. This is one of the jQuery Mobile UI widgets you can employ. Now go back to the top.
I've told jQuery to listen for click events on my link. When clicked, I set a quick status message and then fire off my request to a remote ColdFusion server. In this case it's just returning a string but obviously I could request JSON as well. I take the result and drop it in my collapsible div. The CFC returns a random number so I can test multiple clicks just to be sure.
And that's it. For those of you with Droid devices, I've attached the APK generated by the Dreamweaver/Phonegap relationship I'm officially calling Uber Awesome. Remember - if you have a device that doesn't allow for ad hoc installs - like my own HTC Inspire, you can download the APK to your machine and do a manual install. It's as easy as: adb install filename.apk (assuming your device is connected via USB of course).
Archived Comments
This restriction actually isn't a hard and fast rule any more. Newer browsers can get around this if you use the Cross-Origin Resource Sharing standard:
http://www.nczonline.net/bl...
Interesting - and surprising how wide it is supported.
Hi Raymond, this trick is very useful thanks for sharing your knowledge but i have a question how to get dynamic urls like if i want to get the href from <a> tag i tried $(this).attr("href")); insted your given url. but it's not working thanks in advance
Well that should work, but it depends on the context. If you are using a click handler on the link, then THIS will refer to it. If you are using something else, then you need a different reference. If you are using my code, that should have worked though. Maybe share your code via pastebin.
Hello when i try it i receive a 200 error, is any solution?
200 isn't an error. It means OK.
when i try and build in xcode, the ajax is not working, where it used to in DreamWeaver :(
Sorry, I guess I don't understand, it doesn't seem to actually make it into the final app. My app just sits there and does nothing.
Apologies, I was missing this at the top of my php file:
header('Access-Control-Allow-Origin: *');
Ray, thanks for this post! However, I am wondering what options do we have to "Secure" the cfc's that I make ajax calls to. Say we want to restrict only this app to call the cfc. The general public should not be able to call the cfc directly from their browsers or other applications. Any suggestions?
None, because you can't. A CFC with remote methods can be called from anywhere. You could do a check on the remote IP of the caller, but since you are supporting mobile, you don't know what any of the IPs will be.
Basically, don't even think about this route.
The downloadable APK does not work. Upon launch, it just sits there in fact, the status message doesn't even update so I don't think its even trying.
It may be your Android version. This APK is over a year old - I'd recommend building a new version using PhoneGap Build.
oh, I love this blog, how can I get a blog that will display formatted code of html and css. thanks
I've used 3 different code formatters (maybe more) over the history of this blog. What you see above is ColdFish (http://coldfish.riaforge.org/). I've also used Gists and PrismJS most recently.