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
83
AJAX 101
Hernán Garzón
September 19, 2014
Tweet
Share
Other Decks in Programming
See All in Programming
プロンプトエンジニアリング入門
tomokusaba
2
990
15分間でふんわり理解するDocker @ Matsuriba MAX
ukwhatn
PRO
1
340
Creating Retro-Style Photos Using Swift
ski
1
370
The Future of C++ Interoperability: Insights from Porting a Game to Swift
teamhimeh
0
290
脱・初心者!脱・マネコン!AWS CDKを使ってみませんか!?
har1101
0
180
どうしてこうなった命名集 ~🔥編~ / OOC 2024 LT
pictiny
4
2.9k
複雑なドメインを扱うプロダクトの探索フェーズではいつどのようにテストをするのか / How to testing during exploratory phase
boykush
2
150
ここ1~2年くらいで 使えるようになった(主要ブラウザーの最新版 がすべて対応した ) ウェブの新機能について ランダムに喋る!
myzkyy
9
6.5k
Material 3で Material 2ぽい見た目にする
numeroanddev
2
250
Deno に Web 標準 API を実装する / Implementing Web Standard API to Deno
petamoriken
0
350
オブジェクト指向コードレビューの新しいアプローチ
akkie76
3
1.6k
Why 1 + 1 = 2 in Swift?
1plus4
1
250
Featured
See All Featured
Designing Experiences People Love
moore
135
23k
Fontdeck: Realign not Redesign
paulrobertlloyd
75
4.8k
Fireside Chat
paigeccino
19
2.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
225
51k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
153
14k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
240
1.2M
Designing for Performance
lara
601
67k
Agile that works and the tools we love
rasmusluckow
323
20k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
111
35k
The MySQL Ecosystem @ GitHub 2015
samlambert
242
12k
We Have a Design System, Now What?
morganepeng
42
6.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