5.8 KiB

Raw Permalink Blame History

Javascript - AJAX

Lesson Objectives

Explain AJAX
Demonstrate jQuery AJAX
Explain promises
Explain creating your own promises

Explain AJAX

stands for Asynchronous JavaScript and XML
No longer uses XML. Uses JSON
The browser, using JavaScript makes a request without reloading current page
- normally, the user makes a request by clicking a link/typing in a URL

Demonstrate jQuery AJAX

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			$.ajax({
				url:'http://www.omdbapi.com/',
				method: "GET",
				data: { s: "star wars" }, //data that gets passed to server
				success: function(data, status, jqXHR){ //success callback
					console.log(data); //just dumps data to console, but you can do more here
				},
				error: function(jqXHR, status, error){ //error callback.  Gets called on situations like trying to hit a url that doesn't exist
					console.log('bad');
				}
			});
		</script>
	</body>
</html>

Explain promises

a way to organize your code better
no added functionality, just easier to read
$.ajax(...) returns a promise object
- this object has functions on it for when the ajax completes, depending on state
  - done (successfully completes)
  - fail (error encountered)
  - always (either error or success)
- pass in a callback function to be executed when the various situations arise

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			const promise = $.ajax({ //promise gets returned.
				url:'http://www.omdbapi.com/',
				method: "GET",
				data: { s: "star wars" }
				// no properties inside this object for success, error
			});
			promise.done(function(data){ //instead the callbacks are defined here
				console.log(data);
			});
			promise.fail(function(data){ //and here
				console.log('fail!');
			});
			promise.always(function(data){ //this will always run whether on success or failure
				console.log('always!');
			});
		</script>
	</body>
</html>

the done(), fail(), and always() functions return the same promise object
- you can use this returned promise object to chain your callbacks onto each other
done can contain multiple callbacks

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			$.ajax({
				url:'http://www.omdbapi.com/',
				method: "GET",
				data: { s: "star wars" }
			})
			.done(function(data){ //using some fancy chaining here
				console.log(data);
			}, function(data){ //a second callback is executed on success after the one above
				console.log('another done');
			})
			.fail(function(data){
				console.log('fail!');
			})
			.always(function(data){
				console.log('always!');
			});
		</script>
	</body>
</html>

use .then() as a shorthand function which takes two function callbacks as parameters
- 1st param is the success callback
- 2nd param is the error callback

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			$.ajax({
				url:'http://www.omdasdfbapi.com/',
				method: "GET",
				data: { s: "star wars" }
			})
			.then(function(data){ //success function here
				console.log(data);
			}, function(data){ //error function here
				console.log('fail!');
			});
		</script>
	</body>
</html>

Explain creating your own promises

$.Deferred(); returns a deferred object
- a deferred object can create a promise
- it can also successfully resolve that promise or have it error out
you can then resolve() or reject() these promises whenever you want
use $.when to test when multiple promises are resolved
- success when all succeed
- failure when one or more fail
- could do this using nested promises

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			const deferred = $.Deferred(); //deferred is kind of like a factory that generates promises
			const promise = deferred.promise(); //creating a promise here
			setTimeout(function(){ //create a timeout, then resolve the promise after one second
				deferred.resolve("first promise"); //use the deferred object to have the promise succeed
			}, 1000);

			const deferred2 = $.Deferred(); //creating a second "promise factory".  Each deferred object can create/resolve only one promise
			const promise2 = deferred2.promise(); // creating a second promise
			setTimeout(function(){ //making this promise error out after 5 seconds
				deferred2.reject("second promise");
			}, 5000);

			promise.fail(function(value) { //first promise callbacks defined here
				console.log('fail first: ' + value);
			}).always(function(value){
				console.log('always first: ' + value);
			}).done(function(value){
				console.log('done first: ' + value);
			});

			$.when(promise, promise2) //these callbacks are invoked once both promise1 and promise2 return
			.done(function(value1, value2){ //success of both
				console.log('done both: ' + value1 + ", " + value2);
			}, function(value1, value2){ //an optional second success callback
				console.log('2nd done both: ' + value1 + ", " + value2);
			})
			.then(function(value1, value2){ //using a then to create success and error callbacks together
				console.log('then both success: ' + value1 + ", " + value2);
			}, function(value1, value2){
				console.log('then one/both fail: ' + value1 + ", " + value2);
			})
		</script>
	</body>
</html>

5.8 KiB Raw Permalink Blame History

Javascript - AJAX

Lesson Objectives

Explain AJAX

Demonstrate jQuery AJAX

Explain promises

Explain creating your own promises

5.8 KiB

Raw Permalink Blame History