You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
- 1.8. [Where AJAX is used? AJAX examples](#18-where-ajax-is-used-ajax-examples)
79
+
- 1.9. [Drawbacks of AJAX](#19-drawbacks-of-ajax)
80
+
81
+
2.[AJAX XMLHttpRequest](#2-ajax-xmlhttprequest)
82
+
83
+
3.[AJAX Reference](#3-ajax-reference)
84
+
85
+
1 Introduction to AJAX
76
86
=====================
77
87
78
88
1.1. What is AJAX?
@@ -83,25 +93,196 @@ Topics included/covered
83
93
84
94
The process of **`sending and receiving data on the fly without page refresh/reload`** is known as AJAX
85
95
86
-
- AJAX is not a new programming language - actually its a methodology or concepts or special way to bring JavaScript and XML (JSON) together to produce impressive results
87
-
- AJAX is set of web technologies - just uses a combination of:
88
-
- A browser built-in `XMLHttpRequest object` to request data froma web server
89
-
-`JavaScript and HTML DOM` to display or use the data
96
+
- AJAX is *not a new programming language* - actually its a methodology or concepts or special way to bring JavaScript and XML (now a days JSON) together to produce impressive results
97
+
-**AJAX is set of web technologies** - just uses a combination of:
98
+
- A browser built-in `XMLHttpRequest object` to request data from a web server
99
+
-`JavaScript and HTML DOM` to display or use the data
100
+
- It is a group of inter-related technologies like **`JavaScript, DOM, XML/JSON, HTML/XHTML, CSS, XMLHttpRequest`** etc.
90
101
- AJAX allows the web page to `"talk/communicate"` with the server behind the scene (send and receive data asynchronously)
91
102
- AJAX sends, receives and process information to or from the server without page refresh/reload (does not interfere with current web page/data)
92
-
- AJAX minimize the page refreshes, so web sites/pages/web apps shows more fluid/elegent-better experience to users
93
-
- AJAX and JSON together provides the ability to JavaScript code to make HTTP requests to get data and update page content with new data
94
-
- Now a days JSON has replaced XML for the most part and almost all dynamic websites uses/implements AJAX concepts and methodology
103
+
- AJAX minimize the page refreshes, so web sites/pages/web apps show more fluid/elegant-better experience to users
104
+
- AJAX and JSON together provide the ability to JavaScript code to make HTTP requests to get data and update page content with new data
105
+
- Now a days **`JSON`** has replaced `XML` for the most part and almost all dynamic websites use/implements AJAX concepts and methodology
95
106
96
107
97
108
1.2. Why use AJAX?
98
109
---------------------
99
110
100
-
- AJAX is prety fast - as it allows you to send and receive data asynchronously without reloading the web page
101
-
- AJAX allows web pages to be updated asynchronously by exchanging data with a web server behind the scenes, this simply means that it is possible to update parts of a web page, without reloading the whole page
102
-
- AJAX is used for building web based interactive applications that process user requests immediately - no page reload to bring data into your application
103
-
- AJAX allows us to send and fetch only important/valuable part of data/information to/from the server not the entire page so it makes your application interactive and faster
104
-
- XML is commonly used as the format for receiving server data, although any format, including plain text, can be used
105
-
- AJAX is a web browser technology independent of web server software/platform
106
-
- Data-driven as opposed to Page-driven methodology
111
+
-**`AJAX is pretty fast`** - as it allows you to send and receive data asynchronously without reloading the web page
112
+
-**`AJAX allows web pages to be updated asynchronously`** by exchanging data with a web server behind the scenes, this simply means that it is possible to update parts of a web page, without reloading the whole page
113
+
- AJAX is used for building web-based interactive applications that process user requests immediately - **`no page reload`** to bring data into your application
114
+
- AJAX allows us to send and fetch only important/valuable part of data/information to/from the server, not the entire page so it **`makes your application interactive and faster`**
115
+
- XML is commonly used as the format for receiving server data, although **`any data exchange/interchange format can be used`** including JSON, plain text
116
+
- AJAX is a web browser technology **`independent of web server software/platform`**
117
+
-**`Data-driven`** as opposed to Page-driven methodology
118
+
- AJAX is the most viable, popular **`Rich Internet Application (RIA) technology`** so far with tremendous industry momentum and several tool kit and frameworks are emerging
A synchronous request **`blocks the client until the operation completes`** i.e. browser is unresponsive. In such a case, the JavaScript engine of the browser is blocked.
127
+
128
+
> **Example**:
129
+
-**Mail application** - New email arrived - whole page refresh to show latest inbox and email
130
+
-**Chat application** - On new message arrival complete chat application reloads
131
+
-**Travel Website** - Destination place selected - request went to server -> got response -> page refresh to show fare details
An asynchronous request **`doesn’t block the client`** i.e. browser is responsive. At that time, the user can perform another operation also. In such a case, the JavaScript engine of the browser is not blocked.
136
+
137
+
> **Example**:
138
+
- While working with AJAX-based **Rich Internet Application (RIA)** we can work with a specific part of an application - send/receive data, so application is interactive and faster
| When you execute something synchronously, you wait for it to finish before moving on to another task (QUEQE)| When you execute something asynchronously, you can move on to another task before it finishes (NO QUEQE) |
143
+
| Synchronous, or Synchronized means "connected", or "dependent" in some way | Asynchronous means they are totally independent and neither one must consider the other in any way, either in the initiation or in execution |
144
+
| Synchronize task are coordinated or combined with each other - one finishes than only another or next starts | Asynchronous task is not co-coordinated with other tasks (can execute in any order)|
145
+
| In the synchronous case, each statement completes before the next statement is run. In this case the program is evaluated exactly in order of the statements <br/>Be execute in order: 1 --> 2 --> 3 | In Asynchronous case, you don't stop execution, you can continue executing other code while the 'request' is being made <br/>1 or 2 or 3 anybody can execute and finish any time|
146
+
|**Example:** You are in a queue to get a **`food coupon or movie ticket`**. You cannot get one until the front of you gets one, and the same applies to the people queued behind you |**Example:****`You are in a restaurant`** with many other people. You and Other people(everybody) can also order their food at the same time, no one has to wait for food to be cooked and served to you before they can order |
147
+
|**Example:** A `relay race` - <br/> `1st runner` runs till given distance, stops and passes the baton to the `2nd runner` and process continues till last runner |**Example:**`100 meters race or Marathon race` - any runner can run randomly and win |
| 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 |
170
+
171
+
- 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`**
172
+
173
+
174
+
1.5. AJAX Technologies
175
+
---------------------
176
+
177
+
1.5. Technologies in AJAX
178
+
---------------------
179
+
180
+
The term **`AJAX`** has come to represent a broad group/set of Web Technologies that can be used to implement a Web application that/which communicates with a server in the background (behind the scenes), without interfering with the current state of the page.
181
+
182
+
As describe earlier AJAX cannot work independently. AJAX is not a technology but group/set of inter-related technologies used in combination to create interactive webpages.
183
+
184
+
In the article titled **`Ajax: A New Approach to Web Applications`** by **`Jesse James Garrett`** that coined the term AJAX, explained that the following technologies are incorporated:
185
+
186
+
- HTML/XHTML and CSS *(for presentation)*
187
+
- The Document Object Model (DOM) *(for a dynamic display of and interaction with data)*
188
+
- XML or JSON *(for the interchange of data, and XSLT for its manipulation)*
189
+
- The XMLHttpRequest object *(for asynchronous communication)*
190
+
- JavaScript *(to bring these technologies together)*
191
+
192
+
### 1.5.1. HTML/XHTML and CSS
193
+
- These technologies are used for displaying content (Text/Data - Text Layout Model) and style (Design/Presentation - Box Layout Model)
194
+
- It is mainly used for presentation layer
195
+
196
+
### 1.5.2. The Document Object Model (DOM)
197
+
- API for accessing and manipulating structured documents
198
+
- It is used for dynamic display and interaction with data
199
+
- Represents the structure of XML and HTML documents
200
+
201
+
### 1.5.3. XML or JSON
202
+
- Lightweight and popular data exchange/interchange format on the internet today!
203
+
- For carrying data to and from server
204
+
- JSON (Javascript Object Notation) is like XML but short, better, faster, lightweight, popular than XML
205
+
206
+
### 1.5.4. The XMLHttpRequest object
207
+
- JavaScript object that performs asynchronous interaction with the server
208
+
- For asynchronous communication between client and server
209
+
-**`Sends data from the client in the background -> Receives the data from the server -> Updates the webpage without reloading it`**
210
+
211
+
### 1.5.5. JavaScript
212
+
- It is used to bring above technologies together (Glue for the whole AJAX operation)
213
+
- Loosely typed scripting language, it is used mainly for client-side logic/validation
214
+
215
+
1.6. How AJAX works?
216
+
---------------------
217
+
218
+
AJAX communicates with the web server using XMLHttpRequest object. Let's try to understand the flow and process of AJAX or how AJAX works (XMLHttp --> Request <-- Response mechanism) as displayed in the image below:
219
+
220
+
<p>
221
+
<figure>
222
+
<imgsrc="_images-ajax/1.6.1-how-ajax-works.png"alt="AJAX - How AJAX works - flow diagram"title="AJAX - How AJAX works - flow diagram"width="600"border="2" />
223
+
<figcaption> Image - AJAX - How AJAX works - flow diagram</figcaption>
224
+
</figure>
225
+
</p>
226
+
227
+
<p>
228
+
<figure>
229
+
<imgsrc="_images-ajax/1.6.2-how-ajax-works.gif"alt="AJAX - How AJAX works - flow diagram"title="AJAX - How AJAX works - flow diagram"width="600"border="2" />
230
+
<figcaption> Image - AJAX - How AJAX works - flow diagram</figcaption>
<figcaption> Image - AJAX Browser support - September 2019</figcaption>
254
+
</figure>
255
+
</p>
256
+
257
+
> **NOTE**:
258
+
Browser does not support AJAX, simply means that the `browser does not support the creation of Javascript object – XMLHttpRequest object`
259
+
260
+
261
+
262
+
1.8. Where AJAX is used? AJAX examples
263
+
---------------------
264
+
265
+
Many famous and widely used web applications use AJAX technology, like:
266
+
- Google Gmail, Google Search, Google Maps
267
+
- Facebook
268
+
- Twitter
269
+
- Travel Sites
270
+
- Youtube
271
+
- Online Songs/Video players/websites
272
+
- Chat applications
273
+
107
274
275
+
1.9. Drawbacks of AJAX
276
+
---------------------
277
+
278
+
- Any browser does not support JavaScript or XMLHttpRequest, or has this functionality disabled, will not be able to properly use AJAX-based/dependent pages
279
+
- Some Web applications that use AJAX are built in a way that cannot be read by screen-reading technologies, such as JAWS (In such a case the WAI-ARIA standards provide a way to provide hints)
280
+
- Screen readers may still not be able to properly read the dynamically generated content
281
+
- The asynchronous callback-style of programming required can lead to complex code that is hard to maintain, to debug and to test
0 commit comments