ajaxでInstagramの写真を抜いて上げてみる

この記事は2分で読めます



メモ



・typeにはHTTP通信の種類を指定します。Ajaxは”get”か”post”です。持ってくるか送るか、ですね。
・urlには、リクエストを送信する先のURLを指定します。
(test.json”、test.php”、test.js”などなど…。)


パラメータ名「type」は、通信に利用するHTTPメソッドを指定する。
(デフォルトはGETになっている)


Ajaxについて調べているときに、雛形となる書き方が複数ありどれがどう違うのかわからなかったので調べてみた。

1.thenを使ったパターン
そもそも、thenについてよくわかっていなかったのだが調べてみるとPromiseオブジェクトのメソッドだとわかった。でもAjaxのなかでPromiseオブジェクト呼び出してないじゃん?!jQueryのAjaxではPromiseを返すんですね。それ早く教えてほしかっった。厳密にはjQueryのjqXHRオブジェクト(jQueryのXMLHTTPRequestオブジェクト)がPromiseを実装しているということ。
※参考:ウェブカツjavascript・jQuery部中級(06)Ajaxとemail重複チェック

2.done failを使ったパターン
これはthenを使わず、doneとfailで分けた書き方。
※参考:ウェブカツWebサービス部(その18)お気に入り機能
※参考:ウェブカツjavascript・jQuery部中級(01)AjaxとJSON

4.success,errorのパターン
これはjQuery1.5以前の古いパターンなので、あまり必要ないかもしれない。”success”と”error”は”url”等と同様でajaxで指定可能なプロパティであり通信成功(失敗)時に実行されるコールバック関数を示す。

5.ライブラリを使用しないパターンについて
XMLHttpRequestオブジェクトを利用して、通信を行う。これが本当の雛形ですね。


イマドキは、jQueryのDeferredオブジェクトのthen()いうメソッドを使ってECMAScript 2015のPromise風のコードが使えます。複雑なコールバック地獄から解消され、すっきりと見通しのよいコードを記述できます。ECMAScript 2015のPromiseそのものとは違い、IEでも動作します。
then()の使い方は下記です。



アロー関数でもっとイマドキに
上記のコードはECMAScript 2015のアロー関数を使って下記のように記述できます。


  • このエントリーをはてなブックマークに追加
  • LINEで送る

関連記事

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

管理人紹介


21世紀、より良い人生を歩むための個人事業主による備忘録メモです。固定観念にとらわれず、日本や世界の深淵に触れ、自由快適な人生を歩んでいく事を大切にしています。