Rich Internet Applications

Definition

Rich Internet applications (RIA) are Web-based applications that have some characteristics of graphical desktop applications. Built with powerful development tools, RIAs can run faster and be more engaging. They can offer users a better visual experience and more interactivity than traditional browser applications that use only HTML and HTTP.

Early Internet users mostly exchanged text-based electronic mail messages. Then along came HTML and the World Wide Web, and soon people were looking at graphically enhanced Web pages designed by specialists and served upon demand. All these applications mainly involved reading text on-screen and dealing with material that was preformatted and essentially static.

To do tasks like manipulate data and interact with sophisticated business logic, users relied on specialized software on their computers and networks. Then someone thought about providing applications through standard Web pages that people could access with their browsers.

That this was even possible was a tribute to the power of the Web, but the underlying technology was also a terrible limitation. The static, stateless nature of HTTP meant that interaction was one-sided and disconnected, relegated to an asynchronous style reminiscent of green-screen mainframe applications from the 1970s.

These days, we are doing much better.

Today, programmers can embed almost any functionality they want inside a Web-based graphical interface, making it look and act as if it were traditional shrink-wrapped software.

With modern tools, developers can create complex application screens using a variety of mixed media such as multiple fonts, bit-map and vector graphic files, animations, online conferencing, audio and video. Those applications offer functionality that goes far beyond mere reading and browsing, and they can be served up over the Web. We call these rich Internet applications.

RIA Characteristics

A number of key features differentiate RIAs from traditional Web applications.

Direct interaction: In a traditional page-based Web application, interaction is limited to a small group of standard controls: checkboxes, radio buttons and form fields. This severely hampers the creation of usable and engaging applications. An RIA can use a wider range of controls that allow greater efficiency and enhance the user experience. In RIAs, for example, users can interact directly with page elements through editing or drag-and-drop tools. They can also do things like pan across a map or other image.

Partial-page updating: Standard HTML-based Web pages are loaded once. If you update something on a page, the change must be sent back to the server, which makes the changes and then resends the entire page. There's no other way to do it with HTTP and HTML. With traditional Web-based apps, network connectivity issues, processing limitations, and other problems require users to wait while the entire page reloads. Even with broadband connections, wait times can be long and disruptive.


But RIAs incorporate additional technologies, such as real-time streaming, high-performance client-side virtual machines, and local caching mechanisms that reduce latency (wait times) and increase responsiveness. A number of commercial development tools (see below) permit this partial-page updating.

Rich Internet applications: The tools

The list of current technologies that can be used to build modern RIAs is long. Here are some of them:

• AJAX
• Adobe Flash, Flex and Adobe Integrated Runtime (AIR)
• Microsoft Silverlight
• Curl (an object-oriented language with embedded HTML markup)
• Google Gears
• OpenLaszlo and Webtop
• Oracle WebCenter

Better feedback: Because of their ability to change parts of pages without reloading, RIAs can provide the user with fast and accurate feedback, real-time confirmation of actions and choices, and informative and detailed error messages.

Consistency of look and feel: With RIA tools, the user interfaces and experience with different browsers and operating systems can be more carefully controlled and made consistent.

Offline use: When connectivity is unavailable, it might still be possible to use an RIA if the app is designed to retain its state locally on the client machine. (Developments in Web standards have also made it possible for some traditional Web applications to do that.)

Performance impact: Depending on the application and network characteristics, RIAs can often perform better than traditional apps. In particular, applications that avoid round trips to the server by processing locally on the client are likely to be noticeably faster. Offloading such processing to the client machines can also improve server performance. The downside is that small, embedded and mobile devices -- which are increasingly common -- may not have the resources necessary to use such apps.

Rich Web-based Applications

 INTRODUCTION

 The concept of the service of the web was introduced in the early 90s, and it became popular, allowing the features of other types of network-based services such as email and file sharing, to be delivered via the service of the web. Nowadays, the client-server based distributed systems – commonly known as ―web applications‖ – are mainly built exploiting the service of the web and this domain is evolving and expanding rapidly, introducing new breeds of systems with a  variety of features, which use dedicated Techniques and Technologies (TTs) to develop them. It is not easy to understand both the common and specific characteristics of these systems, and still, there are no proper definitions available to explain them too.  The definitions and taxonomies of the concepts are important as they provide a precise common understanding of the focused subject, which helps in increasing the realization of the concept towards proper utilization of it. We have studied the systems, which utilize the service of the web, in depth, and have introduced the concept of web-based application and a definition for it, also discussing their development TTs. The concept of web-based applications is detailed in Section II.A. In our ongoing research, we narrowed down our study, focusing on the web-based applications, which utilize a rich communication model, explained in Section  II.B.  The systems in this focused domain are commonly known as Rich  Internet  Applications  (RIAs); the characteristics of them are discussed in Section II.C.  Continuing the study, we noted that there are varieties of systems such as mobile apps, cloud-based systems,  and Internet of  Things (IoT)  based systems, which share some common characteristics with the  RIAs.  Our ongoing research is focusing on introducing an abstract architectural style for these systems; thus, we required a common basis to address all these systems. While doing an in-depth literature survey we understood that still the common architectural characteristics of these systems have not been understood, and also a proper definition is not available. In this paper – in  Section III –  we propose an umbrella term  ―Rich  Web-based  Application‖  (RiWA), to address a wide range of web-based applications, which use the rich communication model,  commonly used by the  RIAs. Then we propose a definition for the  RiWA by extending the definition of the web-based application, aligning to the identified common architectural characters of the RiWAs. Based on the proposed definition, we present taxonomies for the development TTs of the RiWAs in Section IV, towards improving the understanding of the proper utilization of them. We expect to continue our research in the direction of introducing an architectural style for the RiWAs, based on the proposed definition in this paper,  which can help in realizing a wide range of systems covered by the proposed umbrella term ―Rich Web-based Application‖.

Methodology 

An intensive literature survey was conducted, focusing on the 1) web, internet, and related concepts like protocols, 2) web applications, RIAs,  and related  concepts like  the rich communication  model,  3)  other  types  of  web-based applications,  which utilize  the  rich communication  model, like mobile apps, etc., and 4) the development TTs of these systems.  The search was executed online using the Google Scholar search engine. Towards experiencing the findings of the literature survey and gaining empirical evidence,  a  series of experiments were conducted.  These experiments were focusing on identifying and understanding the common architectural characteristics of the web-based applications,  which utilize the rich communication model and their development TTs. These experiments were prototype based and continued in incremental development.  The facts identified during the literature survey were examined in the early iterations, then new facts were identified, and they were tested in later iterations.  Solutions for the identified issues in early iterations were continuously tested and refined in later iterations. The new concepts such as web-based applications, Delta Communication  (DC), Rich Web-based Applications (RiWA) were constructed inductively, to assist the discussions of the ongoing research,  in the direction of introducing an architectural style for the rich applications, which are based on the concept of the web. Various TTs – as discussed in Section IV – were used to develop the prototypes for testing different types of applications as well as their development TTs.  Early prototypes were mainly browser-based applications, developed using HTML,  JavaScript  (JS),  and  PHP.  The derived concepts, such as Simple Pull Delta Communication (SPDC) [3], were tested later using different server-side TTs like  JAVA  and  .NET, and also tested for different other types of applications like mobile apps.

BACKGROUND 

This section discusses the basics of three main concepts, which lay the foundation for the rest of the paper.

Web-based Applications

  The term ―web application ‖ usually denotes a  range of applications, which run in a web browser. In present, the use of the service of the web has expanded its limits, affecting the generic web applications to grow beyond the web browser. However, still the architecture of these systems are based on the client-server style,  using the request-respond model over HTTP;  thus, they can be grouped into a  single domain, which is called Web-based Applications. Web-based  Application  is  defined  as  ―a  system,  with application  component(s)  in  client-side  [client-component(s)],  which  communicate(s)  with  application component(s)  in  a  web  server  [server-component(s)],  for processing data. They utilize the service of the web, based on the client-server architecture, request-response model, standard  HTTP, and other related techniques and technologies‖.  Combination  of  the  components  of  a standalone  desktop  application  [client-component(s)]  and components,  which  run  in  a  web  server  [server-component(s)]  is  called  as  a  standalone  web-based application,  which can  be  extended into  a  multi-tier  web-based  application,  by  adding  external  layers  such  as database layer, etc.. Web-based applications can be mainly classified into two groups, based on the type of the client-components,  as browser-based web-based applications and non-browser-based web-based applications.  The limitations of the web-based application can be seen as  1)  poor  Graphical User Interfaces (GUIs), 2) slow responses due to the work-wait pattern,  3)  low user experience caused by the aforementioned limitations,  4) lack of management maintenance, and modification,  and  5)  communication limitations [2].  Overcoming these limitations of web-based applications,  a new breed of applications named  Rich Internet  Applications  (RIAs) had been introduced,  which use a rich communication model.  The RIAs introduced a new era for the web, named  Web2; and they have become increasingly important and popular. The rich communication model and other characteristics of the RIAs are discussed in the next two sections.

 Delta Communication

 The  rich  communication  model  of  the  RIAs  is  called Delta Communication (DC), with three main characteristics:
 1)  capability  of processing  in the background,  which  helps in partial  page  rendering,
2)  faster communication than the communication used in a web-based application, which leads to improving the responsiveness by eliminating the work-wait pattern, and
3) support for the development of the features in both synchronous and asynchronous processing.

 DC can be seen as the power of the RIAs and it is defined as ―the rich communication model used by the rich features of the RIAs, for client-component(s) to communicate with the server-component(s), to exchange only the needful dataset – for  a  particular  feature  executed  at  the  time  –  which  is smaller,  compared  to  the  size  of  the  request/response  of traditional  communication.  Since the size of the dataset communicated is smaller,  the communication completes faster, eliminating the work-wait pattern. The processing of the response is done by the client-components in the background, therefore the page refreshes are eliminated and replaced by partial page rendering to update the content of the GUI with the results of the response. The user experience can be determined by the implementation of the feature, in either blocking (synchronous) or non-blocking (asynchronous) modes‖ [3]. The basic model of the DC  is called  Simple Pull  Delta Communication  (SPDC)  model, which is defined as ―the basic abstract Delta-Communication technique, based on the data-pull mode. It describes the simplest form of data-pull  Delta-Communication,  based on the request-response model;  and this technique is technology independent‖ [3]. The JavaScript (JS) implementation of the SPDC – which is called the ―JavaScript-based  Simple  Pull  Delta-Communication‖  (JS-SPDC)  – is the simplest implementation of the SPDC, which is commonly known as Asynchronous Javascript And XML (AJAX).

  Rich Internet Applications

 The term ―Rich  Internet  Application‖  had been first used by Jeremy Allaire at Macromedia, in 2002; introducing their new technology named ―Macromedia Flash MX‖, which is a client-side application development platform with dedicated TTs  [4].  As per Jeremy,  the  RIAs are supposed to have ―media-rich power of the traditional desktop with the deployment and content-rich nature of Web applications ‖ [4]. The client-side application in RIAs is called a rich-client, which is a thick-client. Jeremy suggests that the rich client development  technologies  should  provide  ―an  efficient, high-performance runtime  for executing  code, content, and communications;  Integrate  content,  communications,  and application interfaces into a common environment; Provide powerful  and  extensible  object  models  for  interactivity; Enable rapid application  development through components and  re-use;  Enable  the  use  of  Web  and  data  services provided  by  application  servers;  Embrace  connected  and disconnected  clients;  and  Enable  easy  deployment  on multiple platforms and  devices‖, which Macromedia Flash MX attempted to address and enable [4].

The development approach of Flash is plugin-based and supports both browser-based and non-browser-based modes of client-components.  Instead of discussing the Flash in depth, this paper tends to look into the other RIA development approaches, as discussed below.

 1) Approaches for developing rich internet applications There are three approaches for  RIA  engineering  1) proprietary plugin based approach; 2) Open source JS based approach,  and 3)  the least known browser-based approach [5].  Section  IV  details these approaches, specifying the development TTs used in them. The JS based approach has become popular while the other two approaches have faded away.  Therefore,  the features of the  RIAs are mainly discussed in the context of JS based RIAs.

2) Features of RIAs Lawton  [6]  explains RIAs as applications, which run online and have many of the features and functionalities of desktop applications. He continues the explanation showing that the RIAs have overcome problems with traditional Web applications  – such as slow performance and limited interactivity  – with their responsive  UIs and interactive capabilities, which make the Internet-based programs easier to be used and more functional. As per Koch et al.  [7], RIAs are Web applications, augmented with desktop features, which use mechanisms of advanced communications for data handling, to execute operations on the client-side, minimizing the server requests. They mention that the rich look-and-feel,  better responsiveness,  performance, and accessibility of  RIAs enthuse both the users and the software engineers;  and improve user interaction facilities like drag-and-drop, multimedia presentations, while avoiding unnecessary page reloading. Busch and Koch  [8] also deliver a similar impression saying that the RIAs are Web applications, which provide look-and-feel similar to desktop applications, thus different from the earlier generation of Web applications.  RIAs provide a variety of interactive GUI elements, the possibility of both on-line and off-line use of the application, and the transparent usage of the computing power of the client, server, and the network.  Busch and  Koch keep explaining that the RIAs are capable of processing data in both server and client, and the data exchange takes place in an asynchronous way so that the client stays responsive while continuously recalculating or updating parts of the  UI, till the communication is being processed. Furthermore, Busch and Koch [8] extend the explanation saying that the RIAs are complex Web applications based on thick-client architecture. On one side,  the client processes and manages data, reducing the communication; and on the other side,  most of the needed communication is done via DC; as the result of both these facts, the network traffic is reduced. They say that these facts also allow additional GUI features, increasing the usability and the interaction possibilities of the users.

3) Analysis of the feature of the RIAs Taking the explanations of the experts into consideration, and  based  on  the  empirical  evidence  gained  through  the experiments, we would analyze all the features of the RIAs discussed above, into 3 main facts: 1) rich GUIs, enabled by the  advancement  of  client-side  development,  which  can bring desktop  applications like  GUIs and  features; 2)  DC, which allows  communicating only  the needful, smaller  set of data, faster and asynchronously; and 3) the enhanced user experience,  enabled  by  the  cumulative  effect  of aforementioned two facts, which are delivered via advanced and rich features [6]-[9]. Based on these characteristics, the following section proposes and defines the concept of Rich Web-based Applications.

DEFINING THE RICH WEB-BASED APPLICATIONS

 Even though there are numerous researches that have been done in the past ten years in the domain of RIAs, still, a standard definition for RIAs has not been articulated  [10]. After surveying these researches in the domain, Casteleyn et al.  [10] have captured the essence of  RIAs and have introduced a definition:  ―RIAs are Web applications that aim to provide the features and functionality of traditional desktop applications, thereby offering a  richer,  more satisfying user experience compared to traditional Web 1.0 applications.  Therefore, RIAs must:  (i) strive for better responsiveness, (ii) improve interaction capabilities, and (iii) provide a richer user interface.‖ While studying a  variety of  web-based  applications and RIAs,  we  noted  that  the  scope  of  the  traditional  RIA development is mainly limited to the Web browser in client-side (open  source JS based  approach is explicitly  used for the browser); yet the server-side is still somewhat similar to traditional  Web  applications,  other  than  requiring  some additional dedicated  components to handle  DC. The above definition for RIAs by Casteleyn et al. [10] is also in favor of that.  We further noted that the scope of the RIAs can also be expanded beyond the browser –  in client-side –  similar to the concept of Web-based applications  [2], as discussed in Section II.A. For example, there can be mobile Apps, which use DC, and they are not running in a web browser. This observation turned our focus into a new domain, which comprises of a variety of types of applications,  which exhibits the characteristics discussed in Section II.C.3. We surveyed for a proper term to address all these systems in the focused domain and identified that these types of applications are separately addressed and discussed, regardless of their common characteristics.  It was difficult to continue the discussions in our ongoing research without having a common basis to address the different types of applications in the focused domain. Considering  the  common  features  of  these  applications, which utilize DC, we propose the umbrella term ―Rich Web-based  Applications‖  (RiWAs) – to address all  the types of applications, in and out of the browser – which exhibits the main  characteristics  of  the  RIAs  as  discussed  in  section  After a careful study of the architectural characteristics of these systems, we propose the following definition for the term ―Rich  Web-based  Applications‖, which is based on the definition of the web-based applications [2].

Rich  Web-based  Application  is  a  system,  with  application component(s)  in  client-side  [client-component(s)],  which communicate(s) with application component(s) in a Web server [server-component(s)], for processing data. Rich  Web-based Applications are based on the Client-Server architecture.  The client-components of  Rich  Web-based Applications contain rich Graphical  User Interfaces and advanced processing capabilities.  For communication, other than standard  HTTP, Delta-Communication techniques and technologies are used for faster communication, in both data-pull and data-push modes, which can be implemented in either synchronous or asynchronous mode.  Rich Graphical User Interfaces of Rich Web-based Applications together with faster Delta-Communication provide an enhanced and rich user experience.

RiWAs can be explained in another perspective as RiWAs are the systems, which combine the power of the rich GUIs and DC TTs of RIAs with the Web-based applications.  The scope of the RiWAs is wider than traditional Web-based applications in the DC aspect; and wider than standard RIAs in types of client-components and their integration aspects.  Furthermore, aligning to the types of Web-based applications based on the size  [2], RiWAs can also be grouped as standalone RiWAs and multi-tier RiWAs. The need for the introduction of this new domain RiWA and referring to it in this research is to address wider technological development possibilities, which are not likely covered generally by the term RIA under the domain of Web-based applications. The RiWAs can be seen as a hybrid concept of  Web-based applications and RIAs;  and RiWAs can gain benefits from the non-browser-based client-components, more than Web-based systems, as discussed in the following section.

TECHNIQUES AND TECHNOLOGIES FOR THE DEVELOPMENT OF THE RIWAS 

Towards the  TTs independency of an architectural style for  RiWAs  –  which is the main focus of our ongoing research – it is essential to have an adequate understanding of the development TTs of the RiWAs and their proper utilization. This knowledge will also help in demonstrating how the intended style can be adopted in  RiWAs development.  An in-depth discussion of the features and characteristics of different types of RiWAs and their development  TTs is intentionally avoided in this paper. Instead, this section analyses the  RiWAs development TTs classifies them and presents taxonomies in the direction of a structured understanding of their usage. We expect that these taxonomies will help to realize the functionalities of the components of the intended architectural style. As Meliá et al.  [11] say that the real challenge in SE is selecting the right and suitable TTs for the project from existing alternatives,  and creating the optimal solution to satisfy the user requirements. An adequate understanding of the TTs used in the development of RiWAs may provide sufficient assistance in the effort of designing the proposed architectural style for RiWAs to be TTs independent.

To gain a structural knowledge of the TTs, classifications, and taxonomies for them are presented in this section. This knowledge will also assist in the decision making of selecting proper TTs for the development of  RiWAs,  and hassle-less adoption of them,  via the conceptual realization provided by the taxonomies.  Toffetti et al. [12] have presented an analysis of TTs and design methodologies for RIAs. Their TTs analysis is based on the available development approaches and technologies/platforms.  They also discuss the level of abstraction of the technologies and also the supportive tools. We classify the TTs of RiWAs into 4  categories, according to the architectural elements and aligning to the given definition of the RiWA:  1) the client-components, 2) the server-components, 3) connector elements, and  4) data elements.  When developing RiWAs,  decision making of selecting suitable and compatible TTs in all these elements is required. We intend to keep the taxonomies abstract, leaving the leaf nodes to represent a specific type of Technique or Technology, instead of explicitly naming the available matching TTs. However, in the discussions, we have stated some examples of giving a better understanding of the category. In-depth discussions of the specifications of these TTs are intentionally kept out of the scope of this paper. Instead, the intention is to classify them and introduce a taxonomy for a better understanding of their utilization.

 TTs for the Client-Components of RiWAs 

The client-components of RiWAs are similar to the client-components of Web-based applications [2].  Additionally, they should incorporate DC  handing components,  thus the ability of DC development is needed for the client-components development TTs.  Fig.  1 illustrates the taxonomy for the client-components development TTs of RiWAs.  It should be noted that when the client-side development of  RiWAs is considered, it includes not only the application component development but also the Views/GUI development.


Fig. 1. Taxonomy for client-component(s) development TTs of RiWAs.

 1) TTs for the  Browser-based Client-Components of RiWAs There are several approaches for the browser-based RiWAs, inherited from RIAs. The first approach, which is the proprietary plugin based approach, uses technologies such as Adobe (former Macromedia) Flash/Flex [13], JAVA Applets,  or  MS  Silverlight  [5].  These technologies are enriched with utensils for developing desktop applications like rich GUIs.  For the client-components developed using

these  TTs, there are additional requirements for installing and maintaining browser plug-ins or runtimes. It was the main reason for users to dislike the applications developed using this approach.  The demand for this approach was reduced, after the introduction of AJAX and the evolvement of related JS-based TTs. The second approach uses the JS-based TTs for the client-components [5]. This approach uses standard browser-based development languages: HTML and  CSS for GUIs,  and JS for behavior/processing development. With the introduction of  HTML  version  5, along with CSS  version  3,  the capabilities of JS-based client-components were increased. At present,  JS has become powerful as the de facto application development language of HTML, and the JS-based  TTs have become the default for the browser-based RiWAs.  With compatible supplementary frameworks/libraries like Bootstrap  [14]  for  GUI development,  jQuery  [15]  and  AngularJS  [16] for client-component development,  comprehensive enhanced features can be developed. The third approach is the least publicized, which is known as the browser-based approach  [5].  XUL language from Mozilla foundation can be given as an example of this approach. This approach and related TTs are not considered in this paper since it is not a widely used approach.

 2) TTs for the non-browser-based client-components of RiWAs The standard desktop application development TTs like JAVA or.Net and related libraries/frameworks can be utilized for non-browser-based client-components development. For DC development, these frameworks may contain their own tools or some third-party frameworks/libraries can be incorporated. The  TTs discussed under the proprietary plugin based approach  (in  Section  IV.1.a) also have the capability of developing non-browser-based client-components,  which are executed on dedicated runtimes; for example, Flash/Flex [13] use the Flash player or Adobe AIR runtimes. They are usually augmented with rich tools for developing communication connectors to utilize the service of Web. Nowadays, mobile apps also communicate with server-components thus, they can be seen as the client-components of  RiWAs.  Popular mobile development frameworks like Android and IOS encompass communication development tools into their packages. Additionally,  even devices in  IoT based systems can be exploited as client components of RiWAs. Therefore, related TTs like Arduino Programming Language [17] for Arduino devices, Python for Raspberry Pi devices [18], and related frameworks/libraries/protocols like MQTT  [19]  [20]  can also be listed under the non-browser-based client-component development TTs.

TTs for the Server-Components of RiWAs 

The server-components of RiWAs are similar to Web-based applications [2].  Additionally, in server-side,  they need a dedicated component (s) for handling DC.  Fig.  2 illustrates the taxonomy for the server-component (s) development TTs of RiWAs.  The  ―Web application ‖  node, represents the standard server-side development TTs such as PHP, JAVA, ASP.Net, Python,  etc.  and related frameworks/Libraries like CodeIgniter for PHP [21], Struts for JAVA [22], etc.



Fig. 2. Taxonomy for Server-component(s) development TTs of RiWAs.

 The Web services use dedicated TTs such as SOAP [23], REST [24], and frameworks/libraries like JAX-WS [25] and JAX-RS  [26]  for  JAVA, Slim for PHP  [27],  etc.  The behavior of the web services is different from the Web applications in the context of service exposure to other components via Application Program Interfaces (API). The  Enterprise  Service  Bus  (ESB)  in  Service Oriented Architecture (SOA) [28] or similar concepts can be used to extend the standalone RiWAs into multi-tire RiWAs using dedicated  TTs.  The concept of cloud computing  [29]  can also be related to these TTs, where the cloud-based systems provide a platform to deliver a service oriented functionalities.  The concepts of Web services,  SOA,  and cloud computing incorporate wide and self-contained domains, which the deep discussions are intentionally avoided in this paper. In the given taxonomy for the server-component (s)  of RiWAs, all the types of TTs are supposed to be contained with DC implementation tools. C. TTs for the Connector Elements of RiWAs Connector development TTs can be seen as the core of RiWAs development TTs.  In addition to the connector of Web-based applications,  the connectors in RiWAs incorporate  DC, where both the client and server should contain components for handling  DC.  For the communication in RiWAs, the union of the communication development TTs of traditional Web-based systems and the DC development TTs is accepted.



 Fig.  3 illustrates the taxonomy for the TTs for the communication in connectors of RiWAs.

 In this taxonomy, we included the  DC TTs identified via a deep literature survey.  If the client-component is non-browser-based,  regular HTTP communication may not be required. Instead, all the communication could be accomplished using DC.  For browser-based client-components, there is an approach of developing all the features in a  single Web page,  called single page paradigm. In such applications, other than the initial request for the Web page – which contains all the client-components – for rest of the communication, only DC can be used. For other standard RiWAs,  a combination of regular  HTTP  requests  –  via  HTML  hyperlinks,  JS redirections, or forms submission – and DC can be utilized, according to the requirements and the delivery of the features aligning to the system design. After the introduction of AJAX/XHR  [30] (SPDC  [3]), the concept of the DC had been applied in some other TTs for both data pull and push modes, and each TT  is associated with its own set of pros and cons [31]. These DC TTs can be mainly classified under data-pull and data-push modes. The main limitation of the SPDC technique is that it supports only data-pull mode, therefore it does not suit for real-time data communication as in publisher-subscriber model or any other data-push concepts [31].  Several techniques had been introduced to simulate data-push using SPDC; some of them – like long-polling and streaming [32] –  use the same XHR object as SPDC, thus also called reverse-AJAX.  Later,  a true data-push protocol named Server-Sent  Events  (SSE)  [33] was introduced, which is unidirectional, from the server to the client; however, it did not become much popular.  An advanced bi-directional  DC protocol named WebSocket  (WS)  was introduced in 2011 [34], which supports both data pull and push modes, and it gained the attraction of the Web engineers. A communication connector has two ends, usually one end in the client-side and the other end in the server. Therefore,  once  DC  TT(s)  is/are selected for a RiWA, compatibility of both the client and server TTs towards developing the selected  DC  TT(s)  should be assured.  For XHR [35] based TTs like SPDC/AJAX, Polling, and  Long polling,  a  framework like jQuery [15] provides enough utilities for the browser-based client-side components, where standard server-side TTs like JAVA or PHP natively provides sufficient support.  For much advanced WS, dedicated frameworks/libraries like socket.io  [36]  for browser-based JS clients, Ratchet [37] for PHP, spring [38] for JAVA, and Tornado [39] for python can be used.

 TTs for the data element

Fig. 4 shows the taxonomy for the TTs used to prepare the data for communication – mainly for DC.



Fig. 4. Taxonomy for communication data TTs of RiWAs.

The URL-based technique represents the techniques like query string [40], [41] and REST API [42], [24]. Plain text can be considered as a word, sentence, paragraph, or even an essay,  written in natural language. Markup/Wrapped node denotes the data wrapped by any markup language like XML  [43]  or even  HTML  or wrapped by other TTs like JSON [44]. The  File node covers a range of file types and formats, including text, image, audio, video files. When selecting a TT to prepare data for DC, not only the suitability of the TT for the target data type but also the final size of the prepared data also matters. The size of the data directly affects the communication speed,  which is an important fact towards improving the user experience of RiWAs. Furthermore, the size of the data may affect some other aspects like network bandwidth.  Therefore,  careful understanding of the requirements is recommended in the direction of selecting  TT(s) for the data element of the RiWAs.

The Advantages of Delta Modulation

High SNR Benefit

Delta modulation offers a higher signal-to-noise ratio than other conventional modulation techniques. SNR is the strength ratio between data and noise within a transmitted signal and is calculated in the units of decibels. In data communications, signal power is always inversely proportional to the noise power, which means that higher signal power results in higher SNR. Other common modulation techniques such as pulse code modulation and differential pulse code modulation have lower SNR compared to delta modulation.

Lower Bandwidth Consumption

Delta modulation offers a significant benefit of lower channel bandwidth consumption. The bandwidth of a channel is the range of frequencies allowed for a signal to transmit data. This feature is crucial in data communications because increasing bandwidth directly hikes the cost and management of a transmission network. Delta modulation provides the benefit of lower bandwidth consumption, which makes the process of data communications more cost-effective.

Cost Effective Systems

The cost-effectiveness of delta modulation is down to the transmission technique, which employs sending one binary bit as a carrier pulse with one sample of digitized data. This technique lowers the bandwidth of the transmission channel, which eases the burden on the network engineers, managers, and architects who design and implement the modulation system.

Feedback Mechanism

Unlike PCM and DPCM, delta modulation gives the additional benefit of data delivery feedback to the transmitters. This indicates that systems designed over delta modulation consider delivery of data bits as the most important task rather than checking for quality and robustness. For this reason, delta modulation is only used in voice communications rather than networks that require quality-intensive images, video and text data.

Synchronous vs. asynchronous communication

Advantages & Disadvantages of Innovative Technology

• Growing Your Markets

• Reducing Your Costs

• Getting Timely Information

• Lowered Worker Morale

• Set-up Costs

• Early Adopter Blues

A Brief History of Ajax

The XHR History 

Despite its nature as a single-threaded language, one of JavaScript’s greatest strengths is its ability to make asynchronous requests — AJAX.

Take an application like Instagram or Pinterest for example. How is it that I can continue scrolling forever and ever, without a page reload, and content continues to show up? What’s happening behind the scenes is this asynchronous request to a server that does not end up disturbing the user? Around 2005 (when the term AJAX was coined), this was pretty revolutionary. Since then, new technologies have been built on top of older ones to create a more useful, faster web.



"The Greek hero Ajax was good friends with Achilles during the Trojan War until Odysseus made a request for Achilles’ armor"

How Did We Get There Though? Enter XHR

On Chrome or other browsers, if you were to inspect any page, you could head over to the Network tab, then notice a sub-tab called XHR. Within this tab, you could see the status of requests, how long requests take, and plenty more. In fact, this tab becomes more interesting when you use it on a page like mentioned above (Instagram or Pinterest), because you could actually see AJAX at work, every time the page hits the bottom and sends another request to the server.

But how did this all start?

XHR is short for XMLHTTP Request. While developed by Microsoft’s Outlook Web Access, some of the earliest instances of this type of request were used in your Gmail inbox. It was pretty revolutionary to see your inbox update without having to refresh your page. The way it worked was every 20–30 seconds, a new request was sent to see whether or not you had new mail.

How exactly do you write this request:

var XHR = new XMLHttpRequest();
XHR.onreadystatechange = function() {
  if(XHR.readyState == 4) {
    if(XHR.status == 200) {
      console.log(XHR.responseText);
    } else {
      console.log("Error!");
    }
  }
}
XHR.open("GET", "url");
XHR.send();


The code above is a lot to wrap your head around, but remember, this is before newer, quicker methods were built on top of making requests.

What’s funny about this request is that while XML is written in all-caps, HTTP is not — probably done just to keep you confused. Another unfamiliar part of this piece of code is line 3: what is the readyState and why should it equal 4? Ready state is a property and giving it the label of 4 is a way of signaling that the fetch operation is complete.

Fetch

Making a request can be done in a lot of ways. Its the standard way of computers interacting with one another. So it’s only right that the bulky code from above was eventually built upon. Fetching for data is done in a much more condensed way (seen below) using promises that can be chained and made much more complex.


fetch(url)
  .then(function(res){
    console.log(res);
  })
  .catch(function(error){
    console.log(error);
  });
});


What’s cool about the Fetch request is that it provides options that could be included that weren’t initially possible when the XHR was running the show. Observe below, the same fetch request, only now with an additional object that contains a POST request, as opposed to the default GET we’ve been seeing so far.

fetch(url, {
      method: 'POST',
      body: JSON.stringify({
         username: 'Ajax_Hero_123',
         password: 'iwantarmor',
    })
  })
  .then(function(res){
    console.log(res);
  })
  .catch(function(error){
    console.log(error);
  });
});


Fetch’s biggest drawback is browser compatibility, most notably with Internet Explorer. But the main takeaway is that it made the XHR smoother and more concise and allowed for more options. Like many other parts of the web, it’s a perfect example of how these technologies weren’t made in a vacuum, rather, in conjunction with one another. Which brings us to the next part of the journey.

Dollar Signs and other Third Parties

If you’ve heard of JavaScript, chances are, you’ve come across jQuery, the most popular third-party library of all time. While anything can be done in vanilla JavaScript, jQuery’s ability to create more concise code is huge, most notably when making an AJAX request.

Remember that big chunk of code up top, where we made an XML HTTP Request that took multiple lines of code, an if statement to check what readyState we were in, an if statement to make sure we were getting back a 200 status, parsing of the JSON data we received, and a dot send to finally make sure the code does what it is supposed to do?

Here is the same code, done with jQuery:

$.getJSON('/my/url', function(data) {
});

I would say that’s an improvement.

If you aren’t familiar with jQuery, also note that any instance of a dollar sign can be substituted for the word jQuery. My impression is that time is money, and saving you time from writing that big chunk of code would allow you to waste your time in other ways, hence the dollar sign.

jQuery is a fantastic library for many reasons, including making AJAX requests. It was created in 2006 and has since taken off. But what if you only wanted to use jQuery for these requests but nothing else? For this, there are other third parties libraries, such as Axios, whose main focus is making a request and nothing else. So, if you don’t need jQuery to make that fadeIn animation, your code will thank you for using something a little more lightweight.

Here is what Axios looks like in practice:

axios.get(url)
.then(function(res){
  console.log(res.data);
})
.catch(function(error){
  console.log(error);
})

Axios has the distinction of being able to make HTTP requests from Node.js. It also automatically parses JSON data, so there is no need to include an extra line of code that does such in a promise.

Wrapping up, it’s amazing to see how far the web has gone in a bit over a decade. These four ways of making requests are all just XML HTTP requests, as you could tell within your developer tools, but carry more capabilities (such as streaming, something not in the initial XHR back in 2005) and will only continue to get better with more cool libraries.

The main function of the DC bus in a variable frequency drive

The DC bus in a VFD has found its usage as the technology has evolved. Some of the applications of DC bus,

• Common DC applications where a single rectifier unit acts a source of power to many inverter units through common DC bus. These inverters units can be connected to many motors.

• Using the DC bus as a discharge medium in the case of faster braking of the load. A resistor connected to DC bus can act as a brake resistor which dissipates surge power generated by the fast decelerating load. This protects the other parts of the VFD.

• Powering up VFDs directly using DC terminals bypassing rectifier section. This is similar to 1, but the power source could be from a battery, a solar panel or any other DC source.

jQuery API

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. If you're new to jQuery, we recommend that you check out the jQuery Learning Center.

If you're updating to a newer version of jQuery, be sure to read the release notes published on our blog. If you're coming from a version prior to 1.9, you should check out the 1.9 Upgrade Guide as well.

Note that this is the API documentation for jQuery core. Other projects have API docs in other locations:

• jQuery UI API docs
• jQuery Mobile API docs
• QUnit API docs

Traversing > Miscellaneous Traversing
.add()
Create a new jQuery object with elements added to the set of matched elements.

Traversing > Miscellaneous Traversing
.addBack()
Add the previous set of elements on the stack to the current set, optionally filtered by a selector.

Attributes | Manipulation > Class Attribute | CSS
.addClass()
Adds the specified class(es) to each element in the set of matched elements.

Manipulation > DOM Insertion, Outside
.after()
Insert content, specified by the parameter, after each element in the set of matched elements.

Ajax > Global Ajax Event Handlers
.ajaxComplete()
Register a handler to be called when Ajax requests complete. This is an AjaxEvent.

Ajax > Global Ajax Event Handlers
.ajaxError()
Register a handler to be called when Ajax requests complete with an error. This is an Ajax Event.

Ajax > Global Ajax Event Handlers
.ajaxSend()
Attach a function to be executed before an Ajax request is sent. This is an Ajax Event.

Ajax > Global Ajax Event Handlers
.ajaxStart()
Register a handler to be called when the first Ajax request begins. This is an Ajax Event.

Ajax > Global Ajax Event Handlers
.ajaxStop()
Register a handler to be called when all Ajax requests have completed. This is an Ajax Event.

Ajax > Global Ajax Event Handlers
.ajaxSuccess()
Attach a function to be executed whenever an Ajax request completes successfully. This is an Ajax Event.

Selectors > Basic
All Selector (“*”)
Selects all elements.

Deprecated > Deprecated 1.8 | Traversing > Miscellaneous Traversing | Removed
.andSelf()
Add the previous set of elements on the stack to the current set.

Effects > Custom
.animate()
Perform a custom animation of a set of CSS properties.

Selectors > Basic Filter | Selectors > jQuery Extensions
: animated Selector
Select all elements that are in the progress of an animation at the time the selector is run.

Manipulation > DOM Insertion, Inside
.append()
Insert content, specified by the parameter, to the end of each element in the set of matched elements.

Manipulation > DOM Insertion, Inside
.appendTo()
Insert every element in the set of matched elements to the end of the target.

Attributes | Manipulation > General Attributes
.attr()
Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.

Selectors > Attribute
Attribute Contains Prefix Selector [name|=”value”]
Selects elements that have the specified attribute with a value either equal to a given string or starting with that string followed by a hyphen (-).

Selectors > Attribute
Attribute Contains Selector [name*=”value”]
Selects elements that have the specified attribute with a value containing a given substring.

Selectors > Attribute
Attribute Contains Word Selector [name~=” value”]
Selects elements that have the specified attribute with a value containing a given word, delimited by spaces.

Selectors > Attribute
Attribute Ends With Selector [name$=” value”]
Selects elements that have the specified attribute with a value ending exactly with a given string. The comparison is case sensitive.

Selectors > Attribute
Attribute Equals Selector [name=”value”]
Selects elements that have the specified attribute with a value exactly equal to a certain value.

Selectors > Attribute | Selectors > jQuery Extensions
Attribute Not Equal Selector [name!=” value”]
Select elements that either don’t have the specified attribute or do have the specified attribute but not with a certain value.

Selectors > Attribute
Attribute Starts With Selector [name^=” value”]
Selects elements that have the specified attribute with a value beginning exactly with a given string.

Manipulation > DOM Insertion, Outside
.before()
Insert content, specified by the parameter, before each element in the set of matched elements.

Deprecated > Deprecated 3.0 | Events > Event Handler Attachment
.bind()
Attach a handler to an event for the elements.

Events > Form Events | Forms
.blur()
Bind an event handler to the “blur” JavaScript event, or trigger that event on an element.

Selectors > Form | Selectors > jQuery Extensions
:button Selector
Selects all button elements and elements of type button.

Callbacks Object
callbacks.add()
Add a callback or a collection of callbacks to a callback list.

Callbacks Object
callbacks.disable()
Disable a callback list from doing anything more.

Callbacks Object
callbacks.disabled()
Determine if the callbacks list has been disabled.

Callbacks Object
callbacks.empty()
Remove all of the callbacks from a list.

Callbacks Object
callbacks.fire()
Call all of the callbacks with the given arguments.

Callbacks Object
callbacks.fired()
Determine if the callbacks have already been called at least once.

Callbacks Object
callbacks.fireWith()
Call all callbacks in a list with the given context and arguments.

Callbacks Object
callbacks.has()
Determine whether or not the list has any callbacks attached. If a callback is provided as an argument, determine whether it is in a list.

Callbacks Object
callbacks.lock()
Lock a callback list in its current state.

Callbacks Object
callbacks.locked()
Determine if the callbacks list has been locked.

Callbacks Object
callbacks.remove()
Remove a callback or a collection of callbacks from a callback list.

Events > Form Events | Forms
.change()
Bind an event handler to the “change” JavaScript event, or trigger that event on an element.

Selectors > Form | Selectors > jQuery Extensions
:checkbox Selector
Selects all elements of type checkbox.

Selectors > Form
: checked Selector
Matches all elements that are checked or selected.

Selectors > Hierarchy
Child Selector (“parent > child”)
Selects all direct child elements specified by “child” of elements specified by “parent”.

Traversing > Tree Traversal
.children()
Get the children of each element in the set of matched elements, optionally filtered by a selector.

Selectors > Basic
Class Selector (“.class”)
Selects all elements with the given class.

Effects > Custom | Data | Utilities
.clearQueue()
Remove from the queue all items that have not yet been run.

Events > Mouse Events
.click()
Bind an event handler to the “click” JavaScript event, or trigger that event on an element.

Manipulation > Copying
.clone()
Create a deep copy of the set of matched elements.

Traversing > Tree Traversal
.closest()
For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

Selectors > Content Filter
:contains() Selector
Select all elements that contain the specified text.

Traversing > Miscellaneous Traversing
.contents()
Get the children of each element in the set of matched elements, including text and comment nodes.

Deprecated > Deprecated 1.10 | Internals | Properties > Properties of jQuery Object Instances | Removed
.context
The DOM node context originally passed to jQuery(); if none was passed then context will likely be the document.

Events > Mouse Events
.contextmenu()
Bind an event handler to the “context menu” JavaScript event, or trigger that event on an element.

CSS | Manipulation > Style Properties
.css()
Get the value of a computed style property for the first element in the set of matched elements or set one or more CSS properties for every matched element.

Data | Miscellaneous > Data Storage
.data()
Store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements.

Events > Mouse Events
.dblclick()
Bind an event handler to the “dblclick” JavaScript event, or trigger that event on an element.

Deferred Object
deferred.always()
Add handlers to be called when the Deferred object is either resolved or rejected.

Deferred Object
deferred.catch()
Add handlers to be called when the Deferred object is rejected.

Deferred Object
deferred.done()
Add handlers to be called when the Deferred object is resolved.

Deferred Object
deferred.fail()
Add handlers to be called when the Deferred object is rejected.

Deferred Object | Deprecated > Deprecated 1.7 | Removed
deferred.isRejected()
Determine whether a Deferred object has been rejected.

Deferred Object | Deprecated > Deprecated 1.7 | Removed
deferred.isResolved()
Determine whether a Deferred object has been resolved.

Deferred Object
deferred.notify()
Call the progressCallbacks on a Deferred object with the given args.

Deferred Object
deferred.notifyWith()
Call the progressCallbacks on a Deferred object with the given context and args.

Deferred Object | Deprecated > Deprecated 1.8
deferred.pipe()
Utility method to filter and/or chain Deferreds.

Deferred Object
deferred.progress()
Add handlers to be called when the Deferred object generates progress notifications.

Deferred Object
deferred.promise()
Return a Deferred’s Promise object.

Deferred Object
deferred.reject()
Reject a Deferred object and call any failCallbacks with the given args.

Deferred Object
deferred.rejectWith()
Reject a Deferred object and call any failCallbacks with the given context and args.

Deferred Object
deferred.resolve()
Resolve a Deferred object and call any doneCallbacks with the given args.

Deferred Object
deferred.resolveWith()
Resolve a Deferred object and call any doneCallbacks with the given context and args.

Deferred Object
deferred.state()
Determine the current state of a Deferred object.

Deferred Object
deferred.then()
Add handlers to be called when the Deferred object is resolved, rejected, or still in progress.

Effects > Custom
.delay()
Set a timer to delay execution of subsequent items in the queue.

Deprecated > Deprecated 3.0 | Events > Event Handler Attachment
.delegate()
Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.

Effects > Custom | Data | Utilities
.dequeue()
Execute the next function on the queue for the matched elements.

Selectors > Hierarchy
Descendant Selector (“ancestor-descendant”)
Selects all elements that are descendants of a given ancestor.

Manipulation > DOM Removal
.detach()
Remove the set of matched elements from the DOM.

Deprecated > Deprecated 1.7 | Events > Event Handler Attachment | Removed
.die()
Remove event handlers previously attached using .live() from the elements.

Selectors > Form
: disabled Selector
Selects all elements that are disabled.

Miscellaneous > Collection Manipulation | Traversing
.each()
Iterate over a jQuery object, executing a function for each matched element.

Selectors > Basic
Element Selector (“element”)
Selects all elements with the given tag name.

Manipulation > DOM Removal
.empty()
Remove all child nodes of the set of matched elements from the DOM.

Selectors > Content Filter
: empty Selector
Select all elements that have no children (including text nodes).

Selectors > Form
: enabled Selector
Selects all elements that are enabled.

Traversing > Miscellaneous Traversing
.end()
End the most recent filtering operation in the current chain and return the set of matched elements to its previous state.

Traversing > Filtering
.eq()
Reduce the set of matched elements to the one at the specified index.

Selectors > Basic Filter | Selectors > jQuery Extensions
:eq() Selector
Select the element at index n within the matched set.

Events > Browser Events | Deprecated > Deprecated 1.8 | Removed
.error()
Bind an event handler to the “error” JavaScript event.

Selectors > Basic Filter | Selectors > jQuery Extensions
:even Selector
Selects even elements, zero-indexed. See also odd.

Events > Event Object
event.currentTarget
The current DOM element within the event bubbling phase.

Events > Event Object
event.data
An optional object of data passed to an event method when the current executing handler is bound.

Events > Event Object | Events
event.delegateTarget
The element where the currently-called jQuery event handler was attached.

Events > Event Object
event.isDefaultPrevented()
Returns whether event.preventDefault() was ever called on this event object.

Events > Event Object
event.isImmediatePropagationStopped()
Returns whether event.stopImmediatePropagation() was ever called on this event object.

Events > Event Object
event.isPropagationStopped()
Returns whether event.stopPropagation() was ever called on this event object.

Events > Event Object
event.metaKey
Indicates whether the META key was pressed when the event fired.

Events > Event Object
event.namespace
The namespace specified when the event was triggered.

Events > Event Object
event.pageX
The mouse position relative to the left edge of the document.

Events > Event Object
event.pageY
The mouse position relative to the top edge of the document.

Events > Event Object
event.preventDefault()
If this method is called, the default action of the event will not be triggered.

Events > Event Object
event.relatedTarget
The other DOM element involved in the event, if any.

Events > Event Object
event.result
The last value returned by an event handler that was triggered by this event, unless the value was undefined.

Events > Event Object
event.stopImmediatePropagation()
Keeps the rest of the handlers from being executed and prevents the event from bubbling up the DOM tree.

Events > Event Object
event.stopPropagation()
Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

Events > Event Object
event.target
The DOM element that initiated the event.

Events > Event Object
event.timeStamp
The difference in milliseconds between the time the browser created the event and January 1, 1970.

Events > Event Object
event.type
Describes the nature of the event.

Events > Event Object
event.which
For key or mouse events, this property indicates the specific key or button that was pressed.

Effects > Fading
.fadeIn()
Display the matched elements by fading them to opaque.

Effects > Fading
.fadeOut()
Hide the matched elements by fading them to transparent.

Effects > Fading
.fadeTo()
Adjust the opacity of the matched elements.

Effects | Effects > Fading
.fadeToggle()
Display or hide the matched elements by animating their opacity.

Selectors > Form | Selectors > jQuery Extensions
:file Selector
Selects all elements of type file.

Traversing > Filtering
.filter()
Reduce the set of matched elements to those that match the selector or pass the function’s test.

Traversing > Tree Traversal
.find()
Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

Effects > Custom
.finish()
Stop the currently-running animation, remove all queued animations, and complete all animations for the matched elements.

Traversing > Filtering
.first()
Reduce the set of matched elements to the first in the set.

Selectors > Child Filter
:first-child Selector
Selects all elements that are the first child of their parent.

Selectors > Child Filter
:first-of-type Selector
Selects all elements that are the first among siblings of the same element name.

Selectors > Basic Filter | Selectors > jQuery Extensions
:first Selector
Selects the first matched DOM element.

Events > Form Events | Forms
.focus()
Bind an event handler to the “focus” JavaScript event, or trigger that event on an element.

Selectors > Basic Filter | Selectors > Form
:focus Selector
Selects element if it is currently focused.

Events > Form Events | Forms
.focusin()
Bind an event handler to the “focusin” event.

Events > Form Events | Forms
.focusout()
Bind an event handler to the “focus out” JavaScript event.

Miscellaneous > DOM Element Methods
.get()
Retrieve the DOM elements matched by the jQuery object.

Selectors > Basic Filter | Selectors > jQuery Extensions
:gt() Selector
Select all elements at an index greater than index within the matched set.

Traversing > Filtering
.has()
Reduce the set of matched elements to those that have a descendant that matches the selector or DOM element.

Selectors > Attribute
Has Attribute Selector [name]
Selects elements that have the specified attribute, with any value.

Selectors > Content Filter | Selectors > jQuery Extensions
:has() Selector
Selects elements which contain at least one element that matches the specified selector.

Attributes | Manipulation > Class Attribute | CSS
.hasClass()
Determine whether any of the matched elements are assigned the given class.

Selectors > Basic Filter | Selectors > jQuery Extensions
:header Selector
Selects all elements that are headers, like h1, h2, h3 and so on.

CSS | Dimensions | Manipulation > Style Properties
.height()
Get the current computed height for the first element in the set of matched elements or set the height of every matched element.

Selectors > jQuery Extensions | Selectors > Visibility Filter
:hidden Selector
Selects all elements that are hidden.

Effects > Basics
.hide()
Hide the matched elements.

Events > Mouse Events
.hover()
Bind one or two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.

Attributes | Manipulation > DOM Insertion, Inside
.html()
Get the HTML contents of the first element in the set of matched elements or set the HTML contents of every matched element.

Selectors > Basic
ID Selector (“#id”)
Selects a single element with the given id attribute.

Selectors > Form | Selectors > jQuery Extensions
:image Selector
Selects all elements of type image.

Miscellaneous > DOM Element Methods
.index()
Search for a given element from among the matched elements.

CSS | Dimensions | Manipulation > Style Properties
.innerHeight()
Get the current computed inner height (including padding but not the border) for the first element in the set of matched elements or set the inner height of every matched element.

CSS | Dimensions | Manipulation > Style Properties
.innerWidth()
Get the current computed inner width (including padding but not the border) for the first element in the set of matched elements or set the inner width of every matched element.

Selectors > Form | Selectors > jQuery Extensions
:input Selector
Selects all input, textarea, select and button elements.

Manipulation > DOM Insertion, Outside
.insertAfter()
Insert every element in the set of matched elements after the target.

Manipulation > DOM Insertion, Outside
.insertBefore()
Insert every element in the set of matched elements before the target.

Traversing > Filtering
.is()
Check the current matched a set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments.

Core
jQuery()
Return a collection of matched elements either found in the DOM based on the passed argument(s) or created by passing an HTML string.

Internals | Properties > Properties of jQuery Object Instances
.jquery
A string containing the jQuery version number.

Ajax > Low-Level Interface
jQuery.ajax()
Perform an asynchronous HTTP (Ajax) request.

Ajax > Low-Level Interface
jQuery.ajaxPrefilter()
Handle custom Ajax options or modify existing options before each request is sent and before they are processed by $.ajax().

Ajax > Low-Level Interface
jQuery.ajaxSetup()
Set default values for future Ajax requests. Its use is not recommended.

Ajax > Low-Level Interface
jQuery.ajaxTransport()
Creates an object that handles the actual transmission of Ajax data.

Deprecated > Deprecated 1.3 | Removed | Utilities
jQuery.boxModel
States if the current page, in the user’s browser, is being rendered using the W3C CSS Box Model. This property was removed in jQuery 1.8. Please try to use feature detection instead.

Deprecated > Deprecated 1.3 | Properties > Properties of the Global jQuery Object | Removed | Utilities
jQuery.browser
Contains flags for the user agent, read from navigator.userAgent. This property was removed in jQuery 1.9 and is available only through the jQuery.migrate plugin. Please try to use feature detection instead.

Callbacks Object
jQuery.Callbacks()
A multi-purpose callbacks list object that provides a powerful way to manage callback lists.

Utilities
jQuery.contains()
Check to see if a DOM element is a descendant of another DOM element.

CSS
jQuery.cssHooks
Hook directly into jQuery to override how particular CSS properties are retrieved or set, normalize CSS property naming, or create custom properties.

CSS | Manipulation > Style Properties
jQuery.cssNumber
An object containing all CSS properties that may be used without a unit. The .css() method uses this object to see if it may append px to unitless values.

Data | Utilities
jQuery.data()
Store arbitrary data associated with the specified element and/or return the value that was set.

Deferred Object
jQuery.Deferred()
A factory function that returns a chainable utility object with methods to register multiple callbacks into callback queues, invoke callback queues, and relay the success or failure state of any synchronous or asynchronous function.

Data | Utilities
jQuery.dequeue()
Execute the next function on the queue for the matched element.

Utilities
jQuery.each()
A generic iterator function, which can be used to seamlessly iterate over both objects and arrays. Arrays and array-like objects with a length property (such as a function’s arguments object) are iterated by numeric index, from 0 to length-1. Other objects are iterated via their named properties.

Internals
jQuery.error()
Takes a string and throws an exception containing it.

CSS
jQuery.escapeSelector()
Escapes any character that has a special meaning in a CSS selector.

Utilities
jQuery.extend()
Merge the contents of two or more objects together into the first object.

Utilities
jQuery.fn.extend()
Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.

Effects > Custom | Deprecated > Deprecated 3.0 | Properties > Properties of the Global jQuery Object
jQuery.fx.interval
The rate (in milliseconds) at which animations fire.

Effects > Custom | Properties > Properties of the Global jQuery Object
jQuery.fx.off
Globally disable all animations.

Ajax > Shorthand Methods
jQuery.get()
Load data from the server using a HTTP GET request.

Ajax > Shorthand Methods
jQuery.getJSON()
Load JSON-encoded data from the server using a GET HTTP request.

Ajax > Shorthand Methods
jQuery.getScript()
Load a JavaScript file from the server using a GET HTTP request, then execute it.

Utilities
jQuery.globalEval()
Execute some JavaScript code globally.

Utilities
jQuery.grep()
Finds the elements of an array which satisfy a filter function. The original array is not affected.

Data
jQuery.hasData()
Determine whether an element has any jQuery data associated with it.

Core | Events > Document Loading | Properties > Properties of the Global jQuery Object
jQuery.holdReady()
Holds or releases the execution of jQuery’s ready event.

Manipulation
jQuery.htmlPrefilter()
Modify and filter HTML strings passed through jQuery manipulation methods.

Utilities
jQuery.inArray()
Search for a specified value within an array and return its index (or -1 if not found).

Utilities
jQuery.isArray()
Determine whether the argument is an array.

Utilities
jQuery.isEmptyObject()
Check to see if an object is empty (contains no enumerable properties).

Deprecated > Deprecated 3.3 | Utilities
jQuery.isFunction()
Determines if its argument is callable as a function.

Utilities
jQuery.isNumeric()
Determines whether its argument represents a JavaScript number.

Utilities
jQuery.isPlainObject()
Check to see if an object is a plain object (created using “{}” or “new Object”).

Deprecated > Deprecated 3.3 | Utilities
jQuery.isWindow()
Determine whether the argument is a window.

Utilities
jQuery.isXMLDoc()
Check to see if a DOM node is within an XML document (or is an XML document).

Utilities
jQuery.makeArray()
Convert an array-like object into a true JavaScript array.

Utilities
jQuery.map()
Translate all items in an array or object to a new array of items.

Utilities
jQuery.merge()
Merge the contents of two arrays together into the first array.

Core | Miscellaneous > Setup Methods
jQuery.noConflict()
Relinquish jQuery’s control of the $ variable.

Utilities
jQuery.noop()
An empty function.

Utilities
jQuery.now()
Return a number representing the current time.

Miscellaneous > Collection Manipulation | Forms | Ajax > Helper Functions
jQuery.param()
Create a serialized representation of an array, a plain object, or a jQuery object suitable for use in a URL query string or Ajax request. In case a jQuery object is passed, it should contain input elements with name/value properties.

Utilities
jQuery.parseHTML()
Parses a string into an array of DOM nodes.

Deprecated > Deprecated 3.0 | Utilities
jQuery.parseJSON()
Takes a well-formed JSON string and returns the resulting JavaScript value.

Utilities
jQuery.parseXML()
Parses a string into an XML document.

Ajax > Shorthand Methods
jQuery.post()
Load data from the server using a HTTP POST request.

Events > Event Handler Attachment | Utilities
jQuery.proxy()
Takes a function and returns a new one that will always have a particular context.

Data | Utilities
jQuery.queue()
Show or manipulate the queue of functions to be executed on the matched element.

Core | Events > Document Loading | Properties > Properties of the Global jQuery Object
jQuery.ready
A Promise-like object (or “thenable”) that resolves when the document is ready.

Core
jQuery.readyException()
Handles errors thrown synchronously in functions wrapped in jQuery().

Data | Utilities
jQuery.removeData()
Remove a previously-stored piece of data.

Effects > Custom
jQuery.speed
Creates an object containing a set of properties ready to be used in the definition of custom animations.

Core | Deprecated > Deprecated 1.7 | Removed
jQuery.sub()
Creates a new copy of jQuery whose properties and methods can be modified without affecting the original jQuery object.

Deprecated > Deprecated 1.9 | Properties > Properties of the Global jQuery Object | Utilities
jQuery.support
A collection of properties that represent the presence of different browser features or bugs. Intended for jQuery’s internal use; specific properties may be removed when they are no longer needed internally to improve page startup performance. For your own project’s feature-detection needs, we strongly recommend the use of an external library such as Modernizr instead of dependency on properties in jQuery.support.

Utilities
jQuery.trim()
Remove the whitespace from the beginning and end of a string.

Utilities
jQuery.type()
Determine the internal JavaScript [[Class]] of an object.

Deprecated > Deprecated 3.0 | Utilities
jQuery.unique()
Sorts an array of DOM elements, in place, with the duplicates removed. Note that this only works on arrays of DOM elements, not strings or numbers.

Utilities
jQuery.uniqueSort()
Sorts an array of DOM elements, in place, with the duplicates removed. Note that this only works on arrays of DOM elements, not strings or numbers.

Core | Deferred Object
jQuery.when()
Provides a way to execute callback functions based on zero or more Tenable objects, usually Deferred objects that represent asynchronous events.

Events > Keyboard Events
.keydown()
Bind an event handler to the “key down” JavaScript event, or trigger that event on an element.

Events > Keyboard Events
.keypress()
Bind an event handler to the “keypress” JavaScript event, or trigger that event on an element.

Events > Keyboard Events
.keyup()
Bind an event handler to the “keyup” JavaScript event, or trigger that event on an element.

Selectors > Basic Filter
:lang() Selector
Selects all elements of the specified language.

Traversing > Filtering
.last()
Reduce the set of matched elements to the final one in the set.

Selectors > Child Filter
:last-child Selector
Selects all elements that are the last child of their parent.

Selectors > Child Filter
:last-of-type Selector
Selects all elements that are the last among siblings of the same element name.

Selectors > Basic Filter | Selectors > jQuery Extensions
:last Selector
Selects the last matched element.

Properties > Properties of jQuery Object Instances
.length
The number of elements in the jQuery object.

Deprecated > Deprecated 1.7 | Events > Event Handler Attachment | Removed
.live()
Attach an event handler for all elements which match the current selector, now and in the future.

Ajax > Shorthand Methods
.load()
Load data from the server and place the returned HTML into the matched elements.

Deprecated > Deprecated 1.8 | Events > Document Loading | Removed
.load()
Bind an event handler to the “load” JavaScript event.

Selectors > Basic Filter | Selectors > jQuery Extensions
:lt() Selector
Select all elements at an index less than index within the matched set.

Traversing > Filtering
.map()
Pass each element in the current matched set through a function, producing a new jQuery object containing the return values.

Events > Mouse Events
.mousedown()
Bind an event handler to the “mousedown” JavaScript event, or trigger that event on an element.

Events > Mouse Events
.mouseenter()
Bind an event handler to be fired when the mouse enters an element, or trigger that handler on an element.

Events > Mouse Events
.mouseleave()
Bind an event handler to be fired when the mouse leaves an element, or trigger that handler on an element.

Events > Mouse Events
.mousemove()
Bind an event handler to the “mousemove” JavaScript event, or trigger that event on an element.

Events > Mouse Events
.mouseout()
Bind an event handler to the “mouseout” JavaScript event, or trigger that event on an element.

Events > Mouse Events
.mouseover()
Bind an event handler to the “mouseover” JavaScript event, or trigger that event on an element.

Events > Mouse Events
.mouseup()
Bind an event handler to the “mouse up” JavaScript event, or trigger that event on an element.

Selectors > Attribute
Multiple Attribute Selector [name=”value”][name2=”value2″]
Matches elements that match all of the specified attribute filters.

Selectors > Basic
Multiple Selector (“selector1, selector2, selectorN”)
Selects the combined results of all the specified selectors.

Traversing > Tree Traversal
.next()
Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

Selectors > Hierarchy
Next Adjacent Selector (“prev + next”)
Selects all next elements matching “next” that are immediately preceded by a sibling “prev”.

Selectors > Hierarchy
Next Siblings Selector (“prev ~ siblings”)
Selects all sibling elements that follow after the “prev” element, have the same parent and match the filtering “siblings” selector.

Traversing > Tree Traversal
.nextAll()
Get all following siblings of each element in the set of matched elements, optionally filtered by a selector.

Traversing > Tree Traversal
.nextUntil()
Get all following siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object passed.

Traversing > Filtering | Traversing > Miscellaneous Traversing
.not()
Remove elements from the set of matched elements.

Selectors > Basic Filter
:not() Selector
Selects all elements that do not match the given selector.

Selectors > Child Filter
:nth-child() Selector
Selects all elements that are the nth-child of their parent.

Selectors > Child Filter
:nth-last-child() Selector
Selects all elements that are the nth-child of their parent, counting from the last element to the first.

Selectors > Child Filter
:nth-last-of-type() Selector
Selects all the elements that are the nth-child of their parent in relation to siblings with the same element name, counting from the last element to the first.

Selectors > Child Filter
:nth-of-type() Selector
Selects all elements that are the nth-child of their parent in relation to siblings with the same element name.

Selectors > Basic Filter | Selectors > jQuery Extensions
:odd Selector
Selects odd elements, zero-indexed. See also even.

Events > Event Handler Attachment
.off()
Remove an event handler.

CSS | Offset | Manipulation > Style Properties
.offset()
Get the current coordinates of the first element, or set the coordinates of every element, in the set of matched elements, relative to the document.

Offset | Traversing > Tree Traversal
.offsetParent()
Get the closest ancestor element that is positioned.

Events > Event Handler Attachment
.on()
Attach an event handler function for one or more events to the selected elements.

Events > Event Handler Attachment
.one()
Attach a handler to an event for the elements. The handler is executed at most once per element per event type.

Selectors > Child Filter
:only-child Selector
Selects all elements that are the only child of their parent.

Selectors > Child Filter
:only-of-type Selector
Selects all elements that have no siblings with the same element name.

CSS | Dimensions | Manipulation > Style Properties
.outerHeight()
Get the current computed outer height (including padding, border, and optionally margin) for the first element in the set of matched elements or set the outer height of every matched element.

CSS | Dimensions | Manipulation > Style Properties
.outerWidth()
Get the current computed outer width (including padding, border, and optionally margin) for the first element in the set of matched elements or set the outer width of every matched element.

Traversing > Tree Traversal
.parent()
Get the parent of each element in the current set of matched elements, optionally filtered by a selector.

Selectors > Content Filter | Selectors > jQuery Extensions
:parent Selector
Select all elements that have at least one child node (either an element or text).

Traversing > Tree Traversal
.parents()
Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector.

Traversing > Tree Traversal
.parentsUntil()
Get the ancestors of each element in the current set of matched elements, up to but not including the element matched by the selector, DOM node, or jQuery object.

Selectors > Form | Selectors > jQuery Extensions
:password Selector
Selects all elements of type password.

CSS | Offset | Manipulation > Style Properties
.position()
Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.

Manipulation > DOM Insertion, Inside
.prepend()
Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.

Manipulation > DOM Insertion, Inside
.prependTo()
Insert every element in the set of matched elements to the beginning of the target.

Traversing > Tree Traversal
.prev()
Get the immediately preceding sibling of each element in the set of matched elements. If a selector is provided, it retrieves the previous sibling only if it matches that selector.

Traversing > Tree Traversal
.prevAll()
Get all preceding siblings of each element in the set of matched elements, optionally filtered by a selector.

Traversing > Tree Traversal
.prevUntil()
Get all preceding siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object.

Deferred Object
.promise()
Return a Promise object to observe when all actions of a certain type bound to the collection, queued or not, have finished.

Attributes | Manipulation > General Attributes
.prop()
Get the value of a property for the first element in the set of matched elements or set one or more properties for every matched element.

Internals
.pushStack()
Add a collection of DOM elements onto the jQuery stack.

Effects > Custom | Data | Utilities
.queue()
Show or manipulate the queue of functions to be executed on the matched elements.

Selectors > Form | Selectors > jQuery Extensions
:radio Selector
Selects all elements of type radio.

Events > Document Loading
.ready()
Specify a function to execute when the DOM is fully loaded.

Manipulation > DOM Removal
.remove()
Remove the set of matched elements from the DOM.

Attributes | Manipulation > General Attributes
.removeAttr()
Remove an attribute from each element in the set of matched elements.

Attributes | Manipulation > Class Attribute | CSS
.removeClass()
Remove a single class, multiple classes, or all classes from each element in the set of matched elements.

Data | Miscellaneous > Data Storage
.removeData()
Remove a previously-stored piece of data.

Attributes | Manipulation > General Attributes
.removeProp()
Remove a property for the set of matched elements.

Manipulation > DOM Replacement
.replaceAll()
Replace each target element with the set of matched elements.

Manipulation > DOM Replacement
.replaceWith()
Replace each element in the set of matched elements with the provided new content and return the set of elements that was removed.

Selectors > Form | Selectors > jQuery Extensions
:reset Selector
Selects all elements of type reset.

Events > Browser Events
.resize()
Bind an event handler to the “resize” JavaScript event, or trigger that event on an element.

Selectors > Basic Filter
: root Selector
Selects the element that is the root of the document.

Events > Browser Events
.scroll()
Bind an event handler to the “scroll” JavaScript event, or trigger that event on an element.

CSS | Offset | Manipulation > Style Properties
.scrollLeft()
Get the current horizontal position of the scroll bar for the first element in the set of matched elements or set the horizontal position of the scroll bar for every matched element.

CSS | Offset | Manipulation > Style Properties
.scrollTop()
Get the current vertical position of the scroll bar for the first element in the set of matched elements or set the vertical position of the scroll bar for every matched element.

Events > Form Events | Forms
.select()
Bind an event handler to the “select” JavaScript event, or trigger that event on an element.

Selectors > Form | Selectors > jQuery Extensions
:selected Selector
Selects all elements that are selected.

Deprecated > Deprecated 1.7 | Internals | Properties > Properties of jQuery Object Instances | Removed
.selector
A selector representing selector passed to jQuery(), if any, when creating the original set.

Forms | Ajax > Helper Functions
.serialize()
Encode a set of form elements as a string for submission.

Forms | Ajax > Helper Functions
.serializeArray()
Encode a set of form elements as an array of names and values.

Effects > Basics
.show()
Display the matched elements.

Traversing > Tree Traversal
.siblings()
Get the siblings of each element in the set of matched elements, optionally filtered by a selector.

Deprecated > Deprecated 1.8 | Miscellaneous > DOM Element Methods | Removed
.size()
Return the number of elements in the jQuery object.

Traversing > Filtering
.slice()
Reduce the set of matched elements to a subset specified by a range of indices.

Effects > Sliding
.slideDown()
Display the matched elements with a sliding motion.

Effects > Sliding
.slideToggle()
Display or hide the matched elements with a sliding motion.

Effects > Sliding
.slideUp()
Hide the matched elements with a sliding motion.

Effects > Custom
.stop()
Stop the currently-running animation on the matched elements.

Events > Form Events | Forms
.submit()
Bind an event handler to the “submit” JavaScript event, or trigger that event on an element.

Selectors > Form | Selectors > jQuery Extensions
:submit Selector
Selects all elements of type submit.

Selectors > Basic Filter
:target Selector
Selects the target element indicated by the fragment identifier of the document’s URI.

Manipulation > DOM Insertion, Inside
.text()
Get the combined text contents of each element in the set of matched elements, including their descendants, or set the text contents of the matched elements.

Selectors > Form | Selectors > jQuery Extensions
:text Selector
Selects all input elements of type text.

Miscellaneous > DOM Element Methods
.toArray()
Retrieve all the elements contained in the jQuery set, as an array.

Effects > Basics
.toggle()
Display or hide the matched elements.

Deprecated > Deprecated 1.8 | Events > Mouse Events | Removed
.toggle()
Bind two or more handlers to the matched elements, to be executed on alternate clicks.

Attributes | Manipulation > Class Attribute | CSS
.toggleClass()
Add or remove one or more classes from each element in the set of matched elements, depending on either the class’s presence or the value of the state argument.

Events > Event Handler Attachment
.trigger()
Execute all handlers and behaviors attached to the matched elements for the given event type.

Events > Event Handler Attachment
.triggerHandler()
Execute all handlers attached to an element for an event.

Deprecated > Deprecated 3.0 | Events > Event Handler Attachment
.unbind()
Remove a previously-attached event handler from the elements.

Deprecated > Deprecated 3.0 | Events > Event Handler Attachment
.undelegate()
Remove a handler from the event for all elements which match the current selector, based upon a specific set of root elements.

Deprecated > Deprecated 1.8 | Events > Document Loading | Removed
.unload()
Bind an event handler to the “unload” JavaScript event.

Manipulation > DOM Insertion, Around | Manipulation > DOM Removal
.unwrap()
Remove the parents of the set of matched elements from the DOM, leaving the matched elements in their place.

Attributes | Forms | Manipulation > General Attributes
.val()
Get the current value of the first element in the set of matched elements or set the value of every matched element.

Selectors > jQuery Extensions | Selectors > Visibility Filter
:visible Selector
Selects all elements that are visible.

CSS | Dimensions | Manipulation > Style Properties
.width()
Get the current computed width for the first element in the set of matched elements or set the width of every matched element.

Manipulation > DOM Insertion, Around
.wrap()
Wrap an HTML structure around each element in the set of matched elements.

Manipulation > DOM Insertion, Around
.wrapAll()
Wrap an HTML structure around all elements in the set of matched elements.

Manipulation > DOM Insertion, Around
.wrapInner()
Wrap an HTML structure around the content of each element in the set of matched elements.

How to Use jQuery’s $.ajax() for Asynchronous HTTP Requests

Without doubt, Ajax has taken web development by storm and it’s one of the most successful paradigms ever. In my article An Introduction to jQuery’s Shorthand Ajax Methods, I discussed some of jQuery’s most used Ajax shorthand methods: $.get(), $.post(), and $.load(). They are convenient methods for making Ajax requests in a few lines of code.

Sometimes, we need more control over the Ajax calls we want to make. For example, we want to specify what should happen in case an Ajax call fails or we need to perform an Ajax request but its result is only needed if retrieved within a certain amount of time. In such situations, we can rely on another function provided by jQuery, called $.ajax(), that is the topic of this tutorial.

The $.ajax() Function

The jQuery $.ajax() function is used to perform an asynchronous HTTP request. It was added to the library a long time ago, existing since version 1.0. The $.ajax() function is what every function discussed in the previously mentioned article calls behind the scene using a preset configuration. The signatures of this function are shown below:

$.ajax(url[, options])
$.ajax([options])


The URL parameter is a string containing the URL you want to reach with the Ajax call, while options is an object literal containing the configuration for the Ajax request.

In its first form, this function performs an Ajax request using the URL parameter and the options specified in options. In the second form, the URL is specified in the options parameter or can be omitted in which case the request is made to the current page.

The list of the options accepted by this function, described in the next section, is very long. So, I’ll keep their description short. In case you want to study in-depth their meaning, you can refer to the official documentation of $.ajax().

The option Parameter
There are a lot of different options you can specify to bend $.ajax() to your need. In the list below you can find their names and their description sorted in alphabetic order:

accepts: The content type sent in the request header that tells the server what kind of response it will accept in return

async: Set these options to false to perform an asynchronous request

beforeSend: A pre-request callback function that can be used to modify the jqXHR object before it is sent

cache: Set this options to false to force requested pages not to be cached by the browser

complete: A function to be called when the request finishes (after success and error callbacks are executed)

contents: An object that determines how the library will parse the response

contentType: The content type of the data sent to the server

context: An object to use as the context (this) of all Ajax-related callbacks

converters: An object containing dataType-to-dataType converters

crossDomain: Set this property to true to force a cross-domain request (such as JSONP) on the same domain

data: The data to send to the server when performing the Ajax request

dataFilter: A function to be used to handle the raw response data of XMLHttpRequest

dataType: The type of data expected back from the server

error: A function to be called if the request fails

global: Whether to trigger global Ajax event handlers for this request

headers: An object of additional headers to send to the server

ifModified: Set this option to true if you want to force the request to be successful only if the response has changed since the last request

isLocal: Set this option to true if you want to force jQuery to recognize the current environment as “local”

jsonp: A string to override the callback function name in a JSONP request

jsonpCallback: Specifies the callback function name for a JSONP request

mimeType: A string that specifies the mime type to override the XHR mime type

password: A password to be used with XMLHttpRequest in response to an HTTP access authentication request

processData: Set this option to false if you don’t want that the data passed in to the data option (if not a string already) will be processed and transformed into a query string

scriptCharset: Sets the charset attribute on the script tag used in the request but only applies when the “script” transport is used

statusCode: An object of numeric HTTP codes and functions to be called when the response has the corresponding code

success: A function to be called if the request succeeds

timeout: A number that specifies a timeout (in milliseconds) for the request

traditional: Set this to true if you wish to use the traditional style of param serialization

type: The type of request to make, which can be either “POST” or “GET”

URL: A string containing the URL to which the request is sent

username: A username to be used with XMLHttpRequest in response to an HTTP access authentication request

xhr: A callback for creating the XMLHttpRequest object

xhrFields: An object to set on the native XHR object

That was pretty long, isn’t it? Well, as developers you probably have stopped reading this list at the fifth or sixth element I guess, but that’s fine. The next section will be more exciting because we’ll put the $.ajax() function and some of these options into action.

Putting It All Together
In this section, we’ll see this function and some of its options in action.

A First Example of $.ajax()
We’ll start with a simple demo that reproduces the same code we developed in the previous article, but this time we’ll adopt $.ajax(). The code I’m talking about is shown below for your commodity:

$('#main-menu a').click(function(event) {
event.preventDefault();

$('#main').load(this.href + ' #main *', function(responseText, status) {
if (status === 'success') {
$('#notification-bar').text('The page has been successfully loaded');
} else {
$('#notification-bar').text('An error occurred');
}
});
});
Updating this snippet to employ the $.ajax() function, we obtain the code shown below:

$('#main-menu a').click(function(event) {
event.preventDefault();

$.ajax(this.href, {
success: function(data) {
$('#main').html($(data).find('#main *'));
$('#notification-bar').text('The page has been successfully loaded');
},
error: function() {
$('#notification-bar').text('An error occurred');
}
});
});
Here you can see that I used the first form of the function. I’ve specified the URL to send the request to as the first parameter and then an object of options as the second parameter. The latter takes advantage of just two of the several properties discussed in the previous section: success and error to specify what to do in case of success or failure of the request respectively.

Retrieving a Talk From Joind.in Using $.ajax()
The second example I want to discuss creates a JSONP request to retrieve some information from a service called Joind.in. The latter is a website where event attendees can leave feedback on an event and its sessions. Specifically, I’m going to create a snippet of code that, using the $.ajax() function, retrieves the title and the description of my talk Modern front-end with the eyes of a PHP developer.

The code to achieve this goal is as follows:

$.ajax({
url: 'http://api.joind.in/v2.1/talks/10889',
data: {
format: 'json'
},
error: function() {
$('#info').html('<p>An error has occurred</p>');
},
dataType: 'jsonp',
success: function(data) {
var $title = $('<h1>').text(data.talks[0].talk_title);
var $description = $('<p>').text(data.talks[0].talk_description);
$('#info')
.append($title)
.append($description);
},
type: 'GET'
});

In the snippet above, I employed several of the properties discussed. First of all, you can see that I’m using the second form of $.ajax(), which allows specifying the URL to which the request is sent as a property (URL) of the object literal. Because of the Joind.in’s API accepts a JSONP request, in the code above I’m setting the type of request I want to use by specifying the dataType property. Then, I used the data property to define the format’s type that I want to obtain from the server as required by the API. However, the latter requires this data as part of the query string of a GET request, hence I’m also specifying the type property set GET as its value. Finally, I wrote an error callback to display a message in case of error, and a success callback to display the title and the description of the talk in case of success.