【Javascript】スマートフォンでAjax

スマートフォンでAjax

---

1: スマートフォン向けのページを作るには
2: X01HT用ページへの分岐 js
3: X01HT用ページへの分岐 php/perl
4: Ajaxでさらなる軽量化1
5: Ajaxでさらなる軽量化2

Ajaxでさらなる軽量化2

前ページのスクリプトを少し整理して、いくつかのリンクを並べやすい形にしてみました。

いわゆる$関数のようなショートカット関数divを用意して、document.getElementByIdへのショートカットを作り、ソースを短くしたことと、 コールバック関数を、sendRequestの第一関数へ無名関数として直接記述することで、送受信の処理をA要素のonclickへ一度で記述できるようにしてあります。

【最初に読み込むページ】サンプル
(http://jsgt.org/about/cu/CU20061115A/01/test2.htm)
リンククリックでtest1.txt、test2.txt、test3.txt、を読み込み、DIV test123、test124、test125へ出力します。

<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>

<!-- Ajaxライブラリ jslb_ajax051 2.651k 
   @see http://jsgt.org/mt/archives/01/000409.html -->
<script type="text/javascript"
        src="http://jsgt.org/ajax/ref/lib/jslb_ajax051_c.js" 
        charset="utf-8"></script>
<script type="text/javascript">
 function div(id){return document.getElementById(id)}
</script>

<h3>1.スマートフォン用のページについて</h3>
<div id="test123">
スマートフォン用のページは、あまり大きくない方が、、、
<a href="#"
   onclick="sendRequest(
              function (oj){div('test123').innerHTML=oj.responseText}
              ,'','GET','./test1.txt')"><br>
...つづきを読み込み込む</a>
</div>

<h3>2.Ajaxを使えば良いかも</h3>
<div id="test124">
そこで、Windows CE版のIEならデフォルトで使えるAjaxを利用すれば、、、
<a href="#"
   onclick="sendRequest(
              function (oj){div('test124').innerHTML=oj.responseText}
              ,'','GET','./test2.txt')"><br>
...つづきを読み込み込む</a>
</div>

<h3>3.X01HT</h3>
<div id="test125">

<a href="#"
   onclick="sendRequest(
              function (oj){div('test125').innerHTML=oj.responseText}
              ,'','GET','./test3.txt')"><br>
...つづきを読み込み込む</a>
</div>

【必要に応じてAjaxで読み込むファイル】
test1.txt

<p>
スマートフォン用のページは、あまり大きくない方が良い。
大画面用にレイアウトされた、大量のコンテンツデータは、
たとえ、CSSで少々のレイアウト変更を行っても、スマートフォンで見たときに
スマートなページにするのは容易ではない。
</p>
<p>
むしろ、最初から、スマートフォン専用のページとしてデザインし、
データ量やレイアウトコンセプトから完全に変更することを考えた方が、
読みやすくスマートなページを作る為のコストは低くなるかもしれない。
</p>

test2.txt

<p>
そこで、Windows CE版のIEならデフォルトで使えるAjaxを利用すれば、
さらなる軽量化をはかれる。
</p>
<p>
なぜなら、Ajaxでは、ページ遷移をせずに、必要最小限のデータだけを読み込み表示することができるから。
</p>

test3.txt

<p>
X01HTの外観画像。
</p>
<p>
<img src="//img.allabout.co.jp/gm/article/24133/htc3.jpg">
</p>