[フロントエンド学習]AJAX部分学習ノート、翌日

iframe隠しフレームテクノロジー

ajaxが初期になかった場合、フロントエンドプログラマは、ローカルページコンテンツ

の更新を実現するために、トランスフォーム技術を用いる.

この技術はiframe に依存し、現在のページのサブページに相当し、target属性を使用してidを指すと、バックグラウンドの戻りデータはiframeラベルの

に戻る.

iframeラベルを非表示にし、jsが親ページ(parentを使用して親ページ、すなわち現在のページを取得)を操作することは、バックエンドでデータを動的に返した後、ページのローカル更新を実現する機能

である.

は理解するだけで、今はほとんど

を使わない.
AJAX開発
AJAX操作フロー
1.XMLHttpRequestオブジェクトを作成する2.オブジェクト呼び出しopenメソッド入力パラメータ、送信要求の準備3.オブジェクト呼び出しsendメソッド送信要求4.指定コールバック関数 .onreadystatechange = function(){};を宣言する各ステップの流れを具体的に説明する
xhrオブジェクトの作成

var xhr = new XMLHttpRequest();これによりxhrオブジェクト

を作成することができる.

しかし実際にはXMLHttpRequest()という構造関数には一定の互換性の問題があり、ie 6およびその以下のバージョンはこのオブジェクトをサポートしていない

である.

一般IE 6はvar xhr = new ActiveXObject('Microsoft.HTTPXML')を使用して

の代わりに使用する.
送信の準備

xhr.open(' '，' url'，' ') xhrオブジェクト呼び出しopenメソッドを使用すると、送信準備フェーズに入ることができ、以下はパラメータの受信

である.

リクエスト方式

一般的にフロントエンドで最も一般的なリクエスト方式はgetとpost

である.

は、要求送信されたパラメータ部分を変数で格納して再操作することを推奨する

getを使用する場合、送信されたパラメータは、ターゲットurlの後に書かれ、?疑問符で接続されなければならない.複数のパラメータは&符号で接続するており、中国語の文字化けしを防止するために、パラメータ部分はjs内蔵の方法encodeURI()を用いてトランスコード

を行う.

postが使用される場合、パラメータ部分は送信フェーズのsend()メソッドに記載され、パラメータはトランスコードを必要としない.またpostを使用するには、送信前に要求ヘッダを設定必要があります.xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');これは固定フォーマットで、直接使用することを理解する必要はありません.

ターゲットurlは、バックエンドファイルにデータを送信するurlアドレス

です.

非同期または同期識別はtrueとfalseで置き換えられ、デフォルトはtrue非同期です.同期方式はほとんど使用されない

送信の実行

xhr.send();これで要求を送信できる

.

要点については、上にも述べました.get方式のパラメータ書込nullである、post方式であればurlのパラメータ書込

である.
コールバック関数の指定

xhr.onreadystatechange() = function(){};このコールバック関数は、ブラウザによって呼び出されると宣言しただけです.呼び出す条件は、readyStateの属性値が変化する(値が0、1の場合は呼び出さない)ことであり、

について詳しく説明する.

コールバック関数に含まれる属性値:

xhr.readyStateこのプロパティは、4つの値で構成されています.

0 xhrオブジェクトの初期化に成功したことを識別する

1は、xhrがsend()メソッド送信要求

を呼び出したことを示す.

2は、サーバ側がデータを返すが、

は解析されていないことを示す.

3は、解析中に返すデータ

を示す.

4は解析に成功したことを示し、サーバ側から返されたデータ

を用いることができる.

であるため、この属性が4であるか否かをコールバック関数で判断するのが一般的である、4のために次の操作

を実行する.

xhr.statusプロパティは、サーバ側が返すステータスコードです.

200サーバ側はデータ

を正常に返す.

404によって要求されたリソースが見つからない

500サーバ側エラー

このステータスコードは、実際にはhttp要求のステータスコード

である.

この属性は一般的にreadyStateの属性を判断した後に二次判断を行います.つまり、readyState=4であっても、返されたデータの解析に成功したことを説明するしかありませんが、必ずしも正しいとは限りません.status 200がサーバ側が正しいデータを返したことを示す場合

.


サーバ側応答のデータフォーマット

xhr.responseXMLはxml形式の応答データを受信し、バックエンドページがxml形式のデータを返すには要求ヘッダheader('Content-type:text/xml')を加えなければならない.しかし、このようなデータフォーマットは、ラベルペア(メタデータ)の形式でデータの内容を記述するため、ラベルは多くの空間を占有し、解析にも不利であり、

のみを理解する.

xhr.responseTextは文字列フォーマットの応答データを受信し、jsonデータ文字列は現在最も流行しているデータフォーマットであり、そのフォーマットはjs一般オブジェクトと非常に似ている

である.

ajaxは現在、この2つのフォーマットの応答データ

のみをサポートしている.
jsonデータ紹介

データフォーマット

で述べたように、jsonデータはjsの一般的なオブジェクトフォーマットとほぼ一致しており、それらの違いだけを説明します.

jsonデータは、戻るときに参照アドレス

を格納するために変数を必要としない.

jsonデータのキーは、

を二重引用符で囲む必要があります.

jsonデータ終了セミコロン

は不要

注意:jsonデータは単純な文字列であり、オブジェクトではなく、

を変換する必要がある.

データ解析

オリジナルJSには、受け取ったjsonデータをオブジェクトに変換する方法JSON.parse(json )が内蔵されており、オブジェクトが属性にアクセスすることで内部のデータ

を取得することができる.

余談:内蔵メソッドJSON.stringify( )を使用して、オブジェクトを文字列に変換することができ、

のみを理解することができます.

バックエンドAPIはjsonデータを返す

一般的に、バックエンドはデータベースからデータを取得し、多次元配列にデータを格納し、組み込みメソッドを呼び出して配列をjson形式のデータに変換し(例えば、PHPはjson_encode( )を使用して変換)、フロントエンド

に戻る.

同期と非同期

原理分析

同期要求方式ブラウザは、他の操作を実行することなく、要求データの戻りを待ち続けるため、ロード中にレンダリングされないまま、ブロック

を形成する可能性がある.

で非同期のリクエストの方式では、ブラウザはリクエストをxhrオブジェクトに渡して処理し、リクエストを送信した後もブラウザは次のコードの実行をずっと待つことはなく、リクエストしたデータが戻った後、ブラウザはデータ操作を実行し、複数の線が実行されていることに相当するので、マルチスレッド処理方式とも呼ばれる.非同期の古典的な使い方は、ページデータをローカルに更新し、ページ全体を再ロードしないことです.

例を挙げると、リーダーが誰かに仕事を報告させたい場合は、秘書にその人を事務室に知らせることになります.秘書の通知の過程で、指導者は何もしないで人だけを待つのではなく、自分の他のことをしているわけではありません.人が来てから仕事の報告を始めると、この例は非同期の原理と同じ

です.

非同期の下位原理の理解

ここではjs下位コードの実行順序、単一スレッド+イベントキューに関する.単一スレッドとは、上から順にコードを実行することを意味し、単一スレッドの実行方式のみである場合、一部のコードが実行時間を必要とするブロックが発生するため、jsはイベントキューメカニズム

を追加する.

イベントキューとは何ですか?実は簡単です.jsはタイマ、イベント、ajaxに関数を指定すると、コールバック関数をイベントキューに入れ、次のコードを実行し続け、イベントキューループ判定を呼び出します.メインスレッドがアイドル状態である場合、キュー内のコールバック関数は条件を満たす

を実行する.

です.したがって、イベントキュー内のコールバック関数を実行するには、次の条件を満たす必要があります.

コールバック関数がタイマ内である場合、まずメインプログラムが空き、その後、タイマの時間条件が満たされてから

が実行される.

コールバック関数がイベント内である場合、まずメインスレッドが空き、次にイベントトリガが

を実行する.

コールバック関数がajaxリクエストの場合、まずプライマリ・プログラムが空き、その後、サーバ側がデータに応答して

を実行する.

このように非同期原理を理解しやすくなり、jsはコード実行を2つの線に分け、メインスレッドはずっとコードを実行してもコールバック関数のトリガを待つことはなく、メインスレッドが空きにあり、コールバック関数がトリガ条件を満たすとコールバック関数をメインスレッドに入れてすぐに実行し、その間に何もしない待機過程はありません.ブロックを避けるために

が発生します

この原理を理解する

jqパッケージajaxメソッド

jqueryにはajaxメソッドがカプセル化されており、直接$.ajax()；呼び出しで

が可能である.

では、一般的なプロパティについて説明します.パラメータは、オブジェクトのキー値のペアで設定されていることに注意してください.

type属性設定要求方式

url属性設定送信アドレス

dataパラメータを設定、パラメータ部分も対象キー値ペアの方法

である.

dataType属性受信データのフォーマット

を設定する.

successコールバック関数は、データ解析が完了し、正常に呼び出す

を受信する.

errorコールバック関数、サーバ側でエラーが発生した場合に

を呼び出す.

詳細プロパティマニュアル

を参照

jqパッケージのajaxメソッドの原理をシミュレートし、

を明らかにする.