PhoneGap - Approach to authenticate against a remote website?

I'm playing with PhoneGap for the first time. I'd like to do the following:

Create a login UI in the file index.html like so:

<input id="email">
<input id="password">
<button id="login">Login</button>

The UI will appear on an iphone. When user clicks the login button, I want to asychronously authenticate against the website http://mysite.com/login. If authentication fails, user stays on the index.html UI. If authentication succeeds, user sees a new UI found in dashboard.html, which looks like this:

<ul>
   <li>task 1</li>
   <li>task 2</li>
   <li>task 3 etc... (asychronously retrieve data from http://mysite.com)</li>
</ul>

The user can perform asynchronous ac开发者_开发知识库tions against the list in dashboard.html. So to do this, the server-side scripts must always check to see if user has the appropriate permissions.

SO my questions are:

1) I've outlined what I'd like to achieve, but i've also suggested web-development philsophy to solving the problem. Is there a better overall approach?

2) Which asynchronous technology should I use? Ajax, webservice, something else?

3) Can I still use SESSION on the server side to maintain user session data like user_id, roles, permissions etc... That way the client machine doesn't have to transmit this data with every asynchronous call?

1. good approach
2. I would suggest ajax with json response
3. Yes you can still use session variables

remember in the end, that the phonegap application is really just a web page running in a container created by phonegap.

Here is a phonegap plugin I wrote for logging into a system running SSL

Excellent PhoneGap Documentation is here and don't forget the PhoneGap Wiki has great stuff too

You can use event.preventDefault on submit button in case of no authentication.. Ajax and json is the solution.. But careful about the cross-domain policy if you debug on browser...best debug on emulator.