1. ホーム
  2. JavaScript

ajaxの役割

2022-02-16 08:33:30

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);
}
}
};
}