« requestオブジェクト|Head Rush Ajax001 | ホーム | 部屋の大掃除をしました。 »

2011年6月 4日

requestオブジェクトを利用した接続URLの指定|Head Rush Ajax002

ajaxによる接続

function 関数名(){
	createRequest();
	var url = "接続先URL";
	request.open("GET", url, true);
	request.onreadystatechange = 実行したい関数名;
	request.send(null);
}

先日のブログで作成したrequestオブジェクトを呼び出し、接続先URLを[url]という名前の変数に格納します。

request.open("GET", url, true);

「request.open()」は、接続を初期化します。()内には3つの要素が指定されています。

  • "GET" :サーバーへのデータ送信方法を指定します。"POST"が他にもあります。
  • url:Webサーバ上で、実行させたいPHPなどのURLを指定します。
  • true:trueが非同期を、falseが同期通信を指定します。

request.onreadystatechange = 実行したい関数名;

onreadystatechageメソッドで、実行したい関数を指定するときは、関数名の後ろに()をつけません。
onreadystatechageは、リクエストの状態が変更された時にブラウザにそのことを伝え、関数を実行します。

キャッシュ問題を回避するちょっとした小技

IEやOperaでリクエストURLをキャッシュされる際の回避技
function getHakashun(){
    createRequest();
    var url = "リクエストURL";
    url = url + "?dummy" + new Date().getTime();
    request.open("GET", url, true);
    request.onreadystatechange = updatePage;
    request.send(null);
}
こうすることで、urlにダミーの引数として時刻が付与されるので、毎回違ったURLをリクエストすることが出来ます。
初歩的なことですが、こんなやり方もあるようです。

リクエスト処理が問題なく完了したときは、「readyState == 200」

サーバのリクエスト処理が問題なく完了したときは、サーバから、ステータスコード200が返されます。
function updatePage(){
    if(request.readyState == 4){
        if(request.status == 200){
            /*実行する関数*/
        }else{
               alert ("エラーが起きました!");
        }
    }
}
上記のようなコードにすれば、リクエスト処理でエラーが起きているかを警告の有無でしることができる。
OpenID対応しています OpenIDについて

このブログ記事について

このページは、HAKASHUNが2011年6月 4日 14:26に書いたブログ記事です。

ひとつ前のブログ記事は「requestオブジェクト|Head Rush Ajax001」です。

次のブログ記事は「部屋の大掃除をしました。」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。