jQueryでAjaxを利用する基本チュートリアル (1/4)
前回の「フォーム」に続き、jQueryの特別な機能を解説します。今回取り上げるのは、「Ajax」を利用するための機能です。 今さら聞けない「Ajax」とは？ 「Ajax」（エイジャックス）は 「Asynchronous JavaScript + XML」の略で、あえて日本語にすれば「JavaScriptとXMLによる非同期通信処理」といった意味です。難しく聞こえますが、JavaScriptでWebページを切り替えずにサーバーとデータをやりとりすることです。JavaScriptでサーバーのデータを取りに行けば、ページを切り替えずに画面の一部を書き換える、といった処理ができるようになります。 WebブラウザーはWebページを表示するために、サーバーからHTML/XHTML（以下、特に断りのない場合はHTMLと書きます）ファイルを取得し、取得したHTMLを解釈して描画（レンダリング）します。通常
jQueryのAjaxを使用して外部htmlを読み込む
Posted: 2011.04.04 / Category: javascript / Tag: Ajax, jQuery Ajaxとは画面遷移なしで、データを取得したり表示したりできるあれです。最近のWebアプリケーションでは必須な技術らしいです。 知識としては知っていたものの実際使ったことがなかったので、かなり今更感が高いですが挑戦してみます。 Ajaxはサーバー側のプログラムの方が重要な気がしますが、ここでは静的なhtmlファイルを使用します。 まずは読み込まれる側のhtmlファイルを作成します。 load.html <li>読み込めたかな？</li> 読み込まれる側は「li」だけです。「load.html」という名前で保存します。 次は読み込む側です。 index.html <ul id="sample01"></ul> <p><a href="#" id="button01">ボ
Servlet(Spring MVC) + JSP + jQueryでTwitterライクなmoreボタンを実装する - Fight the Future
ひとまず初期表示する。 DAOでは10件など固定の件数を取得する。 このサンプルでは、IDの順番に表示していく。 @RequestMapping(method = { RequestMethod.GET }) public ModelAndView index(@RequestParam(defaultValue = "0") Long Id) { // limit 10などのSQLを使って10件だけ取得する List<Dto> dtoList = this.service.list(Id); ModelAndView view = new ModelAndView(); view.addObject("list", dtoList); view.setViewName("index"); return view; } moreボタンを押したらローディング画像を表示する。 リクエストパラメ
jQueryで「もっと見る」ボタンで画像を順々に読み込むUIの実験｜BLACKFLAG
TwitterやFacebookなどで使われている コンテンツ要素をある一定の数表示（読み込み）しておいて 続きは「もっと見る」や「MORE」といったリンクやボタンをクリックすることで 要素を順々に読み込んでいくUI。 このUIを実装する際、使いやすいjQueryプラグインがなかなか見当たらなかったりするので、 同様のUIを実装する為の実験的スクリプトを作ってみたので簡単に紹介してみます。 今回の実験では＜a＞リンクを張った＜img＞画像タグを ＜span＞タグで囲った構成のまとまり ———————————————————- ＜span＞＜a＞＜img＞＜/a＞＜/span＞ ———————————————————- 上記のセットを順々に追加していく構成になっています。 併せて、画像を格納するディレクトリ名と画像ファイル名には命名規則を付けます。 ———————————————————-
Ajax入門|Ajaxの基礎と応用の学習|StudyNet
Ajax入門|Ajaxの基礎と応用の学習 Ajax入門 Web2.0を代表する技術であるAjax JavaScriptの基本からAjaxの基礎・応用までサンプルを使って紹介 Ajax（エイジャックス）の基本は、JavaScriptのプログラミングとJavaScript/Ajaxライブラリの活用です。広範囲なAjax技術の中から、特に入門者向けの記事を中心として 役に立つ情報を配信中。prototype.jsやjQueryなどのAjaxライブラリーを使ったサンプルも紹介しています。 Ajaxの基礎であるJavaScriptの基本を学ぶ為に、入門者向けの「やりなおしのJavaScript」を連載（ThinkITに掲載)。 「やりなおしのJavaScript」では、毎回小さなアプリケーションを作りながら、DOMの制御方法や、Ajax/JavaScriptの基礎文法の復習をしていきます。Think
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
