Notes Index
What is Ajax?
- Asynchonous JavaScript and XML (AJAX)
- Way to transport data from client to server (via HTTP GET or POST methods)
- Allows partial page rendering without a complete posting back to server
- Reduces network IO
- Allows more and faster feedback to user
What Ajax is Not
- Not the updating of the UI
- Not flashy animations
Why Ajax
- Provides an more interactive experience (desktop-light)
- Web 1.0 replaced with Ajax-enabled Web 2.0
- Provides more client feedback
- Reduces network traffic
Example: Netflix.com with Firebug Console for HTTP GET requests
What is ASP.NET AJAX Framework
ASP.NET AJAX is built-into ASP.NET 3.5 and is a Microsoft framework to designed to
- Simplify cross browser support
- Extend JavaScript to offer more functionality
- Integrate with ASP.NET via server controls
- Flexible and extensible
PHP Ajax libraries
In addition to ASP.NET AJAX, there are a number of other Ajax libraries available for download over the Internet to use with PHP. A few include
Using PHP in the Hebeler Labs
We will work with Ajax and PHP for this example. First, if you have not already, set up and test Abyss and HTML-Kit for PHP development.
- Create three folders on your U:\ drive
- Setup HTML-Kit to work with PHP and the Abyss Web server
Hands-on Activity
To get started, let's create "Hello World" Ajax applications from scratch.
Ajax uses the XMLHttpRequest object. The XMLHttpRequest API provides methods that allow JavaScript code to request an URL, receive its content, and then process the content with JavaScript. Unfortunately, Microsoft versus the rest of the world use different implementations of XMLHttpRequest.
Ajax uses JavaScript to do its work. While we most often will link to an external JavaScript file, for this simple example we can embed the JavaScript into the head section of a HTML page.
- Start up HTML-Kit, create a new XHTML document, and save it as
u:\htdocs\Day16\Day16.html.
- In the head section of the XHTML document, place the following JavaScript code
<script type="text/javascript">
var xmlhttp = createRequestObject();
function createRequestObject() {
if(window.XMLHttpRequest)
return new XMLHttpRequest();
else
return new ActiveXObject("Microsoft.XMLHTTP");
}
function sendRequest() {
xmlhttp.open('get', 'Day16.php');
xmlhttp.onreadystatechange = handleResponse;
xmlhttp.send(null);
}
function handleResponse() {
if(xmlhttp.readyState == 4){
var xmlhttpResponse = xmlhttp.responseText;
document.getElementById("data").innerHTML = xmlhttpResponse;
}
}
</script>
In the body of your XHTML page, place the following code
<p>
<a href="javascript:sendRequest()">Update Data</a>
</p>
<div id="data">
</div>
Finally, create a PHP page named U:\htdocs\Day16\Day16.php and place the following code in it.
<?php
echo "<h1>Hello World</h1>";
?>
View Day16.html in the browser, click on the Update Data link, and you should see the contents of the Day16.php page inserted as the innerHTML for the data element.
XML data
Instead of dealing with the response data as text, we can instead deal with it as XML by using responseXML.
Activity: Processing XML data
- Create an XML file named Day16.xml containing the following XML data
<Course title="CS 352" instructor="Ed Gellenbeck">
<Students>
<Student name="Devlin, Liam" />
<Student name="Dunda, Brock" />
<Student name="Hansen, Samwise" />
</Students>
</Course>
In the body of your Day16.html file, add the following code
<h1 id="course"></h1>
<h2 id="instructor"></h2>
<ol id="students"></ol>
And in your JavaScript code, add the following method
function handleResponse2()
{
if(xmlhttp.readyState == 4){
var xml = xmlhttp.responseXML;
var root = xml.documentElement;
document.getElementById("course").innerHTML = root.getAttribute("title");
document.getElementById("instructor").innerHTML = root.getAttribute("instructor");
var orderedList = document.getElementById("students");
var students = xml.getElementsByTagName("Student");
for (var i=0; i<students.length; i++) {
var listItem = document.createElement("li");
var listItemText =
document.createTextNode(students[i].getAttribute("name"));
listItem.appendChild(listItemText);
orderedList.appendChild(listItem);
}
}
}
Revise your sendRequest() JavaScript method to use Day16.xml as the argument to the open() method and handleResponse2() as the value for onreadystatechange.
