Thursday, February 3, 2011

How to get data from Google App Engine with XMLHttpRequest on PhoneGap

There is a cross domain issue when we implement this program.
Follow the code disolves it.

javascript side:
var url = request; // ex)"http://localhost:8080"
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onreadystatechange = function(){
if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
var response = JSON.parse(xhr.responseText);
$.each(response,function(i,r){
alert(r.content);
});
alert("get success!");
} else {
alert(xhr.responseText);
alert("lose");
}
}
};
xhr.send(null);
Google App Engine side:
class MainHandler(webapp.RequestHandler):
def get(self):
self.response.headers['Access-Control-Allow-Origin'] = '*'
self.response.headers['Access-Control-Allow-Headers'] = '*'
self.response.headers['Access-Control-Allow-Methods'] = 'GET'
self.response.headers['Content-Type'] = 'text/plain;charset=UTF-8'
tweets = db.GqlQuery('SELECT * FROM Tweet')
results = []
for tweet in tweets:
result = {}
result['content'] = tweet.content
results.append(result)
self.response.out.write(simplejson.dumps(results))

reference:
XMLHttpRequest Cross-domain issue
As soon as you sent the code, I have tested it and it did not work in my Chrome, Firefox or Android device. So, I came home last night and tested your code on Safari and my iPhone app, it works without any issues, actually my original code also worked without any issues in Safari and iPhone. 

No comments:

Post a Comment