Geekly Articles each Day
📜 ⬆️ ⬇️

Full AJAX. Theory and Examples. Chips and features

Due to numerous requests from beginners (and not only) AJAX developers, I decided to allocate some of my time to describe some of the tricks and techniques that I use when building complex, dynamic web applications. The article is a mixture of theoretical calculations and practical examples.

The greatest difficulties in building websites using AJAX arise when implementing the AHAH (Asynchronous HTML and HTTP) mechanism. Especially on-the-fly execution of loadable javascript. There is also a bunch of additional “hemorrhoids” when developing AJAX sites and web applications. You can read a detailed description of some existing problems . Due to these difficulties, many developers refuse to implement AJAX more intensively.

However, few people know that these problems can be solved. Moreover, there are already a number of solutions that make it easy to bypass problem and bottlenecks when developing complex AJAX web applications, as well as dynamically loading HTML pages with embedded scripts.
')
One of these solutions is Fullajax, a technology for building websites and web applications using AJAX. This is a combination of algorithms, approaches, rules and methods for maximizing the full power of AJAX & AHAH. The technology aims to reduce the complexity and increase the focus of the AJAX application.

Fullajax is expressed in a separate independent library. This is not an analogue of jQuery, Mootools, ExtJS, Prototype, YASS. However, sharing with modern javascript libraries does not contradict and does not cause conflicts, and on the contrary complements each other. The library is intended solely for communication. The whole emphasis is placed on convenience, flexibility and at the same time ease of use of methods and functions for the exchange of data between the client and the server. In the previously listed libraries there is DOM navigation and manipulation, various visual effects, sets of visual components. Fullajax doesn't have it all. But there are other possibilities.

List of main features:


Of course, for one article to talk about everything, especially with examples and in details will not work, as it is expensive and time and the number of letters.
This article will discuss the most important functionality of the library. It is planned to write a series of articles. Let's start with the simplest.

1. access to the item by id


<div id= "my-div" ></div>
<script>
id( 'my-div' ).innerHTML = 'test1' ;
//
SRAX.get( 'my-div' ).innerHTML = 'test2' ;
</script>

2. SRAX.onReady - DOM Readiness


The function that is called immediately when the DOM is ready. Such a function exists in all modern zhabaskriptovy libraries.
SRAX.onReady( function (){alert(1)})
function mytest(){
document .body.appendChild( document .cereateElement( 'div' )).innerHTML = 'New Div' ;
}
SRAX.onReady(mytest)


Now directly on the communication functions.
To work with AJAX requests in the library, two functions dax and hax are implemented.

The basic rule is:

It's simple, if you load the HTML code that needs to be inserted into the page, use hax, otherwise dax.

3. An example of using dax


dax({url: 'myurl' , id: 'save-data' , form: 'myform' , method: 'post' , cb: function (resp, cbo){
alert(resp.text || resp.xml)
}})


data of all fields (input, textarea, select, ...) from a form where id = 'myform' will be automatically collected and sent to url = myurl by the post method

id - defines the internal identifier of the stream, is designed to separate the request streams to the server, two threads (requests) with the same id cannot exist at the same time, the next request cancels the previous one. Using id also allows you to reuse objects created in memory.

List of dax operation options


4. hax usage example



~ 70% of all library code is an implementation of hax. This function performs all the complex operations of processing different variants of HTML code. You can say hax is a full-fledged core of the analysis and processing of HTML documents. It automatically selects and applies styles and jabscripts, regulates their loading sequence, manual loading method (via dax) or automatic (returning the loading process to the browser), implementing AJAX navigation history, document.write processing, window.onload, automatic title change, support direct AJAX links, more.

Consider the internal hax operation algorithm. When you receive a html response, the document is analyzed and parsing of styles and scripts. If styles and external scripts are made, they are automatically recursively reloaded. Recursive means if inside the reloading scripts, styles are still external links, the process is repeated. If scripts, styles from another domain, the download process is then given to the browser and the subsequent analysis of such scripts, styles are not performed.

To implement a clear and stable work when processing complex HTML pages, an algorithm was developed to control the loadability and sequence of execution of scripts, styles and links, which removes these responsibilities from browsers. Due to this, a good, stable, and most importantly equally predictable work of AHAH in the main web browsers is implemented.

One of the “stones in sandalwood” is the joint use of AJAX and document.write. When document.write appears in scripts, site operation using AJAX (AHAH) is impossible by default. Since document.write can only be used until the end of the main page output stream. Otherwise, the page content is simply erased. In Fullajax, the document.write function is redefined, so that what was intended by the programmer is executed without error. The algorithm for emulating this function was one of the most difficult moments when developing a library.

Also one of the most complicated functionaries of the library is the implementation of cross-browser AJAX navigation history. In the end, in Fullajax, working with AJAX history comes down to defining one parameter on / off.

Examples of working with hax:

hax({url: 'index.html' , id: 'my-div' })

The element with id = 'my-div' will be loaded with the page 'index.html' using AJAX history.

hax({url: 'index.html' , id: 'my-div' , nohistory:1, onload: function (){
alert( 'Hey Bingo!!' )
}})

In the element with id = 'my-div' the page 'index.html' will be loaded without using AJAX history, after loading an alert will fly out.

List of hax options


Continuation



If God will give time and energy, in the next article (if the topic is interesting to readers), it is planned to highlight a number of issues such as:


All the best, we will write off ...

UPD1: Some Case Studies
Dream Travel - Travel Company
Tooglecms - the truth is still damp, only the first beta.
Datamash.us - platform widget

Forum where you can ask technical questions

Source: https://habr.com/ru/post/53831/

More articles:


All Articles