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.
3.7 KiB
3.7 KiB
Javascript - AJAX
Lesson Objectives
- Explain AJAX
- Demonstrate jQuery AJAX
- Explain promises
- Explain Cross Site AJAX
- Explain JSONP
- Explain CORS
Explain AJAX
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>
hi
<script type="text/javascript">
$(function(){
$.ajax({
url:'http://www.omdbapi.com/',
method: "GET",
data: { s: "star wars" },
success: function(data, status, jqXHR){
console.log(data);
},
error: function(jqXHR, status, error){
console.log('bad');
}
});
});
</script>
</body>
</html>
Explain promises
<!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">
$(function(){
var promise = $.ajax({
url:'http://www.omdbapi.com/',
method: "GET",
data: { s: "star wars" }
});
promise.done(function(data){
console.log(data);
});
promise.fail(function(data){
console.log('fail!');
});
promise.always(function(data){
console.log('always!');
});
});
</script>
</body>
</html>
more succinct with extra done:
<!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">
$(function(){
$.ajax({
url:'http://www.omdbapi.com/',
method: "GET",
data: { s: "star wars" }
})
.done(function(data){
console.log(data);
}, function(data){
console.log('another done');
})
.fail(function(data){
console.log('fail!');
})
.always(function(data){
console.log('always!');
});
});
</script>
</body>
</html>
custom deferred and promise objects:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
</head>
<body>
<script type="text/javascript">
var deferred = $.Deferred();
var promise = deferred.promise();
setTimeout(function(){
deferred.resolve("first promise");
}, 1000);
var deferred2 = $.Deferred();
var promise2 = deferred2.promise();
setTimeout(function(){
deferred2.reject("second promise");
}, 5000);
promise.fail(function(value) {
console.log('fail first: ' + value);
}).always(function(value){
console.log('always first: ' + value);
}).done(function(value){
console.log('done first: ' + value);
});
$.when(promise, promise2)
.done(function(value1, value2){
console.log('done both: ' + value1 + ", " + value2);
}, function(value1, value2){
console.log('2nd done both: ' + value1 + ", " + value2);
})
.then(function(value1, value2){
console.log('then both success: ' + value1 + ", " + value2);
}, function(value1, value2){
console.log('then both fail: ' + value1 + ", " + value2);
})
</script>
</body>
</html>
Explain Cross Site AJAX
$.ajax({
url: 'https://status.github.com/api/status.json',
success: function(data) { console.log(data) },
error: function(jqXHR, status, errorThrown){ console.log(status); }
});
look at console
Explain JSONP
<!-- Request sent via a script tag -->
<script src="https://status.github.com/api/status.json?callback=apiStatus"></script>
<!-- Data received as an execution of the predefined function. -->
<script> function apiStatus(data) { console.log(data.status); } </script>
Explain CORS
- http://www.omdbapi.com/?s=pirates&r=json
Access-Control-Allow-Origin:*