XMLHttpRequestとピュアJavaScriptとええ感じのデザインでカッコよく非同期通信(Ajax)する
「俺っち、ナウなヤングにバカウケなホームページ作りたいっす！！」
こんばんわ。タクミです。
今回はJavaScriptで自作APIをナウなヤングにバカウケな感じで作っていきたいと思います。
時代の最先端を突っ切っている感じでかっこいいと思いませんか？？思いませんよね。。。(震え)
それでは、早速作っていきましょう☆
かっこいいフォームを作ってAPIを飛ばす準備をする
前回と同様、今回もスマホアプリを作るために5分でWebAPIを作る方法を全力で超親切に解説するで作成したAPIを使用してAjaxを飛ばします。
それでは、すこし長いですがHTMLを作っていきましょう！
| index.htm | |
|---|---|
| 1 | <!doctype html> |
| 2 | <html> |
| 3 | <head> |
| 4 | <meta charset="utf-8"> |
| 5 | <title>なうでヤングでCOOLにキメようぜぇ？？</title> |
| 6 | </head> |
| 7 | |
| 8 | <body> |
| 9 | |
| 10 | <form> |
| 11 | <div> |
| 12 | <input id="name" type="text" placeholder="Name"> |
| 13 | </div> |
| 14 | |
| 15 | <div> |
| 16 | <textarea id="contact" placeholder="Contact"></textarea> |
| 17 | </div> |
| 18 | |
| 19 | <div> |
| 20 | <button id="send">Send</button> |
| 21 | </div> |
| 22 | </form> |
| 23 | |
| 24 | <style> |
| 25 | /* COOLに決めるためのスタイルシートだぜぇ？ */ |
| 26 | |
| 27 | * { |
| 28 | box-sizing: border-box; |
| 29 | font-weight: 100; |
| 30 | } |
| 31 | |
| 32 | form { |
| 33 | width: 480px; |
| 34 | |
| 35 | position: absolute; |
| 36 | top: 50%; |
| 37 | left: 50%; |
| 38 | transform: translate(-50%, -50%); |
| 39 | } |
| 40 | |
| 41 | input, textarea, button { |
| 42 | font-size: 1.25rem; |
| 43 | } |
| 44 | |
| 45 | input, textarea { |
| 46 | width: 100%; |
| 47 | } |
| 48 | |
| 49 | input { |
| 50 | margin-bottom: 20px; |
| 51 | padding: 8px 0 8px 8px; |
| 52 | border: 1px solid #4f616f; |
| 53 | border-radius: 4px; |
| 54 | } |
| 55 | textarea { |
| 56 | height: 160px; |
| 57 | margin-bottom: 14px; |
| 58 | padding: 8px 0 0 8px; |
| 59 | border: 1px solid #4f616f; |
| 60 | border-radius: 4px; |
| 61 | } |
| 62 | |
| 63 | button { |
| 64 | padding: 8px 32px; |
| 65 | color: #0074bf; |
| 66 | border: 1px solid #0074bf; |
| 67 | border-radius: 4px; |
| 68 | background: #fff; |
| 69 | |
| 70 | transition: all .444s; |
| 71 | } |
| 72 | button:hover { |
| 73 | background: #0074bf; |
| 74 | color: #fff; |
| 75 | } |
| 76 | |
| 77 | div:last-of-type { |
| 78 | text-align: center; |
| 79 | } |
| 80 | |
| 81 | </style> |
| 82 | |
| 83 | <script>/* 次のステップで中身を書きます */</script> |
| 84 | </body> |
| 85 | </html> |
上記のHTMLをブラウザで開くと下記の画像のようになります。
そこそこ見栄えばよいのではないでしょうか？？
これならナウなヤングにバカウケしそうな気がします。
…そうですね。私のデザインセンスが古すぎるのですね。すみません。。。(´；ω；｀)ﾌﾞﾜｯ
今回はpure JavaScriptを使ってXMLHttpRequestでAjaxする記事なので許してくださいお願いします。。。
以下はindex.htmの簡単な解説です。
1行目の<!doctype html>で、このHTMLはHTML5で記述していますと宣言してます。
10行目から22行目でformを作成し、この中に名前と問い合わせ内容を入力するフォームと
入力した内容をAPIに飛ばすためのボタンを配置しています。
24行目から81行目の<style>ですが、ここでこのHTMLをどのようなデザインで見せるか記述しています。
buttonのデザインにはtransitionを設定してマウスホバー時にちょっとCoolに色が変わるようにしてます。
マネしていいですよ♡(笑)
83行目に書いているscriptの箇所はボタンを押したときのJavaScriptを読み込みます。
それでは、ボタンを押したときにAjaxでAPIを飛ばす処理を作っていきましょう！
イケてるJavaScriptとXMLHttpRequestを駆使して非同期通信する
それでは、83行目の<script>の中に下記のコードを記述していきましょう。
| scriptタグの中に書くjs | |
|---|---|
| 1 | /* エレガントなAjaxキメちゃうぜぇ？？ */ |
| 2 | |
| 3 | // Ajax飛ばす先のURL |
| 4 | var url = 'http://localhost:3000/contacts.json'; |
| 5 | |
| 6 | // Ajaxで飛ばすのでformの遷移を無効にする |
| 7 | document.getElementsByTagName('form')[0].addEventListener('submit', function(e) { |
| 8 | return e.preventDefault(); |
| 9 | }); |
| 10 | |
| 11 | // ボタンを押したときの処理 |
| 12 | var sendButton = document.getElementById('send'); |
| 13 | sendButton.addEventListener('click', function() { |
| 14 | |
| 15 | var nameVal = document.getElementById('name').value; |
| 16 | var contactVal = document.getElementById('contact').value; |
| 17 | |
| 18 | var sendData = { |
| 19 | contact: { |
| 20 | name: nameVal, |
| 21 | contact: contactVal |
| 22 | } |
| 23 | }; |
| 24 | |
| 25 | var xhr = new XMLHttpRequest(); |
| 26 | xhr.onreadystatechange = function() { |
| 27 | if (this.readyState == 4 && this.status == 201) { |
| 28 | alert('送信完了!'); |
| 29 | } else if (this.readyState == 4) { |
| 30 | alert('失敗。。。'); |
| 31 | } |
| 32 | }; |
| 33 | xhr.open('POST', url); |
| 34 | xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8'); |
| 35 | xhr.send(JSON.stringify(sendData)); |
| 36 | |
| 37 | }); |
4行目のurlにAPIのURLを記述します。
今回はスマホアプリを作るために5分でWebAPIを作る方法を全力で超親切に解説するで作ったAPIを飛ばすので、
http://localhost:3000/contacts.jsonに設定しました。
6行目から9行目でformが送信されるときの処理を中断しています。
この処理をいれないとボタンを押したときに、画面遷移して、思った動きと違う動きをするので注意してください。
もちろん、この処理をいれないとAjaxは動きません。。。
12行目、13行目でボタンを押したときの処理を記述します。
15行目から23行目でAPIへ送信するデータを作っています。
この処理は飛ばす先のAPIによって異なりますので、当記事のAPIと違うものを使っている場合は、
そのAPIが受け付けるデータに調整してください。
25行目から我らがヒーロー、XMLHttpRequestさんの出番です！
onreadystatechangeに、ajaxを送った後の処理を関数で渡します。
今回は、正常に通信が完了して( readyStateが4 )、APIからの返されたHTTPコードが受け付けてもらえたことを示す201( statusが201 )のときに
成功したことをお知らせするダイアログを表示しています。
正常に通信が完了(readyStateが4)したが、返ってきたHTTPコードが201以外のときは、失敗したことをダイアログで知らせています。
まとめ
うまくAPIをAjaxで送信することはできましたか？？
今回の記事内容を簡単にまとめさせていただくと、
- ナウなヤングにバカウケのAPIを送信するためのデータを入力するフォームを作ります。
- Ajaxを送信するためにXMLHttpRequestを使う。
- エラーがでたらチョベリバ。うまくいけばチョベリグ。
といった感じです。コラそこのお方、化石おじさんって呼ばないで(´；ω；｀)ﾌﾞﾜｯ
ちなみに、今更ですが、<style>...で囲んだ部分がなくても動きます。
ですが、ちょっとデザイン整えたほうがそれっぽく見えて楽しいと思ったので、
独断と偏見でモダン()な感じにしてみました。
もし、うまく動かないよ〜って方や、こんなことしてみたいんだけどなぁ…というGoodな思いがありましたら、コメントしてくださいな♪
