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
カラム追加で増えるActiveRecordのメモリサイズ イメージできますか?
asayamakk
4
1.6k
Android 15 でアクションバー表示時にステータスバーが白くなってしまう問題
tonionagauzzi
0
140
OpenTelemetryでRailsのパフォーマンス分析を始めてみよう(KoR2024)
ymtdzzz
4
1.6k
推し活の ハイトラフィックに立ち向かう Railsとアーキテクチャ - Kaigi on Rails 2024
falcon8823
6
2.2k
外部システム連携先が10を超えるシステムでのアーキテクチャ設計・実装事例
kiwasaki
1
230
開発効率向上のためのリファクタリングの一歩目の選択肢 ~コード分割~ / JJUG CCC 2024 Fall
ryounasso
0
370
Kotlin2でdataクラスの copyメソッドを禁止する/Data class copy function to have the same visibility as constructor
eichisanden
1
140
Kubernetes for Data Engineers: Building Scalable, Reliable Data Pipelines
sucitw
1
200
Sidekiqで実現する 長時間非同期処理の中断と再開 / Pausing and Resuming Long-Running Asynchronous Jobs with Sidekiq
hypermkt
6
2.7k
讓數據說話:用 Python、Prometheus 和 Grafana 講故事
eddie
0
350
Golang と Erlang
taiyow
8
1.9k
Pinia Colada が実現するスマートな非同期処理
naokihaba
2
160
Featured
See All Featured
The Language of Interfaces
destraynor
154
24k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.8k
Making the Leap to Tech Lead
cromwellryan
132
8.9k
How to Think Like a Performance Engineer
csswizardry
19
1.1k
Ruby is Unlike a Banana
tanoku
96
11k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Agile that works and the tools we love
rasmusluckow
327
21k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
107
49k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
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