AJAX Applications and XMLHttpRequest

AJAX
CRIA Webtechnology
Thursday, March 18, 2010

Some applications of AJAX
2

 Validation
 Dynamic listboxes
 Autorefresh
 Excessive tooltips
 Calling webservices

CRIA-WT - Rody Middelkoop


AJAX
3

 Asynchronous Javascript And XML

 No DOM Standard, equals implementation in several
browsers through the XMLHttpRequest



XMLHttpRequest
4

AJAX Enabled Web App. Webserver

Server
Resource
XHR
function callback()
{
2 }
Databaseserver

event DB



XMLHttpRequest
4


Server
Resource
XHR
function callback()
{
2 }
Databaseserver

1 DB
event



XMLHttpRequest
4

3
Server
Resource
XHR
function callback()
{
2 }
Databaseserver

1 DB
event



XMLHttpRequest
4

3
Server
Resource
XHR
function callback()
{ 4
2 }
Databaseserver

1 DB
event



XMLHttpRequest
4

3
Server
Resource
XHR
5
function callback()
{ 4
2 }
Databaseserver

1 DB
event



XMLHttpRequest
4

3
Server
Resource
XHR
5
function callback()
{ 4
2 } 6
Databaseserver

1 DB
event



XMLHttpRequest
5
HTML:
<div id="emailSection">
<input id="email" type="text"
onblur="new
ValidationServiceRequestor().validateEmail();"/>
<label>Emailadres</label>
</div>

JAVASCRIPT:
var ValidationServiceRequestor = function(){
this.validateEmail = function(){
var emailaddress = document.getElementById("email");
var serviceProxy = new ValidationServiceProxy(this);
serviceProxy.validateEmail(emailaddress);
}
this.setValid = function(isValid){
alert(isValid)
}
}



XMLHttpRequest
6
var ValidationServiceProxy = function(callbackObject){
this.validateEmail = function(emailaddress){
validateEmailRequest = getXmlHttpRequestObject();
if (validateEmailRequest.readyState == 4 || validateEmailRequest.readyState == 0) {
var params = "method=validateEmail&emailaddress=" + emailaddress.value;
validateEmailRequest.open("GET", 'validationService.php?' + params, true);
validateEmailRequest.onreadystatechange = validateEmailResponse;
validateEmailRequest.send(null);
}
}
validateEmailResponse = function(){
if (validateEmailRequest.readyState == 4) {
var isEmailValid = eval("(" + validateEmailRequest.responseText + ")");
var isValid = (isEmailValid[0].emailaddressCount == 0)
callbackObject.setValid(isValid)
}
}
getXmlHttpRequestObject = function(){
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
else {
if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
}
}


XMLHttpRequest - Callback
7

function callback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
//do something interesting here
}
}
}



XMLHttpRequest
8

 You aren't allowed to make XMLHttpRequests to any
server except the server where your web page
came from.



XMLHttpRequest: Application Proxy
9

AJAX Enabled Web App. Webserver: Application Proxy

Server
Resource
XHR
function callback()
{
2 }
Webserver
in other domain

event WebService



9


Server
Resource
XHR
function callback()
{
2 }
Webserver
in other domain

1
event WebService



9

3
Server
Resource
XHR
function callback()
{
2 }
Webserver
in other domain

1
event WebService



9

3
Server
Resource
XHR
function callback()
{ 4
2 }
Webserver
in other domain

1
event WebService



9

3
Server
Resource
XHR
5
function callback()
{ 4
2 }
Webserver
in other domain

1
event WebService



9

3
Server
Resource
XHR
5
function callback()
{ 4
2 } 6
Webserver
in other domain

1
event WebService



On Demand JavaScript
10

Web App. Webserver in other domain
Server
Resource
<script>
</script>
returns js

2

event WebService

http://ajaxpatterns.org/On-Demand_Javascript


10

Server
Resource
<script>
</script>
returns js

2

1
event WebService



10

3 Server
Resource
<script>
</script>
returns js

2

1
event WebService



10

3 Server
Resource
<script>
</script>
returns js

2 4

1
event WebService



10

3 Server
Resource
<script>
</script>
returns js
5

2 4

1
event WebService



10

<script id="external_script"
3
type="text/JavaScript"> Server
</script> Resource
<script>
</script> <script> returns js
5
document.getElementById('external_script').src
= 'http://cross.domain.com/other.js'; 4
2 </script>

1
event WebService



XML AND JSON

XML vs JSON
12

XML JSON

<employee> var employee = {
<firstName>John</firstName> "firstName" : John
<lastName>Doe</lastName> , "lastName" : Doe
<empNr>123</empNr> , "empNr" : 123
<title>Accountant</title> , "title" : "Accountant"
</employee> }



JSON Is Not...
13

 JSON is not a document format.
 JSON is not a markup language.
 JSON is not a general serialization format.
 No recursive/recurring structures.
 No invisible structures.
 No functions.



Object
14
{
"name": "Jack B. Nimble",
"at large": true,
"grade": "A",
"format": {
"type": "rect",
"width": 1920,
"height": 1080,
"interlace": false,
"framerate": 24
}
} CRIA-WT - Rody Middelkoop


JSON in Ajax
15

 XMLHttpRequest
 Obtain responseText
 Parse the responseText

 responseData = eval(
 '(' + responseText + ')');

 responseData =
 responseText.parseJSON();



Security
16

 Is it safe to use eval with XMLHttpRequest?
 The JSON data comes from the same server that
vended the page. An eval of the data is no less
secure than the original html.
 If in doubt, use string.parseJSON instead of eval.



JSON Is Not XML
17

 objects  element
 arrays  attribute
 strings  attribute string
 numbers  content
 booleans  <![CDATA[ ]]>
 null  entities
 declarations
 schema
 stylesheets
 comments
 version
 namespace

CRIA WT - Rody Middelkoop


Server-side JSON
18

<?php
$emailaddresses = getDataFromDataSource(
"SELECT COUNT(*) AS emailaddressCount from adresboek where emailaddress = '" .
$_REQUEST["emailaddress"] ."'");
$emailaddressesForJSON = array();
while( $row = mysql_fetch_array($emailaddresses))
{
array_push($emailaddressesForJSON, $row);
}
$jsonText = json_encode( $emailaddressesForJSON );
echo $jsonText;

function getDataFromDataSource($query)
{
mysql_connect("127.0.0.1", "root", "root")
or die("Connection Failure to Database");
mysql_select_db("criademo") or die ("Database criademo not found.");
$result = mysql_query($query);
return $result;
}
?>



Who is responsible for the right
19
format?
Web App. Webserver

WebService
Client

event



19
format?
Web App. Webserver

WebService
Client

1
event



19
format?
Web App. Webserver
2
WebService
Client

1
event



19
format?
Web App. Webserver
2
WebService
Client
3

1
event



19
format?
Web App. Webserver
2
WebService
Client
3

1.SOAP: returns XML
2.REST: let the client pick a
1 format like XML, JSON, HTML
event



Resources and a big thank you
20

 JSON the x in AJAX, www.json.org/json.pdf




AJAX Applications and XMLHttpRequest

Recommended

Recommended

More Related Content

What's hot

What's hot (8)

Viewers also liked

Viewers also liked (17)

Similar to AJAX Applications and XMLHttpRequest

Similar to AJAX Applications and XMLHttpRequest (20)

More from Rody Middelkoop

More from Rody Middelkoop (19)

Recently uploaded

Recently uploaded (20)

AJAX Applications and XMLHttpRequest