mahuntington
/
modular-js-notes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ajax

Browse Source
master
Matt Huntington 8 years ago
parent 083bb80a8c
commit c510a10a06
4 changed files with 138 additions and 139 deletions
Show Stats Download Patch File Download Diff File

1
README.md
Unescape View File

@ -17,6 +17,7 @@
* [Basics](ajax/basics.md)
* [Promises](ajax/promises.md)
* [Cross Origin Requests](ajax/cross_origin.md)
* [Mocking Ajax Requests](ajax/mocking.md)
## HTML 5

139
ajax/basics.md
Unescape View File

@ -40,142 +40,3 @@
</body>
</html>
```
## Explain promises
```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">
$(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:
```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">
$(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:
```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">
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
```javascript
$.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
```html
<!-- 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
1. http://www.omdbapi.com/?s=pirates&r=json
1. `Access-Control-Allow-Origin:*`

25
ajax/cross_origin.md
Unescape View File

@ -0,0 +1,25 @@
## Explain Cross Origin AJAX
```javascript
$.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
```html
<!-- 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
1. http://www.omdbapi.com/?s=pirates&r=json
1. `Access-Control-Allow-Origin:*`

112
ajax/promises.md
Unescape View File

@ -0,0 +1,112 @@
## Explain promises
```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">
$(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:
```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">
$(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:
```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">
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>
```
Write Preview
Loading…
Cancel
Save