Embed Size (px)
DESCRIPTION
This presentation will help you understand basics of AJAX.
Citation preview
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
101Agenda:
AJ
A
X
101
AJ
A
X
synchronous101
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
AJ
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
AJ
A
X
synchronous
avascript
and
101
AJ
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.onreadystatechange0 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 methodReceiving 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 QueryStringhttp://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();
101xhr.onreadystatechange = function () {
if (xhr.readyState === 4){
// Where the magic happens
}
}
xhr.open(‘GET’, ‘data/employees.json’);
xhr.send();
101
demo basic ajax
101
ResponseReply to AJAX requests
101
request
response
Browser Server
101
Simple text responseplain text or HTML
101
Request a static file
101
Lots of dataand how to handle it
101
Structured data formatXML & JSON
101
XMLTags 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
JSONJavaScript Object Notation
101
JSONArray notation
101
101
[‘string’,2, true, [1,2,3,4]]
101
JSONObject notation
101
{"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]}
http://jsonlint.com/
101
ParsingConvert 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
JSONPJSON 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 SharingAccess-Control-Allow-Origin
101
jQueryhttp://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
Thank you
