mirror of
https://github.com/m-lamonaca/dev-notes.git
synced 2025-06-08 18:57:12 +00:00
feat: restructure docs into "chapters" (#12)
* feat(docker, k8s): create containers folder and kubernetes notes
This commit is contained in:
parent
b1cb858508
commit
2725e3cb70
92 changed files with 777 additions and 367 deletions
112
docs/languages/javascript/ajax.md
Normal file
112
docs/languages/javascript/ajax.md
Normal file
|
@ -0,0 +1,112 @@
|
|||
# AJAX
|
||||
|
||||
**AJAX**: Asynchronous JavaScript and XML
|
||||
|
||||
AJAX Interaction:
|
||||
|
||||
1. An event occurs in a web page (the page is loaded, a button is clicked)
|
||||
2. 2.An `XMLHttpRequest` object is created by JavaScript
|
||||
3. 3.The `XMLHttpRequest` object sends a request to a web server
|
||||
4. 4.The server processes the request
|
||||
5. 5.The server sends a response back to the web page
|
||||
6. 6.The response is read by JavaScript
|
||||
7. 7.Proper action (like page update) is performed by JavaScript
|
||||
|
||||
## XMLHttpRequest
|
||||
|
||||
```js
|
||||
var request = new XMLHttpRequest();
|
||||
|
||||
request.addEventListener(event, function() {...});
|
||||
|
||||
request.open("HttpMethod", "path/to/api", true); // third parameter is asynchronicity (true = asynchronous)
|
||||
request.setRequestHeader(key, value) // HTTP Request Headers
|
||||
request.send()
|
||||
```
|
||||
|
||||
To check the status use `XMLHttpRequest.status` and `XMLHttpRequest.statusText`.
|
||||
|
||||
### XMLHttpRequest Events
|
||||
|
||||
**loadstart**: fires when the process of loading data has begun. This event always fires first
|
||||
**progress**: fires multiple times as data is being loaded, giving access to intermediate data
|
||||
**error**: fires when loading has failed
|
||||
**abort**: fires when data loading has been canceled by calling abort()
|
||||
**load**: fires only when all data has been successfully read
|
||||
**loadend**: fires when the object has finished transferring data always fires and will always fire after error, abort, or load
|
||||
**timeout**: fires when progression is terminated due to preset time expiring
|
||||
**readystatechange**: fires when the readyState attribute of a document has changed
|
||||
|
||||
**Alternative `XMLHttpRequest` using `onLoad`**:
|
||||
|
||||
```js
|
||||
var request = new XMLHttpRequest();
|
||||
request.open('GET', 'myservice/username?id=some-unique-id');
|
||||
request.onload = function(){
|
||||
if(request.status ===200){
|
||||
console.log("User's name is "+ request.responseText);
|
||||
} else {
|
||||
console.log('Request failed. Returned status of '+ request.status);
|
||||
}
|
||||
};
|
||||
request.send();
|
||||
```
|
||||
|
||||
**Alternative `XMLHttpRequest` using `readyState`**:
|
||||
|
||||
```js
|
||||
var request = new XMLHttpRequest(), method ='GET', url ='https://developer.mozilla.org/';
|
||||
|
||||
request.open(method, url, true);
|
||||
request.onreadystatechange = function(){
|
||||
if(request.readyState === XMLHttpRequest.DONE && request.status === 200){
|
||||
console.log(request.responseText);
|
||||
}
|
||||
};
|
||||
request.send();
|
||||
```
|
||||
|
||||
`XMLHttpRequest.readyState` values:
|
||||
`0` `UNSENT`: Client has been created. `open()` not called yet.
|
||||
`1` `OPENED`: `open()` has been called.
|
||||
`2` `HEADERS_RECEIVED`: `send()` has been called, and headers and status are available.
|
||||
`3` `LOADING`: Downloading; `responseText` holds partial data.
|
||||
`4` `DONE`: The operation is complete.
|
||||
|
||||
### `XMLHttpRequest` Browser compatibility
|
||||
|
||||
Old versions of IE don't implement XMLHttpRequest. You must use the ActiveXObject if XMLHttpRequest is not available
|
||||
|
||||
```js
|
||||
var request =window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
|
||||
|
||||
// OR
|
||||
|
||||
var request;
|
||||
if(window.XMLHttpRequest){
|
||||
// code for modern browsers
|
||||
request = new XMLHttpRequest();
|
||||
} else {
|
||||
// code for old IE browsers
|
||||
request = new ActiveXObject('Microsoft.XMLHTTP');
|
||||
}
|
||||
```
|
||||
|
||||
## Status & Error Handling
|
||||
|
||||
Always inform the user when something is loading. Check the status and give feedback (a loader or message)
|
||||
Errors and responses need to be handled. There is no guarantee that HTTP requests will always succeed.
|
||||
|
||||
### Cross Domain Policy
|
||||
|
||||
Cross domain requests have restrictions.
|
||||
|
||||
Examples of outcome for requests originating from: `http://store.company.com/dir/page.htmlCross-origin`
|
||||
|
||||
| URL | Outcome | Reason |
|
||||
|-------------------------------------------------|---------|--------------------|
|
||||
| `http://store.company.com/dir2/other.html` | success |
|
||||
| `http://store.company.com/dir/inner/other.html` | success |
|
||||
| `https://store.company.com/secure.html` | failure | Different protocol |
|
||||
| `http://store.company.com:81/dir/other.html` | failure | Different port |
|
||||
| `http://news.company.com/dir/other.html` | failure | Different host |
|
Loading…
Add table
Add a link
Reference in a new issue