From d996808d2a29ea84eb0e7dd6ff1603d9da4a13ed Mon Sep 17 00:00:00 2001 From: AbdulRahmanDbes Date: Sat, 21 Oct 2017 15:14:19 +0200 Subject: [PATCH 1/3] Add an explanation about XHttpRequest --- Week5/REVIEW.MD | 51 ++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 50 insertions(+), 1 deletion(-) diff --git a/Week5/REVIEW.MD b/Week5/REVIEW.MD index 2f6486c33..6fea7bc09 100644 --- a/Week5/REVIEW.MD +++ b/Week5/REVIEW.MD @@ -11,4 +11,53 @@ this review covers: ## Callbacks -- JavaScript callback functions tutorial: https://www.youtube.com/watch?v=pTbSfCT42_M&index=17&list=WL \ No newline at end of file +- JavaScript callback functions tutorial: https://www.youtube.com/watch?v=pTbSfCT42_M&index=17&list=WL + +## XMLHTtpRequest +**XMLHttpRequest** is an objects to interact with servers. You can retrieve data from a URL without having to do a full page refresh. XMLHttpRequest is used heavily in Ajax programming. - [MDN](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) + +So what is Ajax? +**Ajax** is a method of exchanging data with a server, and updating parts of a web page without reloading the entire page. + +Let's diving a bit deeply into the code: + +First, we need to make an instance from 'XMLHttpRequest' class. +```javascript +var http = new XMLHttpRequest(); +``` +When we are doing a request it goes through 5 states: +* 0 : request not initialized. +* 1 : request has been set up. +* 2 : request has been sent. +* 3 : request is in process. +* 4 : request is complete. + +In the code below we are checking if the request is complete or not, and we check the status == 200 just to make sure that we do not get 404 error. - Take a look about [HTTP Status Code](https://httpstatuses.com). +```javascript + http.onreadystatechange = function() { + if ( http.readyState == 4 && http.status == 200) { + console.log(`Response from the server: ${http.response}`); + } +} +``` +There are methods to deal with a server like (GET, POST, UPDATE, DELETE…) + +* GET: to retrieve data from server. +* POST: to send data to server. +* UPDATE: to update data on the server. +* DELETE: to delete date from the server. + +To Initialize a request we use [open][https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/open] method. The syntax is: +```javascript +XMLHttpRequest.open(method, url, async, user, password) +``` +The parameters 'method' and 'url' are mandatory, 'user' and 'password' are optional. True is a default value for 'async'. + +```javascript +http.open("GET", URL, true/false); +``` +At the end we have to send our request to the server through [send](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/send) method. In our situation we are retriving a data from the server, so we do not have to pass any parameter to the send request. + +```javascript +http.send() +``` From 0d9950381bcb79dcfb864f710b9831d02536380d Mon Sep 17 00:00:00 2001 From: AbdulRahmanDbes Date: Sat, 21 Oct 2017 15:27:22 +0200 Subject: [PATCH 2/3] add an explaination about XHR --- Week5/REVIEW.MD | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/Week5/REVIEW.MD b/Week5/REVIEW.MD index 6fea7bc09..c9a17e313 100644 --- a/Week5/REVIEW.MD +++ b/Week5/REVIEW.MD @@ -13,51 +13,51 @@ this review covers: - JavaScript callback functions tutorial: https://www.youtube.com/watch?v=pTbSfCT42_M&index=17&list=WL -## XMLHTtpRequest -**XMLHttpRequest** is an objects to interact with servers. You can retrieve data from a URL without having to do a full page refresh. XMLHttpRequest is used heavily in Ajax programming. - [MDN](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) +## XMLHttpRequest +**XMLHttpRequest** is an objects to interact with servers. You can retrieve data from a URL without having to do a full page refresh. XMLHttpRequest is used heavily in Ajax programming - [MDN](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest). So what is Ajax? **Ajax** is a method of exchanging data with a server, and updating parts of a web page without reloading the entire page. -Let's diving a bit deeply into the code: +Let's diving into the code: -First, we need to make an instance from 'XMLHttpRequest' class. +First, we need to make an instance from 'XMLHttpRequest' object. ```javascript var http = new XMLHttpRequest(); ``` When we are doing a request it goes through 5 states: -* 0 : request not initialized. +* 0 : request is not initialized. * 1 : request has been set up. * 2 : request has been sent. * 3 : request is in process. * 4 : request is complete. -In the code below we are checking if the request is complete or not, and we check the status == 200 just to make sure that we do not get 404 error. - Take a look about [HTTP Status Code](https://httpstatuses.com). +In the code below we are checking if the request is complete or not, and we check the status == 200 just to make sure that we do not get 404 error - Take a look about [HTTP Status Code](https://httpstatuses.com). ```javascript http.onreadystatechange = function() { if ( http.readyState == 4 && http.status == 200) { - console.log(`Response from the server: ${http.response}`); + console.log('Response from the server: ' + http.response); } } ``` There are methods to deal with a server like (GET, POST, UPDATE, DELETE…) -* GET: to retrieve data from server. -* POST: to send data to server. -* UPDATE: to update data on the server. -* DELETE: to delete date from the server. +* GET: retrieve data from server. +* POST: send data to server. +* UPDATE: update data on the server. +* DELETE: delete date from the server. -To Initialize a request we use [open][https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/open] method. The syntax is: +To initialize a request we use [open](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/open) method. The syntax is: ```javascript -XMLHttpRequest.open(method, url, async, user, password) +XMLHttpRequest.open(method, url, async, user, password); ``` -The parameters 'method' and 'url' are mandatory, 'user' and 'password' are optional. True is a default value for 'async'. +The parameters _method_ and _url_ are mandatory, _user_ and _password_ are optional. True is a default value for _async_. ```javascript http.open("GET", URL, true/false); ``` -At the end we have to send our request to the server through [send](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/send) method. In our situation we are retriving a data from the server, so we do not have to pass any parameter to the send request. +At the end we have to send our request to the server through [send](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/send) method. In our situation we are retrieving a data from the server, so we do not have to pass a parameter to the send request. ```javascript -http.send() +http.send(); ``` From 19dea240770b14347c51e92d0f37ee7ade17166c Mon Sep 17 00:00:00 2001 From: AbdulRahmanDbes Date: Sun, 22 Oct 2017 18:29:59 +0200 Subject: [PATCH 3/3] Fix some English mistakes --- Week5/REVIEW.MD | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/Week5/REVIEW.MD b/Week5/REVIEW.MD index c9a17e313..89e85fc3f 100644 --- a/Week5/REVIEW.MD +++ b/Week5/REVIEW.MD @@ -14,15 +14,15 @@ this review covers: - JavaScript callback functions tutorial: https://www.youtube.com/watch?v=pTbSfCT42_M&index=17&list=WL ## XMLHttpRequest -**XMLHttpRequest** is an objects to interact with servers. You can retrieve data from a URL without having to do a full page refresh. XMLHttpRequest is used heavily in Ajax programming - [MDN](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest). +**XMLHttpRequest** is an object to interact with servers. You can retrieve data from a URL without having to do a full page refresh. XMLHttpRequest is used heavily in Ajax programming - [MDN](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest). So what is Ajax? **Ajax** is a method of exchanging data with a server, and updating parts of a web page without reloading the entire page. -Let's diving into the code: +Let's dive into the code: First, we need to make an instance from 'XMLHttpRequest' object. -```javascript +```js var http = new XMLHttpRequest(); ``` When we are doing a request it goes through 5 states: @@ -32,8 +32,8 @@ When we are doing a request it goes through 5 states: * 3 : request is in process. * 4 : request is complete. -In the code below we are checking if the request is complete or not, and we check the status == 200 just to make sure that we do not get 404 error - Take a look about [HTTP Status Code](https://httpstatuses.com). -```javascript +In the code below we are checking if the request is complete or not, and we check the status == 200 just to make sure that we do not get a 404 error - Read more about it here: [HTTP Status Code](https://httpstatuses.com). +```js http.onreadystatechange = function() { if ( http.readyState == 4 && http.status == 200) { console.log('Response from the server: ' + http.response); @@ -48,16 +48,16 @@ There are methods to deal with a server like (GET, POST, UPDATE, DELETE…) * DELETE: delete date from the server. To initialize a request we use [open](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/open) method. The syntax is: -```javascript +```js XMLHttpRequest.open(method, url, async, user, password); ``` The parameters _method_ and _url_ are mandatory, _user_ and _password_ are optional. True is a default value for _async_. -```javascript +```js http.open("GET", URL, true/false); ``` At the end we have to send our request to the server through [send](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/send) method. In our situation we are retrieving a data from the server, so we do not have to pass a parameter to the send request. -```javascript +```js http.send(); ```