A first example...
AJAX stands for Asynchronous JavaScript And XML, and allows us to make our websites seem more dynamic. Let's start with the JavaScript side of things...Create a file called static.html and add the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Ajax With Jquery</title>
<!-- Grab the JQuery API from the Google servers -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<!-- Our own JQuery code to do the AJAX-y stuff -->
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#txtValue').keyup(function(){
$('#display').html($(this).val());
});
});
</script>
</head>
<body>
<label for="txtValue">Enter a value : </label>
<input type="text" name="txtValue" value="" id="txtValue">
<div id="display"></div>
</body>
</html>
Create a file called app.yaml and add the following:
application: almightynassar
version: 1
runtime: python27
api_version: 1
threadsafe: yes
handlers:
- url: /(.*).html
static_files: \1.html
upload: (.*).html
The above will simply serve ALL html page requests directly (which is enough for this example).
Now, if you are using Eclipse just right click on the project, select 'Run As' and choose the 'PyDev: Google App Run' option. Depending on how you configured your Google SDK, it will start up a server on your machine on port 8080. Open up a new tab and navigate to http://localhost:8080/static.html. You should now see a text box; when you type into the box it will automatically display the text in the space below.
Something a little more AJAX - The HTML
So our original example just showed how we could manipulate the DOM (Document Object Model) of the browser during run-time, without a page refresh. How can we use this knowledge utilizing the power of Google App Engine? Well, first let us edit static.html to something we can manipulate:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Ajax With Jquery</title>
<!-- Grab the JQuery API from the Google servers -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<!-- Our own JQuery code to do the AJAX-y stuff -->
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
// This will run when the item of class 'button' is clicked
$(".button").click(function() {
// Grabs the text input
var name = $("input#txtValue").val();
var dataString = 'txtValue='+ name;
// This creates the AJAX connection
$.ajax({
type: "POST",
url: "/tutorial",
data: dataString,
success: function(data) {
$('#display').html(data.text);
}
});
return false;
});
});
</script>
</head>
<body>
<form name="contact" method="post" action="">
<label for="txtValue">Enter a value : </label>
<input type="text" name="txtValue" value="" id="txtValue">
<input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
</form>
<div id="display">
</div>
</body>
</html>
Our JavaScript now sends some data to an external URL (in this case /tutorial) and inserts the returned data into the display div. Now all we need to do is code our Python script....
Our Python webapp
Create a file called tutorial.py and add the following code:
# The webapp2 framework
import webapp2
# The JSON library
import json
# Our JSON handler class
class JsonPage(webapp2.RequestHandler):
# The POST handler
def post(self):
# Our POST Input
txtinput = self.request.get('txtValue')
# Create an array
array = {'text': txtinput}
# Output the JSON
self.response.headers['Content-Type'] = 'application/json'
self.response.out.write(json.dumps(array))
# URL map the JSON function
app = webapp2.WSGIApplication([('/tutorial', JsonPage)], debug=True)
Now we just need to edit app.yaml so it can serve up our tutorial script:
application: almightynassar
version: 1
runtime: python27
api_version: 1
threadsafe: no
handlers:
- url: /(.*).html
static_files: \1.html
upload: (.*).html
- url: /(.*)
script: tutorial.app
Open up a new tab and navigate to http://localhost:8080/static.html. You should now see a text box with a button called 'Send'. Typing into this box and then clicking 'Send' will transmit the text to our tutorial script and then display the text in the space below.
References:
- Google's own getting started with webapp and Python.
- The official webapp2 reference
- The Google developer resource for GAE
- Google App Engine FAQs
- YAML reference
- app.yaml reference
- A JQuery tutorial from devirtuoso
- The JQuery AJAX API
- Refresh-less form validation from NetTutes
