COMP249: AJAX

Steve Cassidy

COMP249: Web 2.0 and AJAX

Web 2.0:
- the participatory web
- people publishing content, social media, interaction
- what the web is now
- Britannica Online vs Wikipedia
- Users add value
- Open interfaces, interoperability
AJAX: Asynchronous Javascript and XML
- Modify pages via javascript
- Javascript calls to web resources in the background
- Toolkits

The Machine is Us/ing Us

AJAX

Javascript can modify the DOM of the current page:

function replacetext(id, text) {
   document.getElementById(id).innerHTML = text   
}
function setTextArea(id, text) {
   document.getElementById(id).value = text;
}
...
<button onclick="replacetext('demo', 'Hello World')">
   Click Me!
</button>
 
<button id="demo2" onclick="setTextArea('txt', 'Hello World')">
   Click Me too!
</button>

XMLHttpRequest

Microsoft introduced an ActiveX method in IE to allow an HTTP request from javascript.
Netscape/Mozilla followed suit with their own version.
Both are compatible
Allow sending a request, examining the response.

      
if (navigator.appName == "Microsoft Internet Explorer") {
    http = new ActiveXObject("Microsoft.XMLHTTP");
} else {
    http = new XMLHttpRequest();
}

XMLHttpRequest

The open method initiates a request to a URI: open(method, url)
The send method sends request to the server send(body)
Can also manipulate request header, abort the request and query the response headers.
Request is performed asynchronously - the send method returns before the request is complete
Need a callback function to handle the response.

XMLHttpRequest

  function updatedemo() {
      if(http.readyState == 4) {
          replacetext('demo', http.responseText);
      }
  }

  http.onreadystatechange=updatedemo;
  http.open("GET", "test.txt");
  http.send(null);

XMLHttpRequest: readyState

readyState is a property of the request object that can have one of four values:

0 - uninitiated
1 - loading (ready to send)
2 - loaded (request sent, no response yet)
3 - interactive (begun downloading)
4 - complete (all done)

We generally wait for readyState==4.

XMLHttpRequest: Properties

Other properties of XMLHttpRequest:

responseText - text of response from server
responseXML - an XML DOM object
status - status code (eg. 200) from server
statusText - status text (eg. OK) from server

XMLHttpRequest POST Example

For a POST request, we need to set the MIME type and then send the data:

http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
http.open("POST", "/cgi-bin/doit.py");
http.send("name=Steve&age=21");

XMLHttpRequest: Handling XML Responses

var xmlDoc = http.responseXML
/* use regular XML DOM methods on xmlDoc */
text = xmlDoc.getElementsByTagName('key').item(0).data;

Security Issues

The request must go to the same domain as the source web page.
Can cause problems when testing local files using a file:/// url
Restriction is implemented by browsers to prevent cross-site scripting attacks.

Toolkits

Writing AJAX code is complex and error prone
Many common tasks have been factored out into toolkits
Using toolkits takes advantage of the work of smart people
Eg:
- The Dojo Toolkit: The kitchen sink
- Prototype: base Ajax library and more
- Script.aculo.us: rich effects built on Prototype
- jQuery: plugins are us
- ExtJS: we are good lookin’
- MochiKit: MochiKit makes JavaScript suck less

jQuery in brief

jQuery provides easy shortcuts for adding actions to HTML content
Very compact syntax makes code easy to follow
Select where to apply the effect using CSS selectors
Operations/actions chain...

$("p.special").click(function() { alert("Hello"); });
$("a").addClass("test").show().html("foo");

jQuery Example

  <html>
  <head>
    <script type="text/javascript" 
             src="path/to/jquery.js"></script>
    <script type="text/javascript">
 $(document).ready(function(){
   $("a").click(function(){
     alert("Thanks for visiting!");
   });
 })
    </script>
  </head>
  <body>
    <a href="http://jquery.com/">jQuery</a>
  </body>
  </html>

jQuery Examples

Now write some code...