« 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 ("エラーが起きました!");
}
}
}
上記のようなコードにすれば、リクエスト処理でエラーが起きているかを警告の有無でしることができる。