PhoneGap: Getting Data from a Server

Well your application would be pretty useless if you couldn't get data from a remote server now wouldn't it? Luckily since your PhoneGap application is running off of the file:// protocol it isn't limited by the same origin policy. This means we can request data using XmlHttpRequest from any domain.

I'm going to give you an example of searching for all tweets that mention PhoneGap that demonstrates this ability without the use of any extra JavaScript library like jQuery or Dojo.


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 

function loadTweets() {



    var request = new XMLHttpRequest();



    request.open("GET", "http://search.twitter.com/search.json?q=phonegap", true);



    request.onreadystatechange = function() {//Call a function when the state changes.



        if (request.readyState == 4) {



            if (request.status == 200 || request.status == 0) {



                var tweets = JSON.parse(request.responseText);



                var data = "<table cellspacing='0'>";



                var tableClass;



                for (i = 0; i < tweets.results.length; i++) {



                    if (i % 2 == 0) {



                        tableClass = 'tweetOdd';



                    }



                    else {



                        tableClass = 'tweetEven';



                    }



                    data += "<tr style='border: 1px solid black'>";



                    data += "<td class='" + tableClass + "'>";



                    data += "<img src='" + tweets.results[i].profile_image_url + "'/>";



                    data += "</td>";



                    data += "<td class='" + tableClass + "'>";



                    data += "<b>" + tweets.results[i].from_user + "</b><br/>";



                    data += tweets.results[i].text + "<br/>";



                    data += tweets.results[i].created_at;



                    data += "</td>";



                    data += "</tr>";



                }



                data += "</table>";



                var twitter = document.getElementById("latestTweets");



                twitter.innerHTML = data;



            }



        }



    }



    console.log("asking for tweets");



    request.send();



}
tweets.js This Gist brought to you by GitHub


So that is the example in a nutshell. It isn't very different from your normal XHR call except for one line that I need to bring to your attention:
if (request.status == 200 || request.status == 0) {
Most of the time you are just looking for the 200 status code you also need to accept the status code of 0 as also OK. Sometimes when you are requesting data via XHR from the file:// protocol you will get a 0 status code. As I said that is perfectly normal and you should treat it as a 200 and move on with your application.

Much of the rest of this code is just building up a HTML string I can do an insert into a div I've set aside for displaying the tweets. Just wanted to show everyone how easy it is to communicate with a remote server.

Comments

Post a Comment

Popular posts from this blog

How to draw an overlay on a SurfaceView used by Camera on Android?

Solution 1: I have a simple program that draws the preview of the Camera into a SurfaceView . What I'm trying to do is using the onPreviewFrame method, which is invoked each time a new frame is drawn into the SurfaceView , in order to execute the invalidate method which is supposed to invoke the onDraw method. In fact, the onDraw method is being invoked, but nothing there is being printed (I guess the camera preview is overwriting the text I'm trying to draw). This is a simplify version of the SurfaceView subclass I have: public class Superficie extends SurfaceView implements SurfaceHolder . Callback { SurfaceHolder mHolder ; public Camera camera ; Superficie ( Context context ) { super ( context ); mHolder = getHolder (); mHolder . addCallback ( this ); mHolder . setType ( SurfaceHolder . SURFACE_TYPE_PUSH_BUFFERS ); } public void surfaceCreated ( final SurfaceHolder holder ) { camera = Camera . open (); try {
Read more

Android TCP Connection Chat application

Image
1. Make the Server in Java To create the server create a new project in Java and make a class called "TCPServer". In this class put the following code: UPDATED 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 import javax.swing.*; import java.io.*; import java.net.ServerSocket; import java.net.Socket;   /**   * The class extends the Thread class so we can receive and send messages at the same time   */ public class TCPServer extends Thread {        public static final int SERVERPO
Read more

Create EditText with dropdown in android

EditText is a view which is used so frequently in Android application,specially in applications which has forms which allow user to fill information of any kind. When you have filled any form you must have a faced an problem (specially on mobile devices) ie. deleting the text written in EditText and prepare editable dropdown which allows to enter manual data with dropdown. So I have created my own custom EditText ie. DropDownEditText.This customized view contains a Button inside the EditText itself. So just on pressing this Button only once you can populate the dropdown with ArrayAdapter. So here my code goes… First XML code for customized view. dropdown_edit_text.xml <?xml version=”1.0″ encoding=”utf-8″?> <RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android"; android:layout_width=”fill_parent” android:layout_height=”wrap_content” > <EditText android:id=”@+id/dropdown_edit” android:layout_width=”fill_parent” androi
Read more