Web Programming

Asynchronous Javascript and XML (AJAX)

 Aryo Pinandito, ST, M.MT

Team Teaching Pemrograman Web
AJAX and Cross-site
Scripting
 Web 2.0 FTW

 Web 3.0? – More Semantic!

AJAX What?
 Asynchronous
 Javascript
 and
 XmlHttpRequest
AJAX What?

$.get('http://google.com', function(xml){
console.log(xml);
});
same-origin policy
 (Alas, no cross-site scripting!)
 Cross-site scripting
Workarounds

Evil.com

• Proxy server
• JSONP Normal WebpageAJAX
• Trusted contexts
function GetXmlHttpObject(handler) {
var objXmlHttp = null; //Holds the local xmlHTTP object instance
The Old
//Depending on the browser, try to create the xmlHttp object
if (is_ie){
var strObjName = (is_ie5) ? 'Microsoft.XMLHTTP' : 'Msxml2.XMLHTTP';
and
try{
objXmlHttp = new ActiveXObject(strObjName);
objXmlHttp.onreadystatechange = handler;
Primitive
}
catch(e){
Way to
//Object creation errored
alert('Verify that activescripting and activeX controls are enabled');
return;
Code
}
} else {
// Mozilla | Netscape | Safari
Ajax
objXmlHttp = new XMLHttpRequest();
objXmlHttp.onload = handler;
objXmlHttp.onerror = handler;
}
//Return the instantiated object
return objXmlHttp;
}
Ajax using jQuery
$.[httpMethod]( // post or get
[url],
[data object JSON],
[successCallback function],
[dataType expected type]
);
jQuery $.post() Parameter
 url
 Type: String, A string containing the URL to which the request
is sent.
 data
 Type: PlainObject or String, A plain object or string that is sent
to the server with the request.
 successCallback
 Type: Function( PlainObject data, String textStatus, jqXHR jqX
HR ), A callback function that is executed if the request
succeeds. Required if dataType is provided, but can be null in
that case.
 dataType
 Type: String, The type of data expected from the server.
Default: Intelligent Guess (xml, json, script, text, html).
Example – Ajax with
jQuery
$.get("router.php",
{ name: "John", time: "2pm" },
function(data){ GET Method
alert("Data Loaded: " + data);
});

$.post("router.php",
{ name: "John", time: "2pm" },
POST Method
function(data){
alert("Data Loaded: " + data);
});
Bind the AJAX Request to
DOM "Button" Click
Event
 In HTML page:
<a href="#" id="btn-ajax">Do AJAX Request</a>

 In Javascript:
$(function(){ // wrap into document Ready function
// so that the following script is executed
// after the Document had finished loading.
$('#btn-ajax').click(function(){
$.post(); // do AJAX request here
});
}); Don’t forget to include "jQuery.js"
before executing any jQuery-related
script
Example
 In file router.php

<?php
echo rand(1111,9999);
Example (2)
$('#btn-ajax').click(function(){
$.post('router.php',
{ do: 'random' }, // variables and value to send
function( data ) {
$('#btn-ajax').text(data); // change button text
}
);
});
Example Explanation
 When an <a> element, which has "btn-ajax" id, is
clicked then a POST request is performed
 The POST request is requesting a resource named
router.php and sending "do" variable with "random"
String value
 router.php then outputing a random value between
1111 and 9999 to requester
 The random value generated from PHP is returned to
the data variable
 The value of data then replaces "btn-ajax" current text
Questions?