Ajax And JSON

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 And JSON

More Related Content

What's hot

Viewers also liked

Similar to Ajax And JSON

More from Rody Middelkoop

Recently uploaded

Ajax And JSON