ajax and json

AJAXCRIA Webtechnology

Thursday, March 18, 2010

CRIA-WT - Rody Middelkoop

Some applications of AJAX

Validation Dynamic listboxes Autorefresh Excessive tooltips Calling webservices

2



AJAX

Asynchronous Javascript And XML

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

3



XMLHttpRequest4

AJAX Enabled Web App.

event

function callback(){}

Webserver

Databaseserver

DB

ServerResourceXHR

2



XMLHttpRequest4


event


Webserver

Databaseserver

DB

ServerResourceXHR

2

1



XMLHttpRequest4


event


Webserver

Databaseserver

DB

ServerResourceXHR

2

1

3



XMLHttpRequest4


event


Webserver

Databaseserver

DB

ServerResourceXHR

2

1

3

4



XMLHttpRequest4


event


Webserver

Databaseserver

DB

ServerResourceXHR

2

1

3

5

4



XMLHttpRequest4


event


Webserver

Databaseserver

DB

ServerResourceXHR

2 6

1

3

5

4



XMLHttpRequest5

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) }}



XMLHttpRequest6

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 - Callback7

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



XMLHttpRequest

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

8



XMLHttpRequest: Application Proxy9


event


Webserver: Application Proxy

Webserverin other domain

ServerResourceXHR

2

WebService





event




ServerResourceXHR

2

1 WebService





event




ServerResourceXHR

2

1

3

WebService





event




ServerResourceXHR

2

1

3

4

WebService





event




ServerResourceXHR

2

1

3

5

4

WebService





event




ServerResourceXHR

2 6

1

3

5

4

WebService



On Demand JavaScript10

Web App.

event

Webserver in other domain

ServerResource returns js<script>

</script>

2

WebService

http://ajaxpatterns.org/On-Demand_Javascript






Web App.

event



</script>

2

1 WebService







Web App.

event



</script>

2

1

3

WebService







Web App.

event



</script>

2

1

3

4

WebService







Web App.

event



</script>

2

1

3

5

4

WebService







Web App.

event



</script>

2

1

3

5

4

WebService


<script id="external_script" type="text/JavaScript"></script><script> document.getElementById('external_script').src = 'http://cross.domain.com/other.js';</script>




http://cross.domain.com/other.js'

http://cross.domain.com/other.js'

XML AND JSONThursday, March 18, 2010


XML vs JSON12

<employee><firstName>John</firstName><lastName>Doe</lastName><empNr>123</empNr><title>Accountant</title></employee>

var employee = {"firstName" : John, "lastName" : Doe, "empNr" : 123, "title" : "Accountant"

}

XML JSON



JSON Is Not...

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.

13



Object14

{

"name": "Jack B. Nimble",

"at large": true,

"grade": "A",

"format": {

"type": "rect",

"width": 1920,

"height": 1080,

"interlace": false,

"framerate": 24

}

}



JSON in Ajax

XMLHttpRequest Obtain responseText Parse the responseText

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

responseData = responseText.parseJSON();

15



Security

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.

16


CRIA WT - Rody Middelkoop

element attribute attribute string content <![CDATA[ ]]> entities declarations schema stylesheets comments version namespace

JSON Is Not XML

objects arrays strings numbers booleans null

17



Server-side JSON

<?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;}?>

18



Who is responsible for the right format?

19

Web App.

event

Webserver

ClientWebService




19

Web App.

event

Webserver

Client

1

WebService




19

Web App.

event

Webserver

Client

1

2

WebService




19

Web App.

event

Webserver

Client

1

2

3WebService




19

Web App.

event

Webserver

Client

1

2

3WebService

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



Resources and a big thank you

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

20


http://www.json.org/json.pdf

http://www.json.org/json.pdf

ajax and json

Technology

rody middelkoopthursday

web app

db event criawt

databaseserverevent

application proxy9 ajax

xmlhttprequest4 ajax

demand javascript

new xmlhttprequest