AJAX
Before Ajax
Before AJAX anytime the the browser needed to get something from a server, it would use either a GET or POST request.
GET is non-destructive (nothing on the server is changed.
POST is destructive (data on the server is changed).
Either way, if the browser needed to change something about the site, it had to reload the entire page.
Hey, I want a website
Cool, here you go
Thanks!
Yen's Computer
Yen's Computer
Yen's Computer
Server
Server
Server
AJAX Comes Along
This was tremendously slow.
Asynchronous - The HTTP thread does not wait for the call to finish before moving on (much faster page loads).
Javascript - The language used for AJAX calls.
AND
XML - A language used to describe data that has widely been replaced by JSON, which is Javascript Object Notation.
In summary, AJAX allows the browser to get new data from the server and update the view in the browser without reloading the entire page.
Data Types in AJAX
String - AJAX can return a single string, like someones name
HTML - can return html code to change a website's structure
Script - can return javascript code
JSON - data from a database or API
JSONP - data from another server
XML - XML Schema data
Youre computer
- Create a new directory called ajax
- Create a file called calls.php
- Create a file called index.php
//calls.php
<?php
echo "Hi";
?>Async
var response;
$.get( "calls.php", function( r ) {
response = r;
});
console.log( response ); // undefined$.get( "calls.php", function( response ) {
console.log( response ); // server response
});Props and methods
$.ajax({
url: 'calls.php',
data: {id: 123, name: 'Ryan'},
type: "POST",
dataType: 'html',
success: function(html){
console.log(html);
}
});New Call
<?php
echo $_POST['name'];
?>New Index
Add Bootstrap
New Index
<html>
<head>
<script src='https://code.jquery.com/jquery-2.1.3.min.js' type='text/javascript'></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<body>
<button>Ryan</button>
<button>Yen</button>
<h1>User Info</h1>
<ul class='list-group'>
<li id='name' class='list-group-item'></li>
<li id='email' class='list-group-item'></li>
<li id='age' class='list-group-item'></li>
</ul>
</body>
<script>
$('button').click(function(){
$.ajax({
url: 'calls.php',
data: {name: $(this).text()},
type: "POST",
dataType: 'html',
success: function(html){
$('#name').text(html);
}
});
})
</script>JSON
<?php
$ryan = array('name' => 'Ryan', 'email' => 'ryork@republiccharterschools.org', 'age'=>30);
$yen = array('name' => 'Yen', 'email' => 'ynguyen@republiccharterschools.org', 'age'=>24);
if($_POST['name'] == 'Ryan'){
echo $ryan;
}
if($_POST['name'] == 'Yen'){
echo $yen;
}
?>JSON
<?php
$ryan = array('name' => 'Ryan', 'email' => 'ryork@republiccharterschools.org', 'age'=>30);
$yen = array('name' => 'Yen', 'email' => 'ynguyen@republiccharterschools.org', 'age'=>24);
if($_POST['name'] == 'Ryan'){
echo json_encode($ryan);
}
if($_POST['name'] == 'Yen'){
echo json_encode($yen);
}
?>JSON
$('button').click(function(){
$.ajax({
url: 'calls.php',
data: {name: $(this).text()},
type: "POST",
dataType: 'json',
success: function(json){
$('#name').text(json);
}
});
})
JSON
$('button').click(function(){
$.ajax({
url: 'calls.php',
data: {name: $(this).text()},
type: "POST",
dataType: 'json',
success: function(json){
$('#name').text(json.name);
$('#email').text(json.email);
$('#age').text(json.age);
}
});
})AJAX Tutorial
By Ryan York
AJAX Tutorial
- 1,075
