Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
AJAX 101
Search
Hernán Garzón
September 19, 2014
Programming
3
91
AJAX 101
Hernán Garzón
September 19, 2014
Tweet
Share
Other Decks in Programming
See All in Programming
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
900
Team operations that are not burdened by SRE
kazatohiei
1
310
XP, Testing and ninja testing
m_seki
3
250
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
140
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
150
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
260
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1k
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
100
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
1
150
Porting a visionOS App to Android XR
akkeylab
0
460
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
780
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
250
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Making Projects Easy
brettharned
116
6.3k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
Into the Great Unknown - MozCon
thekraken
40
1.9k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
300
GraphQLとの向き合い方2022年版
quramy
49
14k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Transcript
101 Hernán Garzón de la Roza @chertopjanov
- AJAX basic concepts - HTTP methods GET / POST
/ PUT / OTHERS - TEXT / XML / JSON - From the server to Javascript: Parsing the response - jQuery and AJAX 101 Agenda:
None
A J A X 101
A J A X synchronous 101
101 Synchronous call
101 Browser Server Time
101 Browser Server User action User action User action Time
Server processing Server processing
101 Asynchronous call
101 Server Browser user action Ajax engine Server processing
101 Browser Server User action Response Time Server processing Ajax
engine
101 Browser Server User action Response Time Server processing Ajax
engine
A J A X synchronous avascript 101
101
XMLHttpRequest (XHR) Object 101
101 - Attributes - readyState - responseText - status -
statusText - Events - onreadystatechange - onload - onloadstart - on progress - Methods - open - send - abort
Compatibility and support 101
A J A X synchronous avascript and 101
A J A X synchronous avascript and ml 101
101 How AJAX works step by step
101 Create an XMLHttpRequest object var req = new XMLHttpRequest();
101 Create a callback function xhr.onreadystatechange = function () {
// runs every time there is a change in the event. }
101 xhr.onreadystatechange 0 1 2 3 4 >> readyState
101 Create a callback function xhr.onreadystatechange = function () {
if (xhr.readyState === 4){...} }
101 Open a request xhr.open(‘GET’, ‘sidebar.html’);
101 open(httpMethod, url, boolean)
101 HTTP GET method Receiving or getting information from a
server https://developer.mozilla.org/en-US/docs/Web/HTTP#HTTP_request_methods
101 Static and dynamic information https://developer.mozilla.org/en-US/docs/Web/HTTP#HTTP_request_methods HTTP GET method
101 Dynamic QueryString http://www.website.com/employee.php?lastName=perez http://www.url-encode-decode.com/
101 Sending information that’s gonna be saved https://developer.mozilla.org/en-US/docs/Web/HTTP#HTTP_request_methods HTTP POST
method
101 Puts a file or resource at a specific URI,
and exactly at that URI. https://developer.mozilla.org/en-US/docs/Web/HTTP#HTTP_request_methods HTTP PUT method
101 Send the request xhr.send();
101 xhr.onreadystatechange = function () { if (xhr.readyState === 4){
// Where the magic happens } } xhr.open(‘GET’, ‘data/employees.json’); xhr.send();
101 demo basic ajax
101 Response Reply to AJAX requests
101 request response Browser Server
101 Simple text response plain text or HTML
101 Request a static file
101 Lots of data and how to handle it
101 Structured data format XML & JSON
101 XML Tags to structure data
101 <xml> <employees> <employee> <firstName>John</firstName> <lastName>Doe</lastName> </employee> <employee> <firstName>Anna</firstName> <lastName>Smith</lastName>
</employee> <employee> <firstName>Peter</firstName> <lastName>Jones</lastName> </employee> </employees> </xml>
101 JSON JavaScript Object Notation
101 JSON Array notation
101
101 [‘string’,2, true, [1,2,3,4]]
101 JSON Object notation
101 {"employees":[ {"firstName":"John", "lastName":"Doe"}, {"firstName":"Anna", "lastName":"Smith"}, {"firstName":"Peter", "lastName":"Jones"} ]} http://jsonlint.com/
101 Parsing Convert plain text into javascript
101 demo parsing
101 Limits
101 Web Browser same origin policy http://en.wikipedia.org/wiki/Same_origin_policy
101
101 http://www.myserver.com http://www.myserver.com/ajax.html Browser Server
101
101 http://www.myserver.com http://www.anotherwebsite.com Browser Server
101 http://www.myserver.com https://www.myserver.com/8888 Browser Server
101 http://www.myserver.com https://www.db.myserver.com/ Browser Server
101 JSONP JSON with padding
101 http://www.myserver.com/home Browser https://www.myserver.com/ Server
101 http://www.myserver.com/home https://www.anotherserver.com/ Browser Server https://www.myserver.com/ Server
101 http://www.myserver.com/home https://www.anotherserver.com/ Browser Server https://www.myserver.com/ Server <script src=”http://anotherserver.com/jsFile.js”></script>
101 Cross-Origin Resource Sharing Access-Control-Allow-Origin
101 jQuery http://api.jquery.com/category/ajax/shorthand-methods/
101 Load the jQuery library CDN <script src=”http://code.jquery.com/jquery-1.11.9.min.js”></script>
101 $.get();
101 $.post();
101 $.getJson();
101 demo $.load();
101 $.ajax(url, settings); http://librojquery.com/#opciones-del-método-.ajax http://api.jquery.com/jquery.ajax/
101 $.ajax(url, settings); var url = $(this).attr(‘action’);
101 $.ajax(url, settings); $.ajax(url, { data: formData, type: ‘POST’, success:
function(response){ $(‘signup’).html(‘<p>Thank you!</p>’) } });
101 var url = $(this).attr(‘action’); $.ajax(url, { data: formData, type:
‘POST’, success: function(response){ $(‘signup’).html(‘<p>Thank you!</p>’) } });
101 $.post vs $.ajax
101 <h1>Sign up for our newsletter:</h1> <div id=”signup”> <form method=”post”
action=”/signup”> <label for=”userName”>Nombre:</label> <input type=”text” name=”userName” id=”userName”> <label for=”email”>Email:</label> <input type=”email” name=”email” id=”email”> <label for=”submit”></label> <input type=”submit” value=”signUp!” id=”sumbit”> </form> </div>
101 $(‘form’).submit(function(evt) { evt.preventDefault(); var url = $(this).attr(“action”); var formData
= $(this).serialize(); $.post(url,formData,function(response){ $(‘#signup’).html(‘<p>thanks for signing up!</p>’); }); // end post }); // end submit
101 $(‘form’).submit(function(evt) { evt.preventDefault(); var url = $(this).attr(“action”); var formData
= $(this).serialize(); $.ajax({ url: url, data: formData, type: “POST”, success: function(response){ $(‘#signup’).html(‘<p>thanks for signing up!</p>’) }); )}; // end post }); // end sumbit
None
Thank you