Ajax basics

101
Hernán Garzón de la Roza
@chertopjanov

Agenda: 101
- AJAX basic concepts
- HTTP methods GET / POST / PUT / OTHERS
- TEXT / XML / JSON
- From the server to Javascript: Parsing the response
- jQuery and AJAX

101
Browser
Server
User action User action User action
Time
Server
processing
Server
processing

101
user action
Browser
Ajax engine
Server
Server processing

101
Browser
Server
User action
Response
Time
Server
processing
Ajax engine

A
J
A
X
synchronous
avascript
101

XMLHttpRequest (XHR) Object
101

101
- Attributes
- readyState
- responseText
- status
- statusText
- Events
- Methods
- onreadystatechange
- onload
- onloadstart
- on progress
- 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
HTTP GET method
Static and dynamic information

101
Dynamic QueryString
http://www.website.com/employee.php?lastName=perez
http://www.url-encode-decode.com/

101
HTTP POST method
Sending information that’s gonna be saved

101
HTTP PUT method
Puts a file or resource at a specific URI, and exactly at that URI.

101
Send the request
xhr.send();

xhr.onreadystatechange = function () { 101
if (xhr.readyState === 4){
// Where the magic happens
}
}
xhr.open(‘GET’, ‘data/employees.json’);
xhr.send();

101
Response
Reply to AJAX requests

101
request
Browser Server
response

101
Simple text response
plain text or HTML

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
[‘string’,2, true, [1,2,3,4]]

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
Web Browser same origin policy
http://en.wikipedia.org/wiki/Same_origin_policy

101
http://www.myserver.com http://www.myserver.com/ajax.html
Browser Server

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
https://www.myserver.com/
Server
http://www.myserver.com/home
Browser

101
https://www.anotherserver.com/
Browser
Server
Server

101
https://www.anotherserver.com/
Browser
Server
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
$.ajax(url, settings);
http://librojquery.com/#opciones-del-método-.ajax
http://api.jquery.com/jquery.ajax/

101
var url = $(this).attr(‘action’);

101
$.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’,
$(‘signup’).html(‘<p>Thank you!</p>’)
}
});

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”,
$(‘#signup’).html(‘<p>thanks for signing
up!</p>’)
});
)}; // end post
}); // end sumbit

Ajax basics

More Related Content

What's hot (20)

Viewers also liked (11)

Similar to Ajax basics (20)

Recently uploaded (20)

Ajax basics

Editor's Notes