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
86
AJAX 101
Hernán Garzón
September 19, 2014
Tweet
Share
Other Decks in Programming
See All in Programming
PsySHから紐解くREPLの仕組み
muno92
PRO
1
540
コンテナでLambdaをデプロイするときに知っておきたかったこと
_takahash
0
170
Fluent UI Blazor 5 (alpha)の紹介
tomokusaba
0
170
エンジニア未経験が最短で戦力になるためのTips
gokana
0
260
英語文法から学ぶ、クリーンな設計の秘訣
newnomad
1
290
Being an ethical software engineer
xgouchet
PRO
0
200
サービスクラスのありがたみを発見したときの思い出 #phpcon_odawara
77web
4
590
アーキテクトと美学 / Architecture and Aesthetics
nrslib
12
3.3k
AtCoder Heuristic First-step Vol.1 講義スライド
terryu16
3
1.1k
MCP世界への招待: AIエンジニアが創る次世代エージェント連携の世界
gunta
4
860
Agentic Applications with Symfony
el_stoffel
2
230
Denoでフロントエンド開発 2025年春版 / Frontend Development with Deno (Spring 2025)
petamoriken
1
1.3k
Featured
See All Featured
Docker and Python
trallard
44
3.3k
Adopting Sorbet at Scale
ufuk
75
9.3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
118
51k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
135
33k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
The Cost Of JavaScript in 2023
addyosmani
48
7.6k
The Invisible Side of Design
smashingmag
299
50k
4 Signs Your Business is Dying
shpigford
183
22k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
It's Worth the Effort
3n
184
28k
Bash Introduction
62gerente
611
210k
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