Skip to content

Commit 58975fe

Browse files
dinanathsj29dinanathsj29
authored
chapter 2 to 2.5 updated
chapter 2 to 2.5 updated
1 parent d98e7ef commit 58975fe

File tree

1 file changed

+82
-10
lines changed

1 file changed

+82
-10
lines changed

‎README.md‎

Lines changed: 82 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,11 @@ Topics included/covered
7979
- 1.9. [Drawbacks of AJAX](#19-drawbacks-of-ajax)
8080

8181
2. [AJAX XMLHttpRequest](#2-ajax-xmlhttprequest)
82+
- 2.1. [What is XMLHttpRequest? (XHR)](#21-what-is-xmlhttprequest)
83+
- 2.2. [Libraries and other Methods](#22-libraries-and-other-methods)
84+
- 2.3. [XMLHttpRequest-loading JSON data](#23-xmlhttprequest-loading-json-data)
85+
- 2.4. [XMLHttpRequest-loading web API data](#24-xmlhttprequest-loading-web-api-data)
86+
- 2.5. [GET vs POST method](#25-get-vs-post-method)
8287

8388
3. [AJAX Reference](#3-ajax-reference)
8489

@@ -157,16 +162,16 @@ An asynchronous request **`doesn’t block the client`** i.e. browser is respons
157162
| Year | Achievements |
158163
| ---------------------------------------------- | ---------------------------------------------- |
159164
| Mid 1990s                                                             | Most Web sites were based on static HTML pages, each user action/interaction required a complete new page be loaded from the serve |
160-
| 1996                                                             | **`iframe tag`** was introduced by **`Internet Explorer`**; like the object element, it can load or fetch content asynchronously |
161-
| 1998                                                             | **`Microsoft Outlook Web Access team`** developed the concept behind the **`XMLHttpRequest`** scripting object |
162-
| 1999                                                             | **`XMLHttpRequest (XMLHTTP)`** shipped with **`Internet Explorer 5.0`** |
163-
| By year 2002                                                             | The functionality of the XMLHTTP ActiveX control in IE 5 was later implemented by **`Mozilla, Safari, Opera, Internet Explorer 7`** and other browsers as the XMLHttpRequest JavaScript object |
164-
| 2004                                                             | **`Google Gmail`**. Google made a wide deployment of standards-compliant, cross browser Ajax with Gmail |
165-
| 2004                                                             | October 2004 **`Kayak.com's`** public beta release was among the first large-scale e-commerce |
166-
| 2005                                                             | **AJAX term coined in 2005 by Jesse James Garrett!** The term Ajax was publicly used on **`18 February 2005 by Jesse James Garrett`** in an article titled **`Ajax: A New Approach to Web Applications`**, based on techniques used on Google pages |
167-
| 2005                                                             | Google Maps |
168-
| 2006                                                             | On 5 April 2006, the **`World Wide Web Consortium (W3C)`** released the first draft specification for the XMLHttpRequest object |
169-
| 2016                                                             | On 6 October 2016, the latest draft of the XMLHttpRequest object was published |
165+
| 1996 | **`iframe tag`** was introduced by **`Internet Explorer`**; like the object element, it can load or fetch content asynchronously |
166+
| 1998 | **`Microsoft Outlook Web Access team`** developed the concept behind the **`XMLHttpRequest`** scripting object |
167+
| 1999 | **`XMLHttpRequest (XMLHTTP)`** shipped with **`Internet Explorer 5.0`** |
168+
| By year 2002 | The functionality of the XMLHTTP ActiveX control in IE 5 was later implemented by **`Mozilla, Safari, Opera, Internet Explorer 7`** and other browsers as the XMLHttpRequest JavaScript object |
169+
| 2004 | **`Google Gmail`**. Google made a wide deployment of standards-compliant, cross browser Ajax with Gmail |
170+
| 2004 | October 2004 **`Kayak.com's`** public beta release was among the first large-scale e-commerce |
171+
| 2005 | **AJAX term coined in 2005 by Jesse James Garrett!** The term Ajax was publicly used on **`18 February 2005 by Jesse James Garrett`** in an article titled **`Ajax: A New Approach to Web Applications`**, based on techniques used on Google pages |
172+
| 2005 | Google Maps |
173+
| 2006 | On 5 April 2006, the **`World Wide Web Consortium (W3C)`** released the first draft specification for the XMLHttpRequest object |
174+
| 2016 | On 6 October 2016, the latest draft of the XMLHttpRequest object was published |
170175

171176
- AJAX concepts are first implemented in the year 2004, a term coined publicly on **`18 February 2005 by Jesse James Garrett`** in an article titled **`Ajax: A New Approach to Web Applications`**
172177

@@ -284,5 +289,72 @@ Many famous and widely used web applications use AJAX technology, like:
284289
2 AJAX XMLHttpRequest
285290
=====================
286291

292+
2.1. What is XMLHttpRequest?
293+
---------------------
294+
2.1. What is XMLHttpRequest? (XHR)
295+
---------------------
296+
297+
- `XMLHttpRequest` method helps to establish a connection with a specific URL and send or receive data
298+
- The `XMLHttpRequest` object is the key to AJAX, An object of `XMLHttpRequest` is used for asynchronous communication between client and server
299+
- The `XMLHttpRequest` object can be used to exchange data with a web server asynchronously (behind the scenes), so it's possible to update parts of a web page, without reloading the whole page
300+
- `XMLHttpRequest (XHR)` is an API in the form of an object whose methods transfer data between a web browser and a web server in the browser's JavaScript environment
301+
- `XMLHttpRequest (XHR)` can be used with other protocols than HTTP
302+
- `XMLHttpRequest (XHR)` works with data other than (JSON, plain text)
303+
304+
### XMLHttpRequest performs following operations:
305+
306+
- `Sends` data from the client in the background
307+
- `Receives` the data from the server
308+
- `Updates` the webpage without reloading it
309+
310+
> **XMLHttpRequest Syntax**:
311+
312+
```js
313+
XMLHttpRequest.open ('http method type', 'url-path');
314+
315+
XMLHttpRequest.open ('GET/POST', '.json file path or web api path');
316+
```
317+
318+
2.2. Libraries and other Methods
319+
---------------------
320+
321+
It's advisable to know plain vanilla JavaScript code to achieve AJAX with XMLHttpRequest.
322+
323+
There are a bunch of other libraries, methods, and ways to make AJAX calls. Third-party libraries are great, time-saving and make things easier (less code we can write to achieve things):
324+
325+
- jQuery (DOM manipulation library)
326+
- Axios
327+
- Superagent
328+
- Fetch API
329+
- Prototype
330+
- Node HTTP
331+
332+
2.3. XMLHttpRequest-loading JSON data
333+
---------------------
334+
335+
336+
2.4. XMLHttpRequest-loading web API data
337+
---------------------
338+
339+
JSON Web API path: https://learnwebcode.github.io/json-example/animals-1.json
340+
341+
2.5. GET vs POST method
342+
---------------------
343+
344+
| Points | GET method | POST method |
345+
| ------------------------------- | ------------------------------- | ------------------------------- |
346+
| **`Send data visibility`**                               | GET sends data in open/visible mode in browser URL as a parameter | GET sends data in invisible/hidden (secure) mode |
347+
| **`Encoding type`** | application/x-www-form-urlencoded | multipart/form-data or application/x-www-form-urlencoded Use multipart encoding for binary data |
348+
| **`Secure`** | GET is better for non-secure data, like id/filter string parameters, query strings in Google, etc. | GET is better for secure/passing important-sensitive data, like Auth-Authorisation, password, keys, etc. |
349+
| **`Data size`** | Sends data less than 2K of parameters, some servers handle up to 64K | Sending a large amount of data to the server (POST has no size limitations) |
350+
| **`Security`** | GET is less secure as compared to POST because data sent is part of the URL. So it's saved in browser history and server logs in plaintext | POST is a more safer than GET method because the parameters are not stored in browser history or web server logs |
351+
| **`Cached`** | Can be cached | Can not be cached |
352+
| **`Usability`** | GET method can be used for sending data parameters (should not be used when sending passwords or other sensitive information) | POST method used when sending Auth-Authorisation, passwords or other sensitive information |
353+
| **`Form data length restrictions`** | As data is in the URL and URL length is restricted, A safe URL length limit is often 2048 characters but varies by browser and web server | No data length and data size restrictions |
354+
| **`Form data type restrictions`** | Only ASCII characters allowed | No restrictions! Binary data is also allowed |
355+
| **`Hacked`** | Easier to hack for script kiddies, computer attackers or hackers | Difficult to hack |
356+
| **`Bookmarked`** | Can be bookmarked | Can be bookmarked |
357+
| **`Form method`** | GET is the default method in the form element | To use POST we need to specify it in HTML Forms as `method="POST"` |
358+
287359
3 AJAX Reference
288360
=====================

0 commit comments

Comments
 (0)