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
生成AI時代のコンポーネントライブラリの作り方
touyou
1
220
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
220
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
10
5.3k
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
340
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
220
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
190
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
260
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
220
PicoRuby on Rails
makicamel
2
130
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
770
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Visualization
eitanlees
146
16k
We Have a Design System, Now What?
morganepeng
53
7.7k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
The Invisible Side of Design
smashingmag
301
51k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Designing for Performance
lara
610
69k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Typedesign – Prime Four
hannesfritz
42
2.7k
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