Hatena::ブログ(Diary)

三等兵

2009-11-15

ハイテンションAjax入門

JSが少しできる人ならうじうじ考えるほどのこともでもない!

何も難しいことはない!ぶっとんぢまいなよ!ヒャッパー!!!


というノリでAjaxを学んでみました。醜いです。


Ajax入門

Ajaxはいろいろできるんだぜ!


以上入門終り!キミは完璧だ!次いけ!


Ajaxは非同期通信だかなんだかそんなもんはどうでもいいんだ!

どうでもいい!そんなことよりもXMLHttpRequestオブジェクト生成!

var request = false;
if(window.XMLHttpRequest) {
  request = new XMLHttpRequest(); //frefox ie7,8 safai opera
} else if(window.ActiveXObject) {
  try {
    request = new ActiveXObject("Msxml2.XMLHTTP"); // ie6
  } catch(e) {
    request = new ActiveXObject("Microsoft.XMLHTTP"); // ie5.5
  } 
} else {
  throw new Error('お前のブラウザはもう、死んでいる…');	
}

これでAjaxのクロスブラウザ対策は完璧だ!もう何も考えなくて良い!産業革命の波にのまれた労働者のごとく馬車馬のようにコピペすれば良い!何やってるかわからない?って実はほとんど何もやってないんだから考えてもアホくさい!単にインスタンス化してるだけだ!


このいかれインスタンス野郎を使え!

このインスタンス化されたXMLHttpRequestオブジェクトを使ってAjaxを実現していく!上のコードはクロスブラウザ対応用であってIEのアホを無視すればこれだけで良いぞ!

var request = new XMLHttpRequest();

これだけで準備は整っているんだぜ!Firefoxで試すんだったらこれでいい!あとは馬車馬のようにうひーうひー働けば良いんだこのピーナッツ野郎!HAHAHAHAHA!


GETだPOSTだそんなことは後から考えろ!

サーバにリクエストする方法はいくつかあるけどそんなもんどうでもいい!少しのデータならGETで大量ならPOSTだ!それ以外は記憶ののりしろが増えたときに気にすればいい!


リクエストやレスポンスなんてコード無視して考えればいいんだ!もっと熱くなれよ!どーしてあきらめる!お前は松岡修造の生まれ変わりだ!

まだ修造は生きているぞ!それよりもリクエストってなんですか?レスポンスってなんですか?こんなもん適当に考えちまえ!


・サーバにデータ出せやごらああ!!って要求するのがリクエストだ!

・サーバ側からデータ受取れやごらああ!って押し付けられるのがレスポンスだ!


リクエストっていうぐらいだからどういうデータを貰うかリクエストできるんだぞ!そしてレスポンスはリクエスト通りのデータを押し付けてくるんだ!


レスポンスデータを非同期処理しやがれブタ野郎!

リクエストしたらレスポンスが返ってくる!リクエスト通りのデータを健気にくれたんだ!でもお節介でそれ以上のことはしてくれないぞ!


だからこちらでデータを処理しなきゃいけない!処理とは自分が欲しいデータの形にするってことだ!それともたとえばXML形式のデータをまんま表示する気か!んぬぅ!!目的がそれなら構わないが特定の文字列を表示したい!ってときはそのコードを書かなければいけないんだぞ!

「処理内容は自分で考えなければいけない」が処理の設定そのものは簡単だ!XMLHttpRequestオブジェクトにそのプロパティが用意されている!プロパティに処理を設定するだけで良い!


ここでAjaxを薄っぺらくまとめればただの松岡修造だ!

うそだ!松岡修造は関係ない!


  1. XMLHttpRequestオブジェクトをインスタンス化!
  2. 相手にデータ出せやごらああ!とリクエスト!
  3. レスポンスのデータを非同期処理するんだブタ野郎!

これが大変乱暴だがAjaxを実現するうえでの流れだ!

コードになったらよくわからないなんてそんなことはない!難しいと感じている問題はだいたい本人が理解するのがめんどくさいと思っているだけだ!なぜそう思うのかって私はめんどくさかったんだからああああっしゃあああ!

まとめにとりかかる!


1.XMLHttpRequestオブジェクトをインスタンス化!

こうだ!

このインスタンスでリクエストしたりレスポンスのデータを処理したりするぞ!

var request = new XMLHttpRequest();

2.相手にデータ出せやごらああ!とリクエスト!

POSTとGETがあるが、GETの場合はこうだ!

request.open('GET', 'http://d.hatena.ne.jp/sandai/', true);
request.send(null);

XMLHttpRequestオブジェクトのメソッドを2つ使っている!openメソッドとsendメソッドだ!メソッドと引数の詳細は自分で調べてくれ!大丈夫単純なものだ!見ただけでも分かるだろう!

それからXMLHttpRequestのオブジェクトは他にもいくつかあるが今は捨てておけえい!もう1つポピュラーなPOSTでの方法は調べてみるんだ!GETと少し違うだけだからモウマンタイ!


3.レスポンスのデータを非同期処理するんだブタ野郎!

処理はこうだ!

request.onreadystatechange = function() {
  if(request.readyState == 4 && request.status == 200) {
    alert(request.resuonseText);
  }
};

見慣れないプロパティがいくつかあるな!とりあえずそれは置いといて処理内容関係なく使う部分をピックアップするとこうだ!

request.onreadystatechange = function() {
  if(request.readyState == 4 && request.status == 200) {
    //ここに処理内容を記述
  }
};

onreadystatechangeというクソ長ったらしいプロパティがレスポンスデータの処理内容を設定するプロパティだ!非同期処理をする上で重要なプロパティだぞ!ここでは関数式で定義しているが別に普通の関数でも構わない!

readyStateプロパティはサーバからレスポンスが帰ってきているかどうか分かるプロパティだ!4という数字は全て完了したことを意味する!

statusプロパティはリクエストに対してサーバがどう応答したかチェックできるプロパティだ!200は正常に応答したということになる!


コードをまとめてやろう!

うぬぁ!

//インスタンス生成
var request = new XMLHttpRequest();
//レスポンスデータの処理をする関数を登録
request.onreadystatechange = function() {
  //サーバとのやりとりがうまくいっているか確認
  if(request.readyState == 4 && request.status == 200) {
    //レスポンスデータをアラート!
    alert(request.resuonseText);
  }
};

//リクエストの送信
request.open('GET', 'http://d.hatena.ne.jp/sandai/', true);
request.send(null);


…なにぃ!?動かないとイメージできないだとぅおあ!?


サンプルだ!ギャラはポッキー1年分はかたいぞ!

動くだけで適当に作ったやつだ!ちょっと手を抜きすぎたがめんどくさい!

Firefoxしか確認していないぞ!

// sample.htmlで保存
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript">
onload = function() {
  var request = new XMLHttpRequest();
  document.getElementById('btn').onclick = function() {
    request.open('GET', '/sample.txt', true);
    request.onreadystatechange = function() {
      if(request.readyState == 4 && request.status == 200) {
        document.getElementById('text').textContent = request.responseText;
      }
    };
    request.send(null);
  };
}
</script>
<title>sample</title>
</head>
<body>
<button id="btn">ボタンだYO!</button>
<p id="text">おずなぁぁ、ぼたんぉおおおずな"あ""…</p>
</body>
</html>


// sample.txtという名前でテキストを保存
おすなと言っただろうが!んぬぁ!!!

実践ではサーバ側がtxt形式のファイルなんてことはまずないので注意!こんな滑稽なサンプルが嫌ならネットで検索すれば同じようなのがでてくるはず!

それからクライアント側のファイルはhtmlファイルだ!静的なページでもこうやって動的になるのだ!


まだわからないところがあるだとぅ!?

まだわからんのか!んぬぁ!よし!あきらめるんだ!

というか私もそこまでよく知っているわけではないぞ!とりあえずここまできたら後はある程度動かせるレベルまではきている!細かい部分はネットで検索したりサンプルを適当に探して、実践でいろいろ試すのみ!

それから今回はGreasemonkeyでGM_XMLHttpRequestを使う予定で先行学習としてやっただけで、それ以外ならAjaxはjQueryやprototype.jsで使うんじゃないかって気分だ!

もしかしたら肝の部分であるレスポンスデータの処理をする関数の登録であれこれやるかもしれない!だが誰も期待していないのでブログでは公開しない!一人でこのテンション疲れるんだ!


じゃああばよ!

補足

参考

http://www.ajaxtower.jp/ini/http/

https://developer.mozilla.org/ja/AJAX/Getting_Started

http://www.atmarkit.co.jp/fwcr/special/ajax01/01.html

http://allabout.co.jp/internet/javascript/closeup/CU20050515A/

http://itpro.nikkeibp.co.jp/article/COLUMN/20060529/239205/




非同期通信

同期処理だとサーバにリクエストしたときに、クライアント側は処理を中断しているのです。サーバ側かクライアント側か、どちらか一方でしかプログラムが動作しません。

しかし非同期通信ではサーバ側にリクエストを送信して、サーバが処理している間でもクライアント側で処理は継続されます。ブラウザ上での処理も並行して行えるわけですね。


コールバック関数

レスポンスに対する処理の関数をコールバック関数と言うらしいです。イベントハンドラと同じようなもんです。


なぜこんなテンションなのか

Ajaxを学習するにあたってめんどくさかったのでカリカリしながら情熱で。情熱的になりすぎたので間違いがあるとは思いますが、そこは情熱でカバーしてください。端折っている箇所も補足のURLでカバーしてください。

Ajaxて簡単な処理なら複雑ではないです。もっとめんどうかと思っていた。単にhttp通信して取得しているだけ。こういうことって後から考えると普通に思えるけど理解する前はさっぱり何がなんだか。


追記

変態なことになってしまったので追記。この内容は申し訳ない。


修正

openメソッドの第3引数。falseになっていたので修正。

request.open('GET', 'http://d.hatena.ne.jp/sandai/', false); //同期
request.open('GET', 'http://d.hatena.ne.jp/sandai/', true); //非同期

引数省略するとデフォルトでtrueです。指摘なかったのでばれてないばれてない。あと参考URL追加。


openメソッドとsendメソッド

openメソッドはリクエスト先とリクエスト方法(getやpost)、同期か非同期かを指定。認証が必要なページではusernameやpassを書いたり。

リクエストを送信するのはsendメソッド。リクエストボディですね。GETの場合引数はnullで。postは必要です。サーバが参照するデータで、厳密にはGETにはこれをURLの末尾に書くわけですが。


私も今までなんとなくpostやget使ってきましたがこの機会に。

http://www.atmarkit.co.jp/fnetwork/rensai/netpro01/netpro01.html


だいたいのajax入門はpost送信はなんとなくさらっと紹介しているだけですが、おそらく面倒なのでしょう。というか知っていること前提なのです。基礎的なものなので。しかし私は正確に把握してません。

だからこういうのはGreasemonkeyで適当なサンプルを参考に、ヘッダとボディの書き方を学んで試行錯誤しながら後から正確に知識として取得しようと思っていたら変態なことに。

あ、ヘッダと出てきましたが、POST送信の場合はヘッダというやつも書かなきゃいけません。

こういう細かいのは初心者にとっては大変難しいというか、覚えにくいものですね。だから先にイメージをつかんで、あとからピースはめていく感じでいけばいいかなと。でも人それぞれ。


文字コードはutf8

日本語文字化けします。


クロスドメイン間はできない

クロスドメイン間では原則アクセスできません。

簡単にいうと、http://sample.com/http://a-radamedayokokokitya.com/に普通はアクセスできない。でも実はできる方法があります。しかしマッチョなプログラマになってからマッチョに使えばいいかなと思います。


どうでもいいけどわかりにくい

きげんをなおしてください

f:id:sandai:20091031201257j:image

ななしななし 2009/11/16 14:22 かえってわかりにくい

とおりすがりとおりすがり 2009/11/16 14:26 これはいい入門w

ふらふら 2009/11/16 14:43 難しそう・・・と尻込みしている人にはコレぐらいがちょうど良いかもしれないw

774774 2009/11/16 16:00 吹いたw

あぱあぱ 2009/11/16 17:01 難しいとか思う暇があるなら、やってみろ
という姿勢は正しい
やる前にウジウジ悩む奴はケツの穴に(ry

bushimichibushimichi 2009/11/16 19:45 めんどうな仕事もこのテンションでこなしたい。

sandaisandai 2009/11/16 21:14 この記事書いた人痛い
でもうさぎは良い。
かなりうさぎは良い。
写真はうさぎです。

sandaisandai 2009/11/16 21:16 コメントありがとうございます><
変な入門なので真面目な人はURL先で入門してください><

gungnir_odingungnir_odin 2009/11/17 08:27 うさぎかわいい♪

ureyuboureyubo 2009/11/17 13:19 こういう文体での入門もありですね。好きです。

gnostikoignostikoi 2009/11/17 14:42 うさぎがいたからブクマされたんだと思う。

sandaisandai 2009/11/17 22:42 コメントありがとうございます><
この記事からうさぎをとったら行間しか残りません。

yoshida_studioyoshida_studio 2009/11/18 11:23 この記事のノリは大好きです。ありがとうございます。

sandaisandai 2009/11/19 22:15 ノリでどうにかなっちゃいましたね(汗
コメントありがとうございます!

omaruomaru 2011/06/03 04:21 こういうノリは好きだ。ラブ

osyamanbeosyamanbe 2012/02/04 18:40 これはわかりやすい。
ajaxは、何者?って思ってたけど、これで知ったかぶりできる。
このサンプル応用するだけで結構いろいろできそうだ。
ざんくす

mozyomozyo 2013/08/08 16:39 笑い堪えるのキツい、目の前に上司いるんだけど...
ありがとう、いきなりAjax使え言われてイライラしてた私には素晴らしい入門でした。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証