1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"> </script> <title>Document</title> </head> <body> <div id="imgList"></div> <script> $(function(){ $.ajax({ url:'https://www.instagram.com/p/BnGxEuOnrgp', type:'get', dataType: 'html' }).then( //成功時の処理 function(data){ var parseHtml = $.parseHTML(data); var $html = $(parseHtml); var arr = $html.map(function(index,element){ $element = $(element); if($element.is('meta')){ if($element.attr('property')=='og:image'){ return $element.attr('content'); } }}); $.each(arr,function(index,element){ $('#imgList').append('<img width="120px" src="'+element+'" />') }); }, //失敗時の処理 function(){ alert("取得に失敗しました"); } ); }); </script> </body> </html> |
メモ
・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()の使い方は下記です。
1 2 3 4 |
$.ajax({ オプション }) .then(成功時の処理, 失敗時の処理); |
アロー関数でもっとイマドキに
上記のコードはECMAScript 2015のアロー関数を使って下記のように記述できます。
1 2 3 4 5 6 7 |
$.ajax({ url: 'http://jsrun.it/assets/E/H/Z/t/EHZt3' }) .then( data => $('#results').append(data), error => alert('読み込み失敗') ); |
この記事へのコメントはありません。