You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
192 lines
5.8 KiB
192 lines
5.8 KiB
# Javascript - AJAX
|
|
|
|
## Lesson Objectives
|
|
1. Explain AJAX
|
|
1. Demonstrate jQuery AJAX
|
|
1. Explain promises
|
|
1. 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
|
|
```html
|
|
<!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
|
|
|
|
```html
|
|
<!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
|
|
```html
|
|
<!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
|
|
```html
|
|
<!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
|
|
```html
|
|
<!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>
|
|
```
|