Geekly Articles each Day

フルAJAX。 理論と例。 チップと機能

初心者（だけでなく）AJAX開発者の多くのリクエストに応えて、私は自分の時間の一部を、複雑で動的なWebアプリケーションを構築するときに使用するいくつかのトリックを説明することに費やすことにしました。 この記事は、理論計算と実際の例を組み合わせたものです。

AJAXを使用してサイトを構築する際の最大の問題は、 AHAH（非同期HTMLおよびHTTP）メカニズムを実装するときに発生します。 特に、ロードされたJavascriptのオンザフライ実行。 また、AJAXサイトおよびWebアプリケーションを開発する際に、追加の「hem」があります。 既存の問題の詳細な説明を読むことができます。 これらの困難のため、多くの開発者は、AJAXのより豊富な実装を放棄しています。

ただし、これらの問題を解決できることを知っている人はほとんどいません。 さらに、複雑なAJAX Webアプリケーションを開発するときや、埋め込まれたスクリプトでHTMLページを動的にロードするときに、問題やボトルネックを簡単に回避できるソリューションが既にいくつかあります。

これらのソリューションの1つは、AJAXを使用してサイトとWebアプリケーションを構築するためのテクノロジーであるFullajaxです。 これは、AJAXおよびAHAHのフルパワーの実装を最大化するためのアルゴリズム、アプローチ、ルール、およびメソッドの組み合わせです。 このテクノロジーの目的は、複雑さを軽減し、AJAXアプリケーションの狭い焦点を拡大することです。

Fullajaxは、独立した独立したライブラリで表現されます。 これは、jQuery、Mootools、ExtJS、Prototype、YASSの類似物ではありません。 ただし、最新のJavaScriptライブラリとの共有は矛盾せず、競合を引き起こしません。逆もまた同様です。 ライブラリは、純粋に通信を目的としています。 すべての重点は、クライアントとサーバー間でデータを交換するためのメソッドと機能の使いやすさ、柔軟性、および使いやすさに置かれています。 前述のライブラリには、DOMナビゲーションと操作、さまざまな視覚効果、視覚コンポーネントのセットがあります。 Fullajaxにはこのすべてがありません。 しかし、他の可能性もあります。

主な機能のリスト：


もちろん、ある記事では、時間と文字数の両方で費用がかかるため、すべてのこと、特に例や詳細について話すことはうまくいきません。
この記事では、ライブラリの最も重要な機能に焦点を当てます。 一連の記事を書く予定です。 最も単純なものから始めましょう。

1. idによる要素へのアクセス


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

2. SRAX.onReady-DOMの準備


DOMの準備ができたときにすぐに呼び出される関数。 このような関数は、最新のすべてのjabaskriptライブラリに存在します。
SRAX.onReady( function (){alert(1)})
function mytest(){
document .body.appendChild( document .cereateElement( 'div' )).innerHTML = 'New Div' ;
}
SRAX.onReady(mytest)


今すぐ直接通信機能に。
AJAXリクエストを処理するために、ライブラリには2つの関数daxとhaxが実装されています。

基本的なルール：

ページに埋め込む必要のあるHTMLコードをアップロードする場合、haxを使用するか、daxを使用するのは簡単です。

3. daxの使用例


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


id = 'myform'のフォームからのすべてのフィールド（入力、テキストエリア、選択、...）のデータは自動的に収集され、postメソッドを使用してurl = myurlに送信されます

id-サーバーへのリクエストのフローを分離するように設計されたストリームの内部識別子を定義します。同時に、同じidの2つのスレッド（リクエスト）は存在できません。次のリクエストは前のリクエストをキャンセルします。 idを使用すると、メモリ内に作成されたオブジェクトを再利用することもできます。

ダックスワークオプションリスト


4. haxの例



すべてのライブラリコードの〜70％がhaxの実装です。 この関数は、HTMLコードのさまざまなバリアントを処理するためのすべての複雑な操作を実行します。 haxは、HTMLドキュメントを分析および処理するための本格的なコアであると言えます。 スタイルとギルスクリプトを自動的に選択して適用し、ロードシーケンス、手動（dax経由）または自動（ブラウザーにロードプロセスを与える）、AJAXナビゲーション履歴の実装、document.write、window.onloadの処理、自動タイトル変更、サポートを自動的に調整します直接AJAXリンクなど。

内部haxアルゴリズムを検討してください。 html応答を受信すると、ドキュメントが分析され、スタイルとスクリプトが解析されます。 外部スタイルとスクリプトが作成されると、それらは自動的に再帰的に再ロードされます。 再帰とは、再読み込み可能なスクリプト、スタイル内に外部リンクがまだある場合、プロセスが繰り返されることを意味します。 スクリプト、別のドメインのスタイル、ダウンロードプロセスがブラウザに渡され、そのようなスクリプトのその後の分析が行われた場合、スタイルは実行されません。

複雑なHTMLページの処理時に明確で安定した操作を実装するために、ロード可能性とスクリプト、スタイル、およびリンクのシーケンスを制御するアルゴリズムが開発され、ブラウザーからこれらの責任が取り除かれます。 このため、主要なWebブラウザーでの安定した、最も重要な同等の予測可能なAHAH作業が実装されています。

サンダルウッドの石の1つは、AJAXとdocument.writeの併用です。 document.writeがスクリプトに表示される場合、AJAX（AHAH）を使用するサイトはデフォルトでは使用できません。 document.writeは、メインページの出力ストリームの終わりまでしか使用できないためです。 それ以外の場合、ページのコンテンツは単純に消去されます。 Fullajaxでは、プログラマが意図したものがエラーなしで実行されるように、document.write関数が再定義されています。 この関数をエミュレートするためのアルゴリズムは、ライブラリの開発で最も困難な瞬間の1つでした。

また、ライブラリの最も複雑な機能の1つは、AJAXナビゲーションのブラウザ間の履歴の実装です。 最終的に、Fullajaxでは、AJAX履歴の操作は1つのパラメーターのオン/オフの定義に帰着します。

haxの使用例：

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

id = 'my-div'の要素は、AJAX履歴を使用してページ 'index.html'を読み込みます。

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

ページ 'index.html'は、AJAX履歴を使用せずにid = 'my-div'の要素にロードされ、ロード後にアラートがクラッシュします。

Haxジョブオプションリスト


継続



神が時間とエネルギーを与えてくれるなら、次の記事で（トピックが読者にとって興味深い場合）、次のような多くの問題を強調する予定です。


よろしくお願いします。

UPD1：いくつかのケーススタディ
ドリームトラベル -旅行会社
Tooglecms-真実はまだ生で、最初のベータ版のみです。
Datamash.us-プラットフォームウィジェット

技術的な質問をすることができるフォーラム

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

More articles:


All Articles