メシのタネ

Webプログラミング 備忘録

  • DOMをPHPで操作できたらいいよね

    そうだよね。そう思うよね。JavaScriptでやると、画面がガタついたりするもんね。そうならないようにする方法もあるかもしれないけど、僕はできませんので、サーバー側でなんとかできたらええなぁと思って挑戦したけど、できませんでしたよ。PHP標準でHTMLをDOMにできるらしい今、技[...]

    続きを読む
  • 設計書ってなんで書くの?

    設計書をなぜ書くのかから始めてかれこれ3年近くこの禅問答をやっているわけですが、いまだに答えは出ません。ただ、その禅問答をやる中で設計書に対する取り組み方は大きく変わったので、その一部でも書いていきたい。基本設計はとにもかくにも必要だと思う設計書はいらぬ!という話をよく聞くし、自分[...]

    続きを読む
  • 書ききってやる。

    久々に書いてみる。久々に文章を書くということをやってみようと思う。伝える作業を観察したいと思ったからそうしたいと考えた。情緒的な文章は基本的にゴミ箱にぽいしてきましたが、情緒的なのも自分だと思う。「文章をかくという作業は、とりもなおさず自分と自分をとりまく事物との距離を確認すること[...]

    続きを読む
  • 普通の会社で2年普通に働いて思う事

    えらい寒くなりました。文句言いながらも現職を続けて2017年12月1日にめでたく2年がたちました。分かりやすいが乱暴に言えばITドカタと呼ばれる業界に入って案件のヒエラルキーの無慈悲さを痛感しながらも、それでもしょうがないと頑張る人たちに心を打たれながら「じゃあ俺も」と頑張れない自分に挫折して、とあ[...]

    続きを読む
  • jQueryUiのDatepicker利用時にminDate設定するとバグる件

    題名の通りなんですが、DatepickerでminDate使うとバグります。また後でキャプチャ見て貰いますけど、灰色の部分が、minDateで設定した日付が反復して出るようになるんですね。こういうの気が付かない人がいるかも知れませんが、ChoromeでminDate設定してる人は気にしてみてくだ[...]

    続きを読む

【jQuery】ajaxメソッドを使った非同期通信

jQuery11PHPとか使っててもフォームのバリデーションに
非同期通信でチェックかけたりするのが一般的になってきました。
なんで、自由自在に扱えるようになっておかないと
これから先困るような気がします。

今日は、自分が知ってる範囲でそれらについて
書いて行こうかなと考えています。

非同期通信と同期通信


ホストに対してリクエストを送り、
ホストからレスポンスが返ってきて
全てのデータを受信したら
次の処理に移れるのが同期通信です。

図にすると多分こんな感じです。
doukituusin

非同期通信というのは、レスポンスをまたずして
次のリクエストを送ることができます。
hidoukituusin

Ajaxとは


Webを作成する際のアプローチ方法です。
この方法はJesse James Garrett氏によって考えられたといわれています。
Ajaxは略語で、ほんとは「Asynchronous JavaScript and XML」と言います。

Ajaxの定義

・XHTMLとCSSを使った情報手段でなければならない
・DOMを使ってユーザーリクエスト等に応じて動的に情報を変化させる
・XML等を利用して、データを扱いやすくする
・XMLHttpRequestを利用した非同期なデータの検索ができる
・JavaScriptでそれらを制御する

jQueryでAjaxを使う


jQueryにはajaxというメソッドがあって、
同期通信、非同期通信、
どちらも使用することができます。

XMLHttpRequestオブジェクトでも行えますが、
今日はjQueryのajaxメソッドについて書きたいのでXMLHttpRequest使いたい人は
MDNのサンプル見た方が良いと思います。

データを読み込む場合


よく使うやり方としてはこんな感じではないでしょうか?

1つ目の引数には、データへのパスを書いてあげます。
2つ目の引数にはオブジェクトを定義します。
このオブジェクトの中に定義できるものはいろいろありますが、
ここではよく使うものだけ紹介する予定です。

XMLHttpRequest cannot loadが出る場合がありますが、
これはドメインが同一でないと発生するエラーです。
Webサーバー上で動作させるなり、絶対パスで指定してあげるとかやったら多分出なくなると思います。

データを送りたい場合


dataの中に、名前と値をセットで入れると、
phpにデータが送られるよというサンプルです。

textをjsonとかに変えてphp側にjsonでデータを吐き出させると、jsonでも受け取れます。

エラーを受け取りたい場合


オブジェクトに1個エラーを定義して関数を書きます。

クロスドメイン制約


言葉だと分かりづらいので、
理解できてる範囲で図にしてみました。
kurosudomein1

こういう扱い方は不可能ですけど、moge.comのAPIを扱う方法が無いわけではありません。

kurosudomein2

このように、間接的にmoge.comのAPIを利用することは可能になります。

そこでJSONP


ただ現実的に、そういう手法があるといっても、
中々利用しようと思えないのではないでしょうか。

この面倒くささを回避するので生まれたのがjsonpです。
JSONPとは、外部のJavaScriptをインポートして
別ドメインのファイルでも参照可能にするという手法です。

ためしにlocalhostからatndのデータを拾う場合はこうやります。

ATNDは特にコールバック関数名指定しなくても良いみたいですけど
コールバック関数名を固定にしないとダメなAPIもあるようなので、
そんな時は、jsonpをfalseにして、jsonCallbackでコールバック名を固定にすると良いそうです。

[jQuery]JSONPでコールバック名固定のAPIを利用するときのメモ

ajaxって便利ですよねー。
キチンと使えるようになってみたいです。

関連記事

コメントをお待ちしております