ajaxの役割
AJAXは、ページ全体を再読み込みすることなく、Webページの一部を更新することができる技術です。
リフレッシュレス・データ読み込み
ユーザーログイン、株式ファンドネットワーク
非同期式、同期式
AJAX = Asynchronous JavaScript and XMLの略。AJAXは新しいプログラミング言語ではなく、既存の標準を利用する新しい方法である。
AJAXとは、ページ全体を再読み込みすることなく、サーバーとデータをやり取りし、ウェブページの一部を更新する技術である。新浪微博、グーグルマップ、開心など、AJAXを使ったアプリケーションの例はたくさんある。
従来の開発モデル:ユーザーのアクションごとにサーバーにHTTPリクエストを返し、サーバーがそれを処理してユーザーにhtmlページを返す。
ajax開発モード:ページがajaxエンジンを通じてユーザーのアクションをサーバーに伝え、返された結果をajaxエンジンに与え、そしてajaxが指定された場所にデータを挿入します。
ajax関数の書き方
1, ajaxオブジェクトの作成
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
2. サーバーに接続する
xmlhttp.open('GET',url,true);// 3つのパラメータは、メソッド、パス、同期または非同期を表します(trueは非同期)。
3. リクエストの送信
xmlhttp.send()を実行します。
4. 戻り値の受信
xmlhttpです。 オンレディステートチェンジ <スパン = <スパン 機能 <スパン (){ <未定義
if(xmlhttp. ReadyState==4 ){ <未定義
if(xmlhttp.status==200){。 <未定義
<スパン アラート ( '成功:' + oAjax . 応答テキスト );
}
else
{
alert
(
'Fail:'
+
oAjax
.
status
);
}
}
}
関数への折り返し
function
ajax
(
url
,
fnSucc
,
fnFaild
)
{
//1. Creating Ajax objects
if
(
window
.
XMLHttpRequest
)
{
var
oAjax
=
new
XMLHttpRequest
();
}
else
{
var
oAjax
=
new
ActiveXObject
(
"Microsoft.XMLHTTP"
);
}
//2. Connecting to the server
//open(method, filename, asynchronous transfer)
oAjax
.
open
(
'GET'
,
url
,
true
);
//3. Send the request
oAjax
.
send
();
//4. Receiving Returns
oAjax
.
onreadystatechange
=
function
()
{
//oAjax.readyState //browser and server, which step to take
if
(
oAjax
.
readyState
==
4
)
//read complete
{
if
(
oAjax
.
status
==
200
)
//success
{
fnSucc
(
oAjax
.
responseText
);
}
else
{
if
(
fnFaild
)
{
fnFaild
(
oAjax
.
status
);
}
//alert('failed:'+oAjax.status);
}
}
};
}
関連
-
要素ツリー制御によるvueTreeテーブル
-
JavaScriptにおけるマクロタスクとミクロタスクの詳細
-
vue for 登録ページ効果 vue for sms 認証コードログイン
-
vue ディレクティブ v-html と v-text
-
vueのプロジェクトでモックを使用する方法を知っていますか?
-
[解決済み】「X-Frame-Options」を「SAMEORIGIN」に設定したため、フレームでの表示を拒否された。
-
[解決済み] 期待される代入または関数呼び出し: 未使用式なし ReactJS
-
フロントエンド null のプロパティ 'disabled' を読み取れない 問題が解決された
-
Netflix スペースマンダイヤルのJavaScriptによる実装
-
angularJSの深いネストしたngRepeatで異なるレベルの$indexを取得する方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
Vueにシンプルなメモ帳機能を実装
-
Vueのイベント処理とイベントモディファイアの解説
-
[解決済み】最大呼び出しスタックサイズ超過エラー
-
[解決済み】"フォームが接続されていないため、フォームの送信がキャンセルされました "というエラーの取得について
-
[解決済み】Node.jsで "Cannot find module "エラーを解決するには?
-
[解決済み】JavaScript TypeError: null のプロパティ 'style' を読み取ることができない
-
[解決済み] TypeError: $.ajax(...) is not a function?
-
JSクリックイベント - Uncaught TypeError: プロパティ 'onclick' に null を設定できません。
-
jq は html ページとデータを動的に分割する。
-
jquery.ajaxのbeforeSendメソッド(プログレスバー、「お待ちください」プロンプトなどを解決する .............................)。