SlideShare una empresa de Scribd logo
1 de 13
Descargar para leer sin conexión
Haim Michael
December 20th, 2013
All logos, trade marks and brand names used in this presentation belong
to the respective owners.
You can watch the video at http://youtu.be/VYLL5xWc1Jc

AJAX
© 2013 Haim Michael

LifeMichael.com

Ajax Jump Start
●

Introduction to Ajax

●

The Synchronous Model

●

Partial Screen Update

●

The Asynchronous Model

●

Simple Ajax Demo

●

Questions & Answers

© 2013 Haim Michael

LifeMichael.com

Table of Content
●

Ajax is an umbrella term used to describe the usage of
technologies such as JavaScript, Document Object
Model (DOM) and XML in the creation of interactive
smooth web applications instead of refreshing ones
when the page changes.

© 2013 Haim Michael

LifeMichael.com

Introduction to Ajax
●

In the beginning, websites included simple HTML web pages,
that were displayed in a synchronous way.

●

Each time the user enters data and presses send he needs to
wait till he gets the respond from the server.

●

The server has no way to initiate updates. That leads to low
productivity and inefficient web applications.
© 2013 Haim Michael

LifeMichael.com

The Synchronous Model
●

Implementing ajax allows a partial screen update. Using
ajax we can update those user interface elements that
contain new information only.

© 2013 Haim Michael

LifeMichael.com

Partial Screen Update
●

Ajax introduces the concept of asynchronous web
applications model.

●

The server can either leave a notification when ready and the
client will pick it up, or alternatively, the client can poll the
server at regular intervals in order to get the updated data.
© 2013 Haim Michael

LifeMichael.com

The Asynchronous Model
●

The user can continue with using the application while
the client requests from the server continue in the
background.

●

When the required data is ready the browser will update
the related user interface parts only.

© 2013 Haim Michael

LifeMichael.com

The Asynchronous Model
<?php
function check($username)
ajaxdemo.php
{
$users = array(
'david', 'michael', 'dan', 'tamar', 'jane');
if (in_array($username, $users))
{
return "<font color='red'>username exists</font>";
}
else { return "..."; }
}
if(isset($_GET['username']))
{
echo check(trim($_GET['username']));
}
?>

PHP Jump Start

© 2013 Haim Michael

LifeMichael.com

Simple Ajax Demo
<!DOCTYPE html>
ajaxdemo.html
<head>
<title>Simple Ajax Sample</title>
<script>
Var request = new XMLHttpRequest();
function check_username(username)
{
request.abort();
request.open("GET",
"http://www.lifemichael.com/ajaxdemo.php?
username="+username, true);
request.onreadystatechange= function()
{
if (request.readyState == 4)
{
document.getElementById('msg').innerHTML =
request.responseText;
}
};
request.send(null);
}
</script>
© 2013 Haim Michael
</head>

LifeMichael.com

Simple Ajax Demo
<body>
<h1>Registration Form</h1>
<form action="somefile.php" method="get">
Username: <input name="username" type="text"
onkeyup="check_username(this.value)" />
<br>
<div id='msg'></div>
<input type="submit">
</form>
</body>
</html>
http://lifemichael.com/ajaxdemo.html

© 2013 Haim Michael

LifeMichael.com

Simple Ajax Demo
●

The readyState property defines the XmlHttpRequest
state. Its possible values include the following:
0 Uninitialized
1 Loading
2 Loaded
3 Interactive
4 Complete

© 2013 Haim Michael

LifeMichael.com

Simple Ajax Demo
© 2013 Haim Michael

LifeMichael.com

Simple Ajax Demo
●

Two courses you might find interesting include
Software Engineering in PHP
more info
Android 4.4 Java Applications Development
more info
HTML5 Cross Platform Mobile Applications
more info

●

If you enjoyed my lecture please leave me a comment
at http://speakerpedia.com/speakers/life-michael.
Thanks for your time!
Haim.
© 2013 Haim Michael

LifeMichael.com

Questions & Answers

Más contenido relacionado

La actualidad más candente

Using HTML code to add page number and its output are there..
Using HTML code to add page number and its output are there..Using HTML code to add page number and its output are there..
Using HTML code to add page number and its output are there..Praseela R
 
FreshBooks API
FreshBooks APIFreshBooks API
FreshBooks APIBoris Mann
 
Intro to java script
Intro to java scriptIntro to java script
Intro to java scriptlondiem
 
Pracitcal AJAX
Pracitcal AJAXPracitcal AJAX
Pracitcal AJAXjherr
 
AJAX the WordPress way
AJAX the WordPress wayAJAX the WordPress way
AJAX the WordPress wayJustin Foell
 
Ajax: User Experience
Ajax: User ExperienceAjax: User Experience
Ajax: User Experiencepetrov
 
Introduction to ASP.NET MVC
Introduction to ASP.NET MVC Introduction to ASP.NET MVC
Introduction to ASP.NET MVC Joe Wilson
 
Ajax ppt - 32 slides
Ajax ppt - 32 slidesAjax ppt - 32 slides
Ajax ppt - 32 slidesSmithss25
 
#IT fest 2013 - Komfort we wszechobecnym Internecie – parę słów o “responsive...
#IT fest 2013 - Komfort we wszechobecnym Internecie – parę słów o “responsive...#IT fest 2013 - Komfort we wszechobecnym Internecie – parę słów o “responsive...
#IT fest 2013 - Komfort we wszechobecnym Internecie – parę słów o “responsive...#IT fest
 
AngularJS: an introduction
AngularJS: an introductionAngularJS: an introduction
AngularJS: an introductionLuigi De Russis
 
Membangun Moderen UI dengan Vue.js
Membangun Moderen UI dengan Vue.jsMembangun Moderen UI dengan Vue.js
Membangun Moderen UI dengan Vue.jsFroyo Framework
 
Clean separation
Clean separationClean separation
Clean separationatorreno
 

La actualidad más candente (20)

Using HTML code to add page number and its output are there..
Using HTML code to add page number and its output are there..Using HTML code to add page number and its output are there..
Using HTML code to add page number and its output are there..
 
FreshBooks API
FreshBooks APIFreshBooks API
FreshBooks API
 
Ajax Presentation
Ajax PresentationAjax Presentation
Ajax Presentation
 
Ajax Ppt
Ajax PptAjax Ppt
Ajax Ppt
 
Intro to java script
Intro to java scriptIntro to java script
Intro to java script
 
Pracitcal AJAX
Pracitcal AJAXPracitcal AJAX
Pracitcal AJAX
 
AJAX the WordPress way
AJAX the WordPress wayAJAX the WordPress way
AJAX the WordPress way
 
Ajax
AjaxAjax
Ajax
 
Ajax: User Experience
Ajax: User ExperienceAjax: User Experience
Ajax: User Experience
 
Os mobile
Os mobileOs mobile
Os mobile
 
Ajax.ppt
Ajax.pptAjax.ppt
Ajax.ppt
 
Os mobile
Os mobileOs mobile
Os mobile
 
Introduction to ASP.NET MVC
Introduction to ASP.NET MVC Introduction to ASP.NET MVC
Introduction to ASP.NET MVC
 
Ajax ppt - 32 slides
Ajax ppt - 32 slidesAjax ppt - 32 slides
Ajax ppt - 32 slides
 
#IT fest 2013 - Komfort we wszechobecnym Internecie – parę słów o “responsive...
#IT fest 2013 - Komfort we wszechobecnym Internecie – parę słów o “responsive...#IT fest 2013 - Komfort we wszechobecnym Internecie – parę słów o “responsive...
#IT fest 2013 - Komfort we wszechobecnym Internecie – parę słów o “responsive...
 
Jquery Ajax
Jquery AjaxJquery Ajax
Jquery Ajax
 
AngularJS: an introduction
AngularJS: an introductionAngularJS: an introduction
AngularJS: an introduction
 
Membangun Moderen UI dengan Vue.js
Membangun Moderen UI dengan Vue.jsMembangun Moderen UI dengan Vue.js
Membangun Moderen UI dengan Vue.js
 
Ajax
AjaxAjax
Ajax
 
Clean separation
Clean separationClean separation
Clean separation
 

Similar a Ajax Jump Start

The Basics Angular JS
The Basics Angular JS The Basics Angular JS
The Basics Angular JS OrisysIndia
 
Ajax on drupal the right way - DrupalCamp Campinas, São Paulo, Brazil 2016
Ajax on drupal the right way - DrupalCamp Campinas, São Paulo, Brazil 2016Ajax on drupal the right way - DrupalCamp Campinas, São Paulo, Brazil 2016
Ajax on drupal the right way - DrupalCamp Campinas, São Paulo, Brazil 2016Nicolás Bouhid
 
Embedded UA 101 - STC Summit 2013, Scott DeLoach, ClickStart
Embedded UA 101 - STC Summit 2013, Scott DeLoach, ClickStartEmbedded UA 101 - STC Summit 2013, Scott DeLoach, ClickStart
Embedded UA 101 - STC Summit 2013, Scott DeLoach, ClickStartScott DeLoach
 
Using Ajax In Domino Web Applications
Using Ajax In Domino Web ApplicationsUsing Ajax In Domino Web Applications
Using Ajax In Domino Web Applicationsdominion
 
Ajax Testing Approach
Ajax Testing ApproachAjax Testing Approach
Ajax Testing ApproachHarshJ
 
Ajax Testing Approach
Ajax Testing ApproachAjax Testing Approach
Ajax Testing ApproachHarshaVJoshi
 
Workshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte IWorkshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte IVisual Engineering
 
Intro to WebSockets (in Java)
Intro to WebSockets (in Java)Intro to WebSockets (in Java)
Intro to WebSockets (in Java)osintegrators
 
[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web Design[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
CIRCUIT 2015 - Responsive Websites & Grid-Based Layouts
CIRCUIT 2015 - Responsive Websites & Grid-Based LayoutsCIRCUIT 2015 - Responsive Websites & Grid-Based Layouts
CIRCUIT 2015 - Responsive Websites & Grid-Based LayoutsICF CIRCUIT
 
Responsive Websites and Grid-Based Layouts by Gabriel Walt
Responsive Websites and Grid-Based Layouts by Gabriel Walt Responsive Websites and Grid-Based Layouts by Gabriel Walt
Responsive Websites and Grid-Based Layouts by Gabriel Walt AEM HUB
 
AngularJS in 60ish Minutes
AngularJS in 60ish MinutesAngularJS in 60ish Minutes
AngularJS in 60ish MinutesDan Wahlin
 
Angular data binding by Soft Solutions4U
Angular data binding by Soft Solutions4UAngular data binding by Soft Solutions4U
Angular data binding by Soft Solutions4Usharsen
 
Angular Js Get Started - Complete Course
Angular Js Get Started - Complete CourseAngular Js Get Started - Complete Course
Angular Js Get Started - Complete CourseEPAM Systems
 

Similar a Ajax Jump Start (20)

The Basics Angular JS
The Basics Angular JS The Basics Angular JS
The Basics Angular JS
 
Ajax on drupal the right way - DrupalCamp Campinas, São Paulo, Brazil 2016
Ajax on drupal the right way - DrupalCamp Campinas, São Paulo, Brazil 2016Ajax on drupal the right way - DrupalCamp Campinas, São Paulo, Brazil 2016
Ajax on drupal the right way - DrupalCamp Campinas, São Paulo, Brazil 2016
 
Ajax and Jquery
Ajax and JqueryAjax and Jquery
Ajax and Jquery
 
Embedded UA 101 - STC Summit 2013, Scott DeLoach, ClickStart
Embedded UA 101 - STC Summit 2013, Scott DeLoach, ClickStartEmbedded UA 101 - STC Summit 2013, Scott DeLoach, ClickStart
Embedded UA 101 - STC Summit 2013, Scott DeLoach, ClickStart
 
Using Ajax In Domino Web Applications
Using Ajax In Domino Web ApplicationsUsing Ajax In Domino Web Applications
Using Ajax In Domino Web Applications
 
Ajax
AjaxAjax
Ajax
 
Introduction to Angular Js
Introduction to Angular JsIntroduction to Angular Js
Introduction to Angular Js
 
Ajax Testing Approach
Ajax Testing ApproachAjax Testing Approach
Ajax Testing Approach
 
Ajax Testing Approach
Ajax Testing ApproachAjax Testing Approach
Ajax Testing Approach
 
Workshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte IWorkshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte I
 
Intro to WebSockets (in Java)
Intro to WebSockets (in Java)Intro to WebSockets (in Java)
Intro to WebSockets (in Java)
 
[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web Design[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web Design
 
CIRCUIT 2015 - Responsive Websites & Grid-Based Layouts
CIRCUIT 2015 - Responsive Websites & Grid-Based LayoutsCIRCUIT 2015 - Responsive Websites & Grid-Based Layouts
CIRCUIT 2015 - Responsive Websites & Grid-Based Layouts
 
AEM responsive
AEM responsiveAEM responsive
AEM responsive
 
Responsive Websites and Grid-Based Layouts by Gabriel Walt
Responsive Websites and Grid-Based Layouts by Gabriel Walt Responsive Websites and Grid-Based Layouts by Gabriel Walt
Responsive Websites and Grid-Based Layouts by Gabriel Walt
 
Ajax
Ajax Ajax
Ajax
 
AngularJS in 60ish Minutes
AngularJS in 60ish MinutesAngularJS in 60ish Minutes
AngularJS in 60ish Minutes
 
Angular data binding by Soft Solutions4U
Angular data binding by Soft Solutions4UAngular data binding by Soft Solutions4U
Angular data binding by Soft Solutions4U
 
Mean stack Magics
Mean stack MagicsMean stack Magics
Mean stack Magics
 
Angular Js Get Started - Complete Course
Angular Js Get Started - Complete CourseAngular Js Get Started - Complete Course
Angular Js Get Started - Complete Course
 

Más de Haim Michael

Virtual Threads in Java
Virtual Threads in JavaVirtual Threads in Java
Virtual Threads in JavaHaim Michael
 
MongoDB Design Patterns
MongoDB Design PatternsMongoDB Design Patterns
MongoDB Design PatternsHaim Michael
 
Introduction to SQL Injections
Introduction to SQL InjectionsIntroduction to SQL Injections
Introduction to SQL InjectionsHaim Michael
 
Record Classes in Java
Record Classes in JavaRecord Classes in Java
Record Classes in JavaHaim Michael
 
Microservices Design Patterns
Microservices Design PatternsMicroservices Design Patterns
Microservices Design PatternsHaim Michael
 
Structural Pattern Matching in Python
Structural Pattern Matching in PythonStructural Pattern Matching in Python
Structural Pattern Matching in PythonHaim Michael
 
Unit Testing in Python
Unit Testing in PythonUnit Testing in Python
Unit Testing in PythonHaim Michael
 
OOP Best Practices in JavaScript
OOP Best Practices in JavaScriptOOP Best Practices in JavaScript
OOP Best Practices in JavaScriptHaim Michael
 
JavaScript Jump Start 20220214
JavaScript Jump Start 20220214JavaScript Jump Start 20220214
JavaScript Jump Start 20220214Haim Michael
 
Bootstrap Jump Start
Bootstrap Jump StartBootstrap Jump Start
Bootstrap Jump StartHaim Michael
 
What is new in PHP
What is new in PHPWhat is new in PHP
What is new in PHPHaim Michael
 
What is new in Python 3.9
What is new in Python 3.9What is new in Python 3.9
What is new in Python 3.9Haim Michael
 
Programming in Python on Steroid
Programming in Python on SteroidProgramming in Python on Steroid
Programming in Python on SteroidHaim Michael
 
The matplotlib Library
The matplotlib LibraryThe matplotlib Library
The matplotlib LibraryHaim Michael
 
Pandas meetup 20200908
Pandas meetup 20200908Pandas meetup 20200908
Pandas meetup 20200908Haim Michael
 
The num py_library_20200818
The num py_library_20200818The num py_library_20200818
The num py_library_20200818Haim Michael
 
Jupyter notebook 20200728
Jupyter notebook 20200728Jupyter notebook 20200728
Jupyter notebook 20200728Haim Michael
 
Node.js Crash Course (Jump Start)
Node.js Crash Course (Jump Start) Node.js Crash Course (Jump Start)
Node.js Crash Course (Jump Start) Haim Michael
 

Más de Haim Michael (20)

Anti Patterns
Anti PatternsAnti Patterns
Anti Patterns
 
Virtual Threads in Java
Virtual Threads in JavaVirtual Threads in Java
Virtual Threads in Java
 
MongoDB Design Patterns
MongoDB Design PatternsMongoDB Design Patterns
MongoDB Design Patterns
 
Introduction to SQL Injections
Introduction to SQL InjectionsIntroduction to SQL Injections
Introduction to SQL Injections
 
Record Classes in Java
Record Classes in JavaRecord Classes in Java
Record Classes in Java
 
Microservices Design Patterns
Microservices Design PatternsMicroservices Design Patterns
Microservices Design Patterns
 
Structural Pattern Matching in Python
Structural Pattern Matching in PythonStructural Pattern Matching in Python
Structural Pattern Matching in Python
 
Unit Testing in Python
Unit Testing in PythonUnit Testing in Python
Unit Testing in Python
 
OOP Best Practices in JavaScript
OOP Best Practices in JavaScriptOOP Best Practices in JavaScript
OOP Best Practices in JavaScript
 
Java Jump Start
Java Jump StartJava Jump Start
Java Jump Start
 
JavaScript Jump Start 20220214
JavaScript Jump Start 20220214JavaScript Jump Start 20220214
JavaScript Jump Start 20220214
 
Bootstrap Jump Start
Bootstrap Jump StartBootstrap Jump Start
Bootstrap Jump Start
 
What is new in PHP
What is new in PHPWhat is new in PHP
What is new in PHP
 
What is new in Python 3.9
What is new in Python 3.9What is new in Python 3.9
What is new in Python 3.9
 
Programming in Python on Steroid
Programming in Python on SteroidProgramming in Python on Steroid
Programming in Python on Steroid
 
The matplotlib Library
The matplotlib LibraryThe matplotlib Library
The matplotlib Library
 
Pandas meetup 20200908
Pandas meetup 20200908Pandas meetup 20200908
Pandas meetup 20200908
 
The num py_library_20200818
The num py_library_20200818The num py_library_20200818
The num py_library_20200818
 
Jupyter notebook 20200728
Jupyter notebook 20200728Jupyter notebook 20200728
Jupyter notebook 20200728
 
Node.js Crash Course (Jump Start)
Node.js Crash Course (Jump Start) Node.js Crash Course (Jump Start)
Node.js Crash Course (Jump Start)
 

Último

Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxRustici Software
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Victor Rentea
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodJuan lago vázquez
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingEdi Saputra
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Bhuvaneswari Subramani
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWERMadyBayot
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDropbox
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyKhushali Kathiriya
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdfSandro Moreira
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusZilliz
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...DianaGray10
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAndrey Devyatkin
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesrafiqahmad00786416
 
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelMcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelDeepika Singh
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxRemote DBA Services
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobeapidays
 

Último (20)

Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelMcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptx
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 

Ajax Jump Start

  • 1. Haim Michael December 20th, 2013 All logos, trade marks and brand names used in this presentation belong to the respective owners. You can watch the video at http://youtu.be/VYLL5xWc1Jc AJAX © 2013 Haim Michael LifeMichael.com Ajax Jump Start
  • 2. ● Introduction to Ajax ● The Synchronous Model ● Partial Screen Update ● The Asynchronous Model ● Simple Ajax Demo ● Questions & Answers © 2013 Haim Michael LifeMichael.com Table of Content
  • 3. ● Ajax is an umbrella term used to describe the usage of technologies such as JavaScript, Document Object Model (DOM) and XML in the creation of interactive smooth web applications instead of refreshing ones when the page changes. © 2013 Haim Michael LifeMichael.com Introduction to Ajax
  • 4. ● In the beginning, websites included simple HTML web pages, that were displayed in a synchronous way. ● Each time the user enters data and presses send he needs to wait till he gets the respond from the server. ● The server has no way to initiate updates. That leads to low productivity and inefficient web applications. © 2013 Haim Michael LifeMichael.com The Synchronous Model
  • 5. ● Implementing ajax allows a partial screen update. Using ajax we can update those user interface elements that contain new information only. © 2013 Haim Michael LifeMichael.com Partial Screen Update
  • 6. ● Ajax introduces the concept of asynchronous web applications model. ● The server can either leave a notification when ready and the client will pick it up, or alternatively, the client can poll the server at regular intervals in order to get the updated data. © 2013 Haim Michael LifeMichael.com The Asynchronous Model
  • 7. ● The user can continue with using the application while the client requests from the server continue in the background. ● When the required data is ready the browser will update the related user interface parts only. © 2013 Haim Michael LifeMichael.com The Asynchronous Model
  • 8. <?php function check($username) ajaxdemo.php { $users = array( 'david', 'michael', 'dan', 'tamar', 'jane'); if (in_array($username, $users)) { return "<font color='red'>username exists</font>"; } else { return "..."; } } if(isset($_GET['username'])) { echo check(trim($_GET['username'])); } ?> PHP Jump Start © 2013 Haim Michael LifeMichael.com Simple Ajax Demo
  • 9. <!DOCTYPE html> ajaxdemo.html <head> <title>Simple Ajax Sample</title> <script> Var request = new XMLHttpRequest(); function check_username(username) { request.abort(); request.open("GET", "http://www.lifemichael.com/ajaxdemo.php? username="+username, true); request.onreadystatechange= function() { if (request.readyState == 4) { document.getElementById('msg').innerHTML = request.responseText; } }; request.send(null); } </script> © 2013 Haim Michael </head> LifeMichael.com Simple Ajax Demo
  • 10. <body> <h1>Registration Form</h1> <form action="somefile.php" method="get"> Username: <input name="username" type="text" onkeyup="check_username(this.value)" /> <br> <div id='msg'></div> <input type="submit"> </form> </body> </html> http://lifemichael.com/ajaxdemo.html © 2013 Haim Michael LifeMichael.com Simple Ajax Demo
  • 11. ● The readyState property defines the XmlHttpRequest state. Its possible values include the following: 0 Uninitialized 1 Loading 2 Loaded 3 Interactive 4 Complete © 2013 Haim Michael LifeMichael.com Simple Ajax Demo
  • 12. © 2013 Haim Michael LifeMichael.com Simple Ajax Demo
  • 13. ● Two courses you might find interesting include Software Engineering in PHP more info Android 4.4 Java Applications Development more info HTML5 Cross Platform Mobile Applications more info ● If you enjoyed my lecture please leave me a comment at http://speakerpedia.com/speakers/life-michael. Thanks for your time! Haim. © 2013 Haim Michael LifeMichael.com Questions & Answers