GN125、グラディウス400のメンテナンス/カスタムブログです。おわりにはじめにJavascriptで、動的に外部コンテンツをロードする際、ajaxしますよね。ajax」なんて調べると、大体jQueryでajaxする方法が出てきます。最近はjQuery無しでクールにajaxするfetchというAPIがあるようなので、その話題です。(もちろん、jQuery無しでもXMLHttpRequestをJavascriptで書けばいいんですけど、長くなりがちなので私は好きではありません)jQueryを使用したajaxこのajaxですが、広く普及している方法としては、jQueryを用いて下記のようにajaxコールすることが多いと思います。Because:");console.log(data);}});[/javascript]よく見るパターンですよね。jQuery.ajaxメソッドで、各種パラメータを引数に渡して...もちろん、jQueryをプロジェクトで採用している場合はこれで良いと思います。jQueryを使用していないプロジェクトの場合は、どうしようか...と悩むことしばしば。そんなあなたにfetchjQueryは使ってないし、XMLHttpRequest使うのもなぁ...とそんなあなたに、fetchです。下記の様に使用します。ajax失敗時[/javascript]第1引数に、GET先のURLをセットします。第2引数は省略可能で、詳細なパラメータを指定できます。fetchは、thenable(promiseオブジェクト)なので、メソッドチェーンしてGETが成功した場合の処理を書いていけます。「fetchが簡単そう、というのは分かったけど、JSONとか画像とか、どうやって捌けば良いのかしら...」はい。それ用のメソッドを使って変換します。JSONとして値を取得するfetch後のthenした時に受け取るオブジェクトが、jsonに変換するためのメソッドを持っているので、それを使用します。console.log(obj))[/javascript]jsonメソッドはthenableなので、続けてthenして後は煮るなり焼くなりできます。バイナリファイル(画像など)として値を取得するJSONの場合と似たような感じで、今度はblobメソッドを使用します。console.log(obj))[/javascript]テキストとして値を取得するtextメソッドを使用します。console.log(obj))[/javascript]パラメータをつけてfetchするjQueryでは、dataというパラメータに値をセットしていましたが、fetchでは下記のようにパラメータを渡します。GETの場合URLにパラメータをくっ付けて渡します。headersを与えて、bodyプロパティにパラメータをセットします。json_encode($if_return);?>[/php]ファイル構成は、/index.htmlimg.pngfetchjson.phpこんな感じです。index.htmlをローカル環境(apache立ち上げて)で叩いてみました。JSON取得&表示が特に問題無くできました。おわりにその他細かい点は、本家のMDNを見てください。全未サポートとなっています。代わりにとか言ってしまいましたが...jQueryの完全代替になるにはもうしばらく時間がかかりそうです。2016.09.29今回は、Javascriptでスマホアプリを開発する方法についてまとめました。hidetaso[...]【WebSlides】HTML+CSS+Javascriptでプレゼン資料を作成したら割とウケた話。2019.01.04作成した資料はこちらです。UI使用の準備まで行いました。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。【Javascript】爆速でChrome拡張プラグイン開発を試す。作り方は意外とかんたんでした。【Talend】グローバル変数の使い方(globalMapとcontext)【Talend】条件分岐(if)する4つの方法をまとめました【JSF入門02】ボタン押下時のイベントを扱う。入門01】開発環境の構築。TalendをインストールしようETL開発ツールは比較するまでもなくTalend一択だと思う。入門02】CSVデータを変換する。Talendの使い方からはじめます。【エストレヤ】なんと妹がバイク乗りになるらしい。いうわけでバイクを購入しました。Songバイクでツーリングいこっ!心に残る絶景を写真にGN倶楽部IT系カテゴリの最新記事2019.03.06Wordpress,【WordPress】突然固定ページが404エラーで表示されなくなった!?ので私の対処法を書きます。WebSlides,【WebSlides】HTML+CSS+Javascriptでプレゼン資料を作成したら割とウケた話。React,【React】Reactに爆速で入門する4。React,【React】Reactに爆速で入門する3。React,【React】Reactに爆速で入門する2。WordPress.。