View
1.334
Download
1
Category
Tags:
Preview:
DESCRIPTION
Slides used for the course WebTechnology, part of CRIA.
Citation preview
AJAXCRIA Webtechnology
Thursday, March 18, 2010
CRIA-WT - Rody Middelkoop
Some applications of AJAX
Validation Dynamic listboxes Autorefresh Excessive tooltips Calling webservices
2
Thursday, March 18, 2010
CRIA-WT - Rody Middelkoop
AJAX
Asynchronous Javascript And XML
No DOM Standard, equals implementation in several browsers through the XMLHttpRequest
3
Thursday, March 18, 2010
CRIA-WT - Rody Middelkoop
XMLHttpRequest4
AJAX Enabled Web App.
event
function callback(){}
Webserver
Databaseserver
DB
ServerResourceXHR
2
Thursday, March 18, 2010
CRIA-WT - Rody Middelkoop
XMLHttpRequest4
AJAX Enabled Web App.
event
function callback(){}
Webserver
Databaseserver
DB
ServerResourceXHR
2
1
Thursday, March 18, 2010
CRIA-WT - Rody Middelkoop
XMLHttpRequest4
AJAX Enabled Web App.
event
function callback(){}
Webserver
Databaseserver
DB
ServerResourceXHR
2
1
3
Thursday, March 18, 2010
CRIA-WT - Rody Middelkoop
XMLHttpRequest4
AJAX Enabled Web App.
event
function callback(){}
Webserver
Databaseserver
DB
ServerResourceXHR
2
1
3
4
Thursday, March 18, 2010
CRIA-WT - Rody Middelkoop
XMLHttpRequest4
AJAX Enabled Web App.
event
function callback(){}
Webserver
Databaseserver
DB
ServerResourceXHR
2
1
3
5
4
Thursday, March 18, 2010
CRIA-WT - Rody Middelkoop
XMLHttpRequest4
AJAX Enabled Web App.
event
function callback(){}
Webserver
Databaseserver
DB
ServerResourceXHR
2 6
1
3
5
4
Thursday, March 18, 2010
CRIA-WT - Rody Middelkoop
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) }}
Thursday, March 18, 2010
CRIA-WT - Rody Middelkoop
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"); } } }}
Thursday, March 18, 2010
CRIA-WT - Rody Middelkoop
XMLHttpRequest - Callback7
function callback() { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { //do something interesting here } }}
Thursday, March 18, 2010
CRIA-WT - Rody Middelkoop
XMLHttpRequest
You aren't allowed to make XMLHttpRequests to any server except the server where your web page came from.
8
Thursday, March 18, 2010
CRIA-WT - Rody Middelkoop
XMLHttpRequest: Application Proxy9
AJAX Enabled Web App.
event
function callback(){}
Webserver: Application Proxy
Webserverin other domain
ServerResourceXHR
2
WebService
Thursday, March 18, 2010
CRIA-WT - Rody Middelkoop
XMLHttpRequest: Application Proxy9
AJAX Enabled Web App.
event
function callback(){}
Webserver: Application Proxy
Webserverin other domain
ServerResourceXHR
2
1 WebService
Thursday, March 18, 2010
CRIA-WT - Rody Middelkoop
XMLHttpRequest: Application Proxy9
AJAX Enabled Web App.
event
function callback(){}
Webserver: Application Proxy
Webserverin other domain
ServerResourceXHR
2
1
3
WebService
Thursday, March 18, 2010
CRIA-WT - Rody Middelkoop
XMLHttpRequest: Application Proxy9
AJAX Enabled Web App.
event
function callback(){}
Webserver: Application Proxy
Webserverin other domain
ServerResourceXHR
2
1
3
4
WebService
Thursday, March 18, 2010
CRIA-WT - Rody Middelkoop
XMLHttpRequest: Application Proxy9
AJAX Enabled Web App.
event
function callback(){}
Webserver: Application Proxy
Webserverin other domain
ServerResourceXHR
2
1
3
5
4
WebService
Thursday, March 18, 2010
CRIA-WT - Rody Middelkoop
XMLHttpRequest: Application Proxy9
AJAX Enabled Web App.
event
function callback(){}
Webserver: Application Proxy
Webserverin other domain
ServerResourceXHR
2 6
1
3
5
4
WebService
Thursday, March 18, 2010
CRIA-WT - Rody Middelkoop
On Demand JavaScript10
Web App.
event
Webserver in other domain
ServerResource returns js<script>
</script>
2
WebService
http://ajaxpatterns.org/On-Demand_Javascript
Thursday, March 18, 2010
CRIA-WT - Rody Middelkoop
On Demand JavaScript10
Web App.
event
Webserver in other domain
ServerResource returns js<script>
</script>
2
1 WebService
http://ajaxpatterns.org/On-Demand_Javascript
Thursday, March 18, 2010
CRIA-WT - Rody Middelkoop
On Demand JavaScript10
Web App.
event
Webserver in other domain
ServerResource returns js<script>
</script>
2
1
3
WebService
http://ajaxpatterns.org/On-Demand_Javascript
Thursday, March 18, 2010
CRIA-WT - Rody Middelkoop
On Demand JavaScript10
Web App.
event
Webserver in other domain
ServerResource returns js<script>
</script>
2
1
3
4
WebService
http://ajaxpatterns.org/On-Demand_Javascript
Thursday, March 18, 2010
CRIA-WT - Rody Middelkoop
On Demand JavaScript10
Web App.
event
Webserver in other domain
ServerResource returns js<script>
</script>
2
1
3
5
4
WebService
http://ajaxpatterns.org/On-Demand_Javascript
Thursday, March 18, 2010
CRIA-WT - Rody Middelkoop
On Demand JavaScript10
Web App.
event
Webserver in other domain
ServerResource returns js<script>
</script>
2
1
3
5
4
WebService
http://ajaxpatterns.org/On-Demand_Javascript
<script id="external_script" type="text/JavaScript"></script><script> document.getElementById('external_script').src = 'http://cross.domain.com/other.js';</script>
Thursday, March 18, 2010
XML AND JSONThursday, March 18, 2010
CRIA-WT - Rody Middelkoop
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
Thursday, March 18, 2010
CRIA-WT - Rody Middelkoop
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
Thursday, March 18, 2010
CRIA-WT - Rody Middelkoop
Object14
{
"name": "Jack B. Nimble",
"at large": true,
"grade": "A",
"format": {
"type": "rect",
"width": 1920,
"height": 1080,
"interlace": false,
"framerate": 24
}
}
Thursday, March 18, 2010
CRIA-WT - Rody Middelkoop
JSON in Ajax
XMLHttpRequest Obtain responseText Parse the responseText
responseData = eval( '(' + responseText + ')');
responseData = responseText.parseJSON();
15
Thursday, March 18, 2010
CRIA-WT - Rody Middelkoop
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
Thursday, March 18, 2010
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
Thursday, March 18, 2010
CRIA-WT - Rody Middelkoop
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
Thursday, March 18, 2010
CRIA-WT - Rody Middelkoop
Who is responsible for the right format?
19
Web App.
event
Webserver
ClientWebService
Thursday, March 18, 2010
CRIA-WT - Rody Middelkoop
Who is responsible for the right format?
19
Web App.
event
Webserver
Client
1
WebService
Thursday, March 18, 2010
CRIA-WT - Rody Middelkoop
Who is responsible for the right format?
19
Web App.
event
Webserver
Client
1
2
WebService
Thursday, March 18, 2010
CRIA-WT - Rody Middelkoop
Who is responsible for the right format?
19
Web App.
event
Webserver
Client
1
2
3WebService
Thursday, March 18, 2010
CRIA-WT - Rody Middelkoop
Who is responsible for the right format?
19
Web App.
event
Webserver
Client
1
2
3WebService
1.SOAP: returns XML2.REST: let the client pick a format like XML, JSON, HTML
Thursday, March 18, 2010
CRIA-WT - Rody Middelkoop
Resources and a big thank you
JSON the x in AJAX, www.json.org/json.pdf
20
Thursday, March 18, 2010
Recommended