Ajaxとはサーバーと通信を行いブラウザとサーバーでデータをやり取りするプログラムのこと。今まではブラウザに読み込んだデータのみをコードで操作していました。Ajaxを使うことでリンク先(サーバー)のデータも取り込んでコードで操作することができます。サーバーと通信をするということは、通信先のサーバーに負荷をかけるということを覚えておいてください。故意に負荷をかけると違法行為になることもあるのでやめましょう。これから紹介するAjaxでは”GET”データ(htmlコード)を取ってくるだけなので、自分でリンクをクリックしたり更新(F5)をする行為と変わりがありません。今まで紹介した中でlocation.reload()なども使い方次第ではサーバーに負荷をかける攻撃のようなことも出来てしまいます。故意でなくとも違法になるような行為はしたくない!大丈夫です。故意がなければサーバーを攻撃するなんてことは起こりません。1秒間に何百とリクエスト(通信を要求)を送るようなことがなければ大丈夫です。仮にそのようなリクエストを送ったとしてもサーバー側がブロックします。攻撃される危険があるのでサーバー側が防御策を持つのは当然ですよね。そのブロックも回避するようなことをすれば、それは明らかに攻撃の意思があると見なされて違法行為になるでしょうそれも簡単なことではないので、私の記事で勉強したぐらいでは出来ないはずです。一度に送るリクエストは30個まで。24時間リクエストを送り続ける場合は最低2~5秒以上は間隔を空ける。これを越えなければ違法になるような攻撃にはなりません。リクエストは1個でリンクを1回クリックしたのと同じことです。リンク30個をタブ30個で同時に開いたとしても問題無いよ!という感じです。24時間リクエストを送り続けてデータを収集する行為をスクレイピングと言います。このスクレイピングは非常に有益な情報を生みます。興味のある人は「スクレイピング」や「ウェブスクレイピング」などで検索しましょう。以下のファイルをダウンロードして、フォルダを作りファイルを配置してください。ルートフォルダindex.htmlstyle.csstest.jslinksフォルダsample1.htmlsample2.htmlsample3.htmlsample1フォルダsample1b.pngsample2b.pngsample3b.pngsample2フォルダsample1g.pngsample2g.pngsample3g.pngsample3フォルダsample1r.pngsample2r.pngsample3r.pngとなっています。index.htmlを開いてリンク先などをチェックしてください。コードはtest.jsを作りその中に書いていきます。getImage(url,ele){}あらかじめこのようにコードが書かれているので、関数getImage(url,ele)の中身を作っていきます。目的の処理結果は、リンク先にある画像を全て取得してindex.htmlに表示する。これを実現するにはAjaxを利用してリンク先のページのhtmlコードを取得する必要があります。Ajaxを使えるようになりましょう。Ajaxを使うにはまずXMLHttpRequestというオブジェクトを作ります。Date()と同じですね。このXMLHttpRequestの持っているメソッドを使っていろいろ処理を行っていきます。基本的な使い方を確認します。コードと画像は同じものです。open(第一引数,第二引数,第三引数)openはサーバーに送るリクエストの内容を作るメソッドです。引数:”GET”か”POST”です。”POST”の方が高機能ですが今回の場合は必要がないので”GET”で行います。”POST”は何か投稿したりサーバーにデータを蓄積させることに特化しています。”GET”には簡単に扱える利点があります。第二引数:リクエストを送るURLを指定しましょう。第三引数:非同期処理を行うかどうか、デフォルト(無記入)でtrue。非同期処理にしましょう。Ajaxは非同期通信をするためのプログラムです。同期処理にしてしまうとサーバーとの通信が完了するまでページが固まります。実際にサーバーにリクエストを送る処理。”GET”の場合は引数にはnullを渡します。”POST”の場合は引数にいろいろと入れます。function(){}onreadystatechangeはイベントです。サーバーからの通信状態を常に監視してくれます。通信に変化が合った場合に中の関数の処理が行われます。現在の通信状態を教えてくれます。readyStateが4のときはデータの通信が完了した合図です。サーバーから返ってきたデータがリクエストの内容に合っているかを教えてくれます。200は正常にデータを受け取れた合図です。Errorなどがあります。見たことあるやつですね。通信で得たページのhtmlコードが入っています。このコードを取得するのがAjaxの目的です。以上が基本的なAjaxの使い方です。今はまだ覚えるのは難しいかもしれませんが処理の内容を理解できるようになっていれば大丈夫です。Ajaxで得たデータを操作して今回の目的である処理を作りましょう。>リンク先にある画像を全て取得してindex.htmlに表示する。プログラムの構成を考えます。リンクのURLを取得する。Ajaxでリンク先のhtmlコードを取得する。htmlコードを編集して現在のページに加える。1.リンクのURLを取得する。これは既にtest.jsに書いてあります。getImage(url,parent)}<a>タグと兄弟要素として追加する為に.parentNodeで親要素を取得しておきます。URLと親要素をgetImage関数に送ります。2.3.Ajaxでリンク先のhtmlコードを取得。htmlコードを編集して現在のページに加える。matchは新しく出てきたメソッドです。正規表現を使って文字列を取り出したりします。指定した文字列が存在しない場合はnullが返ってくるので、文字列の存在確認にも使えます。今回はhtmlコードの中から<img>タグを取り出します。正規表現の「.*」は何でもいい文字が何文字でもいいという意味でした。「g」が付いているのでマッチした文字全てを配列形式で返します。14行目:item.replace(‘src=”‘,’src=”links/’)まとめた<img>タグが入っている配列imgをfor-ofループで回して、パスを少し変更しますパスの頭に「links/」を付けています。out引数で受け取った<a>タグの親要素のinnerHTMLに、Ajaxで得た<img>タグを後ろに付け足して書き直します。これで現在のページにリンク先にある画像を取ってくることができました。20行目:通信が正常に行われていない状態のときの処理で、通信中と表示されるようになっています。通信中の処理が行われたことを確認できます。Ajaxは基本のコード量が多いですがネットサーフィンの効率を驚異的に上げてくれます。次回はデータをパソコンに保存するlocalstorageについて解説します。