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

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);
	}

});	
})