WordPress テーマを自作しているのですが、高速化のために徐々に脱jQuery を行っています
jQuery 便利すぎてなかなか 脱jQuery 出来ないのですが、とりあえず公開ページに限定して CSSで代替可能ならCSSへ、それ以外はネイティブな JavaScript や置き換えたいなと思っています
そこで今回は Ajax について調べてみたので紹介します
ｊQuery による Ajax
WordPress で Ajax と言えば jQuery を使って処理するのが定番でした
私も Ajax はすべて jQuery を使って記述していました
例えばこんなコードです
<script type='text/javascript' >
jQuery(document).on( 'ready post-load', function(){
jQuery( 'a.clear-button' ).on( 'click', function() {
jQuery.ajax({
type: 'POST',
url: ajaxurl,
data: {
action : "test_data_clear",
post_id : jQuery( '#post_ID' ).val(),
_ajax_nonce: nonce,
},
dataType: 'json',
success: function(response, dataType) {
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
//alert('error');
}
});
});
});
</script>
クリアボタンのリンクをクリックすると Ajax で WordPress へデータを POST 送信します
検索すればサンプルもたくさん見つかるのでサーバー側の処理は省略です m(__)m
次は fetch を使った場合です
fetch による Ajax
まずは情報収集からです
ブラウザの対応状況です（2018/7 現在）
内容は MDN のドキュメントを参照してください
Fetch の使用 – Web API | MDN
ここやいくつかのサイトの紹介ページをみると、IE等では使えないが Chrome, firefox, Edje 等の最新のものなら問題なく使えるし記述もシンプルでよさげな感じです
それでは、ということでさっそく fetch を試してみました
こんなコードです。jQuery で dataType json と指定していたので、普通に json データを POST送信すればOKと思っていました
var jsdata = { action : "clear_click", msg : "test" };
fetch(ajaxurl, {
method: 'POST',
credentials: "same-origin",
body : JSON.stringify(jsdata),
headers : { 'Content-Type': 'application/json' }
}).then(function(response){
}, function(error){
});
JSで Failed to load resource: the server responded with a status of 400 (Bad Request) エラーとなります
PHPでは Automatically populating $HTTP_RAW_POST_DATA is deprecated and will be removed in a future version. エラーになっています
うーん PHP 5.6 以上ではダメみたいで使うなということみたいです (>_<)
そこで WordPress で fetch を使った Ajax について検索したのですが、なかなかこれという情報が見つかりません
どうやら header の Content-Type : application/json ではダメみたいです
調べていると以下の記事を見つけ UrlSearchParams を使ったらうまくいきました
application/x-www-form-urlencoded;charset=UTF-8 となるようです最新Ajaxリクエスト通信、Fetch APIについてメモ – Qiita
はじめに
別投稿でも明かしているが、現在javascript環境でテキストエディタを作成しており、その機能実現のためいろいろ調べた中で、いまさらながら知ったjavascriptの最新事情もあった。
今回はその中で今後最も使い…
Qiita最終的にはこんな感じでとてもシンプルに記述出来ます
document.querySelector('a.clear-button').addEventListener('click', function(){
if(self.fetch){
let params = new URLSearchParams();
params.append("action", "clear_click");
params.append("msg", "test");
fetch(ajaxurl,{
method:'POST',
credentials:"same-origin",
body:params
}).then(function(response){
}, function(error){
});
} else {
alert('ご使用のブラウザはサポートしていません。Chrome, firefox, Edge等の最新版のブラウザをご使用下さい');
}
});
ちなみに IE に対応させたいなどという場合は pollyfill のスクリプトを使います
試しに以下の pollyfill を読み込ませたところIE11でも実行できました
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/url-search-params-polyfill@4.0.1/index.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/whatwg-fetch@2.0.4/fetch.min.js"></script>
詳細は下記サイトをご参照ください
github/fetch
GitHubtaylorhakes/promise-polyfill
GitHubjerrybendy/url-search-params-polyfill
GitHub以上
WordPress での fetch の使い方を紹介しました
