SlideShare a Scribd company logo
Ajax
For dummies and not only…
Author: Alexios Tzanetopoulos - Developer
So…. What is Ajax?
 Ajax stands for: Asynchronous JavaScript and XML
 It is a set of techniques for creating highly interactive web sites and web
applications.
Examples?
http://www.aia.gr/traveler/flight-info/rtfi/
http://peteranswers.com/
Main idea
 The idea is to make what’s on the Web appear to be local by giving you a
rich user experience, offering you features that usually only appear in
desktop applications.
Is Ajax a technology?
Ajax is NOT a technology. It’s a combination of several technologies:
 standards-based presentation using XHTML and CSS;
 dynamic display, interaction using the Document Object Model (DOM);
 data interchange and manipulation using XML and JSON;
 asynchronous data retrieval using XMLHttpRequest object;
 and JavaScript binding everything together.
A little bit of History
 Microsoft Outlook Web Access team implemented Ajax in 1998
 Google maps and Gmail used it in 2005
 James Garret wrote an article combining the techniques that google used
and that’s how the term Ajax was coined (2005)
 W3C released the first draft specification for the XMLHttpRequest object in
an attempt to create an official web standard in 2006
Hands on code…
 HTML - CSS
<H1>An Ajax example</H1>
<form>
<input type = "button" value = "Fetch the
message“ onclick = "getData('data.php',
'targetDiv')">
</form>
<div id="targetDiv">
<p>The fetched message will appear
here.</p>
</div>
Hands on code… continued
 Javascript – XmlHttpRequest – DOM Manipulation
<script language = "javascript">
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) XMLHttpRequestObject = new XMLHttpRequest();
else if (window.ActiveXObject) {
XMLHttpRequestObject = new
ActiveXObject("Microsoft.XMLHTTP");}
function getData(dataSource, divID){
if(XMLHttpRequestObject) {
var obj = document.getElementById(divID);
XMLHttpRequestObject.open("GET", dataSource);
XMLHttpRequestObject.onreadystatechange = function(){
if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200)
obj.innerHTML = XMLHttpRequestObject.responseText;
XMLHttpRequestObject.send(null);
}
}
</script>
Hands on code… continued
 PHP
<?php
echo 'This text comes to you thanks to PHP.';
?>
Result?
Don’t believe it? Click here!
Ready states and status codes
Ready states
 0 Uninitialized
 1 Loading
 2 Loaded
 3 Interactive
 4 Complete
Ready states and status codes
Status codes
 1xx Informational
 2xx Successful
 3xx Redirection
 4xx Client error
 5xx Server error
Famous examples
 200 OK
 201 Created
 400 Bad Request
 401 Unauthorized
 403 Forbidden
 404 Not Found
Possibilities
 That was plain text answer from the server. It could also be a xml or json
object
 Connection with a database
 Not only Get data but also Post data
Usages
 Web forms (password strength, autocomplete searches e.t.c.)
 On-page notifications (like facebook)
 On-site Instant Messaging (every chat uses ajax)
 Collaborative tools (many people working on the same doc)
 External widgets
 and many many many many more…
XML Format
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
….
XML Parsing
x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
for (i=0;i<x.length;i++){
xx=x[i].getElementsByTagName("TITLE");{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
xx=x[i].getElementsByTagName("ARTIST");
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
txt=txt + "</tr>";
}
Drawbacks
 Bookmarking a page
 Going back on a previous page
 Difficult for a web crawler to index a page
 Now every browser support javascript and XHR
 Difficult for screen readers
What About jQuery and AJAX?
 Writing regular AJAX code can be a bit tricky
 Different browsers have different syntax for AJAX implementation
 This means that you will have to write extra code to test for different
browsers
 The jQuery team has taken care of this for us
 We can write AJAX functionality with only one single line of code
jQuery load() Method
The jQuery load() method is a simple, but powerful AJAX method. It loads data
from a server and puts the returned data into the selected element.
$(selector).load(URL,data,callback);
 The required URL parameter specifies the URL you wish to load.
 The optional data parameter specifies a set of querystring key/value pairs
to send along with the request.
 The optional callback parameter is the name of a function to be executed
after the load() method is completed.
jQuery load() Method Ex.
jQuery
$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("External content loaded successfully!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
demo_test.txt
<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>
jQuery $.get() Method
The $.get() method requests data from the server with an HTTP GET request.
$.get(URL,callback);
 The required URL parameter specifies the URL you wish to request.
 The optional callback parameter is the name of a function to be executed
if the request succeeds.
jQuery $.get() Method Ex.
jQuery
$("button").click(function(){
$.get("demo_test.php",function(data,status){
alert("Data: " + data + "nStatus: " + status);
});
});
demo_test.php
<?php
echo 'This text comes to you thanks to PHP.';
?>
jQuery $.post() Method
The $.get() method requests data from the server with an HTTP POST request.
$.post(URL,data,callback);
 The required URL parameter specifies the URL you wish to request.
 The optional data parameter specifies some data to send along with the
request.
 The optional callback parameter is the name of a function to be executed
if the request succeeds.
jQuery $.post() Method Ex.
jQuery
$("button").click(function(){
$.post("demo_test_post.asp",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("Data: " + data + "nStatus: " + status);
});
});
demo_test.asp
<%
dim fname,city
fname=Request.Form("name")
city=Request.Form("city")
Response.Write("Dear " & fname & ". ")
Response.Write("Hope you live well in " & city & ".")
%>
HTTP GET vs HTTP POST
GET POST
BACK button/Reload Harmless
Data will be re-submitted (the browser
should alert the user that the data are
about to be re-submitted)
Bookmarked Can be bookmarked Cannot be bookmarked
Cached Can be cached Not cached
History Parameters remain in browser history
Parameters are not saved in browser
history
Restrictions on data length
Yes, when sending data, the GET method
adds the data to the URL; and the length
of a URL is limited (maximum URL length is
2048 characters)
No restrictions
Restrictions on data type Only ASCII characters allowed No restrictions. Binary data is also allowed
Security
GET is less secure compared to POST
because data sent is part of the URL
Never use GET when sending passwords or
other sensitive information!
POST is a little safer than GET because the
parameters are not stored in browser
history or in web server logs
Visibility Data is visible to everyone in the URL Data is not displayed in the URL
Too easy for you?
Take a look at reverse-ajax, a.k.a. Comet.
A Web server pushes data to a browser, without the browser explicitly
requesting it.
Good luck with it…
Like it?
Kris Hadlock – Ajax for Web Application Developers
http://www.w3schools.com/jquery/
http://en.wikipedia.org/wiki/Ajax_%28programming%29
http://thesharad.files.wordpress.com/2010/10/ajax-a-beginners-guide.pdf
Bibliography

More Related Content

What's hot

VBA API for scriptDB primer
VBA API for scriptDB primerVBA API for scriptDB primer
VBA API for scriptDB primer
Bruce McPherson
 
Ajax Presentation
Ajax PresentationAjax Presentation
Ajax Presentation
alaa.moustafa
 
Ajax
AjaxAjax
Ajax
jainaman
 
Ajax.ppt
Ajax.pptAjax.ppt
AJAX
AJAXAJAX
Using script db as a deaddrop to pass data between GAS, JS and Excel
Using script db as a deaddrop to pass data between GAS, JS and ExcelUsing script db as a deaddrop to pass data between GAS, JS and Excel
Using script db as a deaddrop to pass data between GAS, JS and Excel
Bruce McPherson
 
Ajax Introduction Presentation
Ajax   Introduction   PresentationAjax   Introduction   Presentation
Ajax Introduction Presentation
thinkphp
 
Do something useful in Apps Script 5. Get your analytics pageviews to a sprea...
Do something useful in Apps Script 5. Get your analytics pageviews to a sprea...Do something useful in Apps Script 5. Get your analytics pageviews to a sprea...
Do something useful in Apps Script 5. Get your analytics pageviews to a sprea...
Bruce McPherson
 
jQuery - Chapter 5 - Ajax
jQuery - Chapter 5 -  AjaxjQuery - Chapter 5 -  Ajax
jQuery - Chapter 5 - Ajax
WebStackAcademy
 
Asynchronous JavaScript & XML (AJAX)
Asynchronous JavaScript & XML (AJAX)Asynchronous JavaScript & XML (AJAX)
Asynchronous JavaScript & XML (AJAX)
Adnan Sohail
 
Ajax Ppt 1
Ajax Ppt 1Ajax Ppt 1
Ajax Ppt 1
JayaPrakash.m
 
Do something in 5 with gas 3-simple invoicing app
Do something in 5 with gas 3-simple invoicing appDo something in 5 with gas 3-simple invoicing app
Do something in 5 with gas 3-simple invoicing app
Bruce McPherson
 
Ajax
AjaxAjax
jQuery - Chapter 4 - DOM Handling
jQuery - Chapter 4 - DOM Handling jQuery - Chapter 4 - DOM Handling
jQuery - Chapter 4 - DOM Handling
WebStackAcademy
 
React 101
React 101React 101
React 101
Casear Chu
 
Ajax and xml
Ajax and xmlAjax and xml
Ajax and xml
sawsan slii
 
Do something in 5 with gas 4- Get your analytics profiles to a spreadsheet
Do something in 5 with gas 4- Get your analytics profiles to a spreadsheetDo something in 5 with gas 4- Get your analytics profiles to a spreadsheet
Do something in 5 with gas 4- Get your analytics profiles to a spreadsheet
Bruce McPherson
 
Beyond HTML: Tools for Building Web 2.0 Apps
Beyond HTML: Tools for Building Web 2.0 AppsBeyond HTML: Tools for Building Web 2.0 Apps
Beyond HTML: Tools for Building Web 2.0 Apps
Marcos Caceres
 
KMI System
KMI SystemKMI System
Ajax ppt
Ajax pptAjax ppt

What's hot (20)

VBA API for scriptDB primer
VBA API for scriptDB primerVBA API for scriptDB primer
VBA API for scriptDB primer
 
Ajax Presentation
Ajax PresentationAjax Presentation
Ajax Presentation
 
Ajax
AjaxAjax
Ajax
 
Ajax.ppt
Ajax.pptAjax.ppt
Ajax.ppt
 
AJAX
AJAXAJAX
AJAX
 
Using script db as a deaddrop to pass data between GAS, JS and Excel
Using script db as a deaddrop to pass data between GAS, JS and ExcelUsing script db as a deaddrop to pass data between GAS, JS and Excel
Using script db as a deaddrop to pass data between GAS, JS and Excel
 
Ajax Introduction Presentation
Ajax   Introduction   PresentationAjax   Introduction   Presentation
Ajax Introduction Presentation
 
Do something useful in Apps Script 5. Get your analytics pageviews to a sprea...
Do something useful in Apps Script 5. Get your analytics pageviews to a sprea...Do something useful in Apps Script 5. Get your analytics pageviews to a sprea...
Do something useful in Apps Script 5. Get your analytics pageviews to a sprea...
 
jQuery - Chapter 5 - Ajax
jQuery - Chapter 5 -  AjaxjQuery - Chapter 5 -  Ajax
jQuery - Chapter 5 - Ajax
 
Asynchronous JavaScript & XML (AJAX)
Asynchronous JavaScript & XML (AJAX)Asynchronous JavaScript & XML (AJAX)
Asynchronous JavaScript & XML (AJAX)
 
Ajax Ppt 1
Ajax Ppt 1Ajax Ppt 1
Ajax Ppt 1
 
Do something in 5 with gas 3-simple invoicing app
Do something in 5 with gas 3-simple invoicing appDo something in 5 with gas 3-simple invoicing app
Do something in 5 with gas 3-simple invoicing app
 
Ajax
AjaxAjax
Ajax
 
jQuery - Chapter 4 - DOM Handling
jQuery - Chapter 4 - DOM Handling jQuery - Chapter 4 - DOM Handling
jQuery - Chapter 4 - DOM Handling
 
React 101
React 101React 101
React 101
 
Ajax and xml
Ajax and xmlAjax and xml
Ajax and xml
 
Do something in 5 with gas 4- Get your analytics profiles to a spreadsheet
Do something in 5 with gas 4- Get your analytics profiles to a spreadsheetDo something in 5 with gas 4- Get your analytics profiles to a spreadsheet
Do something in 5 with gas 4- Get your analytics profiles to a spreadsheet
 
Beyond HTML: Tools for Building Web 2.0 Apps
Beyond HTML: Tools for Building Web 2.0 AppsBeyond HTML: Tools for Building Web 2.0 Apps
Beyond HTML: Tools for Building Web 2.0 Apps
 
KMI System
KMI SystemKMI System
KMI System
 
Ajax ppt
Ajax pptAjax ppt
Ajax ppt
 

Similar to Ajax for dummies, and not only.

JSON and XML
JSON and XMLJSON and XML
JSON and XML
People Strategists
 
jQuery for beginners
jQuery for beginnersjQuery for beginners
jQuery for beginners
Divakar Gu
 
Ajax Fundamentals Web Applications
Ajax Fundamentals Web ApplicationsAjax Fundamentals Web Applications
Ajax Fundamentals Web Applications
dominion
 
Building Applications Using Ajax
Building Applications Using AjaxBuilding Applications Using Ajax
Building Applications Using Ajax
s_pradeep
 
J query 01.07.2013
J query 01.07.2013J query 01.07.2013
J query 01.07.2013
Rajasekharreddy Kadasani
 
J query 01.07.2013.html
J query 01.07.2013.htmlJ query 01.07.2013.html
J query 01.07.2013.html
Rajasekharreddy Kadasani
 
How to make Ajax work for you
How to make Ajax work for youHow to make Ajax work for you
How to make Ajax work for you
Simon Willison
 
Ajax Lecture Notes
Ajax Lecture NotesAjax Lecture Notes
Ajax Lecture Notes
Santhiya Grace
 
AJAX Workshop Notes
AJAX Workshop NotesAJAX Workshop Notes
AJAX Workshop Notes
Pamela Fox
 
Pascarello_Investigating JavaScript and Ajax Security
Pascarello_Investigating JavaScript and Ajax SecurityPascarello_Investigating JavaScript and Ajax Security
Pascarello_Investigating JavaScript and Ajax Security
amiable_indian
 
Ajax.ppt
Ajax.pptAjax.ppt
Ajax.ppt
ssuser9d62d6
 
JavaScript JQUERY AJAX
JavaScript JQUERY AJAXJavaScript JQUERY AJAX
JavaScript JQUERY AJAX
Makarand Bhatambarekar
 
Ajax tutorial
Ajax tutorialAjax tutorial
Ajax tutorial
Kat Roque
 
huhu
huhuhuhu
AJAX
AJAXAJAX
AJAX
AJAXAJAX
Jquery 4
Jquery 4Jquery 4
Cross Domain Web
Mashups with JQuery and Google App Engine
Cross Domain Web
Mashups with JQuery and Google App EngineCross Domain Web
Mashups with JQuery and Google App Engine
Cross Domain Web
Mashups with JQuery and Google App Engine
Andy McKay
 
JavaScript para Graficos y Visualizacion de Datos
JavaScript para Graficos y Visualizacion de DatosJavaScript para Graficos y Visualizacion de Datos
JavaScript para Graficos y Visualizacion de Datos
philogb
 
Ajax
AjaxAjax
Ajax
Yoga Raja
 

Similar to Ajax for dummies, and not only. (20)

JSON and XML
JSON and XMLJSON and XML
JSON and XML
 
jQuery for beginners
jQuery for beginnersjQuery for beginners
jQuery for beginners
 
Ajax Fundamentals Web Applications
Ajax Fundamentals Web ApplicationsAjax Fundamentals Web Applications
Ajax Fundamentals Web Applications
 
Building Applications Using Ajax
Building Applications Using AjaxBuilding Applications Using Ajax
Building Applications Using Ajax
 
J query 01.07.2013
J query 01.07.2013J query 01.07.2013
J query 01.07.2013
 
J query 01.07.2013.html
J query 01.07.2013.htmlJ query 01.07.2013.html
J query 01.07.2013.html
 
How to make Ajax work for you
How to make Ajax work for youHow to make Ajax work for you
How to make Ajax work for you
 
Ajax Lecture Notes
Ajax Lecture NotesAjax Lecture Notes
Ajax Lecture Notes
 
AJAX Workshop Notes
AJAX Workshop NotesAJAX Workshop Notes
AJAX Workshop Notes
 
Pascarello_Investigating JavaScript and Ajax Security
Pascarello_Investigating JavaScript and Ajax SecurityPascarello_Investigating JavaScript and Ajax Security
Pascarello_Investigating JavaScript and Ajax Security
 
Ajax.ppt
Ajax.pptAjax.ppt
Ajax.ppt
 
JavaScript JQUERY AJAX
JavaScript JQUERY AJAXJavaScript JQUERY AJAX
JavaScript JQUERY AJAX
 
Ajax tutorial
Ajax tutorialAjax tutorial
Ajax tutorial
 
huhu
huhuhuhu
huhu
 
AJAX
AJAXAJAX
AJAX
 
AJAX
AJAXAJAX
AJAX
 
Jquery 4
Jquery 4Jquery 4
Jquery 4
 
Cross Domain Web
Mashups with JQuery and Google App Engine
Cross Domain Web
Mashups with JQuery and Google App EngineCross Domain Web
Mashups with JQuery and Google App Engine
Cross Domain Web
Mashups with JQuery and Google App Engine
 
JavaScript para Graficos y Visualizacion de Datos
JavaScript para Graficos y Visualizacion de DatosJavaScript para Graficos y Visualizacion de Datos
JavaScript para Graficos y Visualizacion de Datos
 
Ajax
AjaxAjax
Ajax
 

More from Nerd Tzanetopoulos

Symfony2 Introduction Presentation
Symfony2 Introduction PresentationSymfony2 Introduction Presentation
Symfony2 Introduction Presentation
Nerd Tzanetopoulos
 

More from Nerd Tzanetopoulos (11)

Symfony2 Introduction Presentation
Symfony2 Introduction PresentationSymfony2 Introduction Presentation
Symfony2 Introduction Presentation
 
Symperasmata
SymperasmataSymperasmata
Symperasmata
 
Peirama2
Peirama2Peirama2
Peirama2
 
Peirama2
Peirama2Peirama2
Peirama2
 
Peirama2
Peirama2Peirama2
Peirama2
 
Genikeuseis
GenikeuseisGenikeuseis
Genikeuseis
 
Peirama
PeiramaPeirama
Peirama
 
Ypotheseis
YpotheseisYpotheseis
Ypotheseis
 
Enaysma
EnaysmaEnaysma
Enaysma
 
Ergasia Kausima
Ergasia KausimaErgasia Kausima
Ergasia Kausima
 
εργασία καύσιμα
εργασία καύσιμαεργασία καύσιμα
εργασία καύσιμα
 

Recently uploaded

QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
AlexanderRichford
 
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin..."$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
Fwdays
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
Safe Software
 
AI in the Workplace Reskilling, Upskilling, and Future Work.pptx
AI in the Workplace Reskilling, Upskilling, and Future Work.pptxAI in the Workplace Reskilling, Upskilling, and Future Work.pptx
AI in the Workplace Reskilling, Upskilling, and Future Work.pptx
Sunil Jagani
 
What is an RPA CoE? Session 2 – CoE Roles
What is an RPA CoE?  Session 2 – CoE RolesWhat is an RPA CoE?  Session 2 – CoE Roles
What is an RPA CoE? Session 2 – CoE Roles
DianaGray10
 
A Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's ArchitectureA Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's Architecture
ScyllaDB
 
GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...
GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...
GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...
GlobalLogic Ukraine
 
Lee Barnes - Path to Becoming an Effective Test Automation Engineer.pdf
Lee Barnes - Path to Becoming an Effective Test Automation Engineer.pdfLee Barnes - Path to Becoming an Effective Test Automation Engineer.pdf
Lee Barnes - Path to Becoming an Effective Test Automation Engineer.pdf
leebarnesutopia
 
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeckPoznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
FilipTomaszewski5
 
Must Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during MigrationMust Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during Migration
Mydbops
 
QA or the Highway - Component Testing: Bridging the gap between frontend appl...
QA or the Highway - Component Testing: Bridging the gap between frontend appl...QA or the Highway - Component Testing: Bridging the gap between frontend appl...
QA or the Highway - Component Testing: Bridging the gap between frontend appl...
zjhamm304
 
Discover the Unseen: Tailored Recommendation of Unwatched Content
Discover the Unseen: Tailored Recommendation of Unwatched ContentDiscover the Unseen: Tailored Recommendation of Unwatched Content
Discover the Unseen: Tailored Recommendation of Unwatched Content
ScyllaDB
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
Neo4j
 
Christine's Product Research Presentation.pptx
Christine's Product Research Presentation.pptxChristine's Product Research Presentation.pptx
Christine's Product Research Presentation.pptx
christinelarrosa
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
AstuteBusiness
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Neo4j
 
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid ResearchHarnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
Neo4j
 
ScyllaDB Tablets: Rethinking Replication
ScyllaDB Tablets: Rethinking ReplicationScyllaDB Tablets: Rethinking Replication
ScyllaDB Tablets: Rethinking Replication
ScyllaDB
 
From Natural Language to Structured Solr Queries using LLMs
From Natural Language to Structured Solr Queries using LLMsFrom Natural Language to Structured Solr Queries using LLMs
From Natural Language to Structured Solr Queries using LLMs
Sease
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
DianaGray10
 

Recently uploaded (20)

QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
 
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin..."$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
 
AI in the Workplace Reskilling, Upskilling, and Future Work.pptx
AI in the Workplace Reskilling, Upskilling, and Future Work.pptxAI in the Workplace Reskilling, Upskilling, and Future Work.pptx
AI in the Workplace Reskilling, Upskilling, and Future Work.pptx
 
What is an RPA CoE? Session 2 – CoE Roles
What is an RPA CoE?  Session 2 – CoE RolesWhat is an RPA CoE?  Session 2 – CoE Roles
What is an RPA CoE? Session 2 – CoE Roles
 
A Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's ArchitectureA Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's Architecture
 
GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...
GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...
GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...
 
Lee Barnes - Path to Becoming an Effective Test Automation Engineer.pdf
Lee Barnes - Path to Becoming an Effective Test Automation Engineer.pdfLee Barnes - Path to Becoming an Effective Test Automation Engineer.pdf
Lee Barnes - Path to Becoming an Effective Test Automation Engineer.pdf
 
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeckPoznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
 
Must Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during MigrationMust Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during Migration
 
QA or the Highway - Component Testing: Bridging the gap between frontend appl...
QA or the Highway - Component Testing: Bridging the gap between frontend appl...QA or the Highway - Component Testing: Bridging the gap between frontend appl...
QA or the Highway - Component Testing: Bridging the gap between frontend appl...
 
Discover the Unseen: Tailored Recommendation of Unwatched Content
Discover the Unseen: Tailored Recommendation of Unwatched ContentDiscover the Unseen: Tailored Recommendation of Unwatched Content
Discover the Unseen: Tailored Recommendation of Unwatched Content
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
 
Christine's Product Research Presentation.pptx
Christine's Product Research Presentation.pptxChristine's Product Research Presentation.pptx
Christine's Product Research Presentation.pptx
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
 
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid ResearchHarnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
 
ScyllaDB Tablets: Rethinking Replication
ScyllaDB Tablets: Rethinking ReplicationScyllaDB Tablets: Rethinking Replication
ScyllaDB Tablets: Rethinking Replication
 
From Natural Language to Structured Solr Queries using LLMs
From Natural Language to Structured Solr Queries using LLMsFrom Natural Language to Structured Solr Queries using LLMs
From Natural Language to Structured Solr Queries using LLMs
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
 

Ajax for dummies, and not only.

  • 1. Ajax For dummies and not only… Author: Alexios Tzanetopoulos - Developer
  • 2. So…. What is Ajax?  Ajax stands for: Asynchronous JavaScript and XML  It is a set of techniques for creating highly interactive web sites and web applications. Examples? http://www.aia.gr/traveler/flight-info/rtfi/ http://peteranswers.com/
  • 3. Main idea  The idea is to make what’s on the Web appear to be local by giving you a rich user experience, offering you features that usually only appear in desktop applications.
  • 4. Is Ajax a technology? Ajax is NOT a technology. It’s a combination of several technologies:  standards-based presentation using XHTML and CSS;  dynamic display, interaction using the Document Object Model (DOM);  data interchange and manipulation using XML and JSON;  asynchronous data retrieval using XMLHttpRequest object;  and JavaScript binding everything together.
  • 5. A little bit of History  Microsoft Outlook Web Access team implemented Ajax in 1998  Google maps and Gmail used it in 2005  James Garret wrote an article combining the techniques that google used and that’s how the term Ajax was coined (2005)  W3C released the first draft specification for the XMLHttpRequest object in an attempt to create an official web standard in 2006
  • 6. Hands on code…  HTML - CSS <H1>An Ajax example</H1> <form> <input type = "button" value = "Fetch the message“ onclick = "getData('data.php', 'targetDiv')"> </form> <div id="targetDiv"> <p>The fetched message will appear here.</p> </div>
  • 7. Hands on code… continued  Javascript – XmlHttpRequest – DOM Manipulation <script language = "javascript"> var XMLHttpRequestObject = false; if (window.XMLHttpRequest) XMLHttpRequestObject = new XMLHttpRequest(); else if (window.ActiveXObject) { XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");} function getData(dataSource, divID){ if(XMLHttpRequestObject) { var obj = document.getElementById(divID); XMLHttpRequestObject.open("GET", dataSource); XMLHttpRequestObject.onreadystatechange = function(){ if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) obj.innerHTML = XMLHttpRequestObject.responseText; XMLHttpRequestObject.send(null); } } </script>
  • 8. Hands on code… continued  PHP <?php echo 'This text comes to you thanks to PHP.'; ?>
  • 10. Ready states and status codes Ready states  0 Uninitialized  1 Loading  2 Loaded  3 Interactive  4 Complete
  • 11. Ready states and status codes Status codes  1xx Informational  2xx Successful  3xx Redirection  4xx Client error  5xx Server error Famous examples  200 OK  201 Created  400 Bad Request  401 Unauthorized  403 Forbidden  404 Not Found
  • 12. Possibilities  That was plain text answer from the server. It could also be a xml or json object  Connection with a database  Not only Get data but also Post data
  • 13. Usages  Web forms (password strength, autocomplete searches e.t.c.)  On-page notifications (like facebook)  On-site Instant Messaging (every chat uses ajax)  Collaborative tools (many people working on the same doc)  External widgets  and many many many many more…
  • 14. XML Format <CATALOG> <CD> <TITLE>Empire Burlesque</TITLE> <ARTIST>Bob Dylan</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>Columbia</COMPANY> <PRICE>10.90</PRICE> <YEAR>1985</YEAR> </CD> ….
  • 15. XML Parsing x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD"); for (i=0;i<x.length;i++){ xx=x[i].getElementsByTagName("TITLE");{ txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>"; } xx=x[i].getElementsByTagName("ARTIST"); { txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>"; } txt=txt + "</tr>"; }
  • 16. Drawbacks  Bookmarking a page  Going back on a previous page  Difficult for a web crawler to index a page  Now every browser support javascript and XHR  Difficult for screen readers
  • 17. What About jQuery and AJAX?  Writing regular AJAX code can be a bit tricky  Different browsers have different syntax for AJAX implementation  This means that you will have to write extra code to test for different browsers  The jQuery team has taken care of this for us  We can write AJAX functionality with only one single line of code
  • 18. jQuery load() Method The jQuery load() method is a simple, but powerful AJAX method. It loads data from a server and puts the returned data into the selected element. $(selector).load(URL,data,callback);  The required URL parameter specifies the URL you wish to load.  The optional data parameter specifies a set of querystring key/value pairs to send along with the request.  The optional callback parameter is the name of a function to be executed after the load() method is completed.
  • 19. jQuery load() Method Ex. jQuery $("button").click(function(){ $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){ if(statusTxt=="success") alert("External content loaded successfully!"); if(statusTxt=="error") alert("Error: "+xhr.status+": "+xhr.statusText); }); }); demo_test.txt <h2>jQuery and AJAX is FUN!!!</h2> <p id="p1">This is some text in a paragraph.</p>
  • 20. jQuery $.get() Method The $.get() method requests data from the server with an HTTP GET request. $.get(URL,callback);  The required URL parameter specifies the URL you wish to request.  The optional callback parameter is the name of a function to be executed if the request succeeds.
  • 21. jQuery $.get() Method Ex. jQuery $("button").click(function(){ $.get("demo_test.php",function(data,status){ alert("Data: " + data + "nStatus: " + status); }); }); demo_test.php <?php echo 'This text comes to you thanks to PHP.'; ?>
  • 22. jQuery $.post() Method The $.get() method requests data from the server with an HTTP POST request. $.post(URL,data,callback);  The required URL parameter specifies the URL you wish to request.  The optional data parameter specifies some data to send along with the request.  The optional callback parameter is the name of a function to be executed if the request succeeds.
  • 23. jQuery $.post() Method Ex. jQuery $("button").click(function(){ $.post("demo_test_post.asp", { name:"Donald Duck", city:"Duckburg" }, function(data,status){ alert("Data: " + data + "nStatus: " + status); }); }); demo_test.asp <% dim fname,city fname=Request.Form("name") city=Request.Form("city") Response.Write("Dear " & fname & ". ") Response.Write("Hope you live well in " & city & ".") %>
  • 24. HTTP GET vs HTTP POST GET POST BACK button/Reload Harmless Data will be re-submitted (the browser should alert the user that the data are about to be re-submitted) Bookmarked Can be bookmarked Cannot be bookmarked Cached Can be cached Not cached History Parameters remain in browser history Parameters are not saved in browser history Restrictions on data length Yes, when sending data, the GET method adds the data to the URL; and the length of a URL is limited (maximum URL length is 2048 characters) No restrictions Restrictions on data type Only ASCII characters allowed No restrictions. Binary data is also allowed Security GET is less secure compared to POST because data sent is part of the URL Never use GET when sending passwords or other sensitive information! POST is a little safer than GET because the parameters are not stored in browser history or in web server logs Visibility Data is visible to everyone in the URL Data is not displayed in the URL
  • 25. Too easy for you? Take a look at reverse-ajax, a.k.a. Comet. A Web server pushes data to a browser, without the browser explicitly requesting it. Good luck with it…
  • 26. Like it? Kris Hadlock – Ajax for Web Application Developers http://www.w3schools.com/jquery/ http://en.wikipedia.org/wiki/Ajax_%28programming%29 http://thesharad.files.wordpress.com/2010/10/ajax-a-beginners-guide.pdf Bibliography