Ajaxテクノロジーは、モバイルデバイスユーザーの間で非常に人気があります。 理由は一般的に表面にあります。 トラフィックの消費と時間の無駄を減らします。 結局、ページの一部だけがロードされ、すべてではありません（件名にない場合は、Ajaxとは何ですか-ウィキペディア-Ajaxにアクセスすることをお勧めします）。 したがって、モバイルデバイスからネットワークをサーフィンすることは、より良く、より速く、迷惑になりません。 また、安いです。
モバイルAjaxは、通常のPCとは明らかに著しく異なります。 これは、モバイルオペレーティングシステムの特定のアーキテクチャ、チャネル帯域幅などによるものです。 しかし、不可能なことは何もありません。 SVGとFlashに対する適切なサポートのみを検討する価値があります。これらは、まさにあなたがすでに使用している、または明日文字通り携帯電話やPDAで使用する技術です。
それで、今ではどんな種類の動物であるモバイルAjaxのおおよそのアイデアがあります。 もう少し詳しく見ていきましょう。
モバイルブラウザの最小要件は何ですか？ 一般に、これらの要件はあまりありません
これらは、PCのブラウザーの要件とは異なります。 XMLHttpRequestまたはActiveX、およびレンダリング用のJS DOM。
ロシア語に翻訳します-XMLHttpRequestは非同期データの読み込みに必要であり、ページを再読み込みせずにブラウザでドキュメントを変更するには最小のJS DOMが必要です。 そして、誰が考えたでしょう-私たちを助けることができるモバイルブラウザがすでにあります。 そしてそれだけでなく、彼らの数は10に近いだけでなく、en望の規則で連隊に到着します。 ますます多くの企業や企業が、モバイルAjaxが便利で必要なものであることを認識しています。
ブラウザーのリスト：
*（Opera Mobile> = 8.x、Opera Miniではありません）
* Internet Explorer Mobile（WM 5.0 + / 2003）
* S60 3rdエディション（WebKit / KHTMLコア）
* Minimo（Geckoベース）
* OpenWave（> =水銀）
* NetFront（> = 3.4）
* Safari Mobile（iPhone）
一部の専門家は、AjaxがJ2MEのようなモンスターを動かすことができると信じています。 確かに、多くのモバイルブラウザーはオペレーティングシステムが異なると動作が異なり、その結果、Ajaxは失敗するか、まったく動作しません。 しかし、これは時間の問題です。 これは開発者向けのメモです。そりを準備しますが、まだ乗らないでください。
モバイルデバイス用のAjaxプラットフォームには、mojaxまたはblingと呼ばれる別のクラスがあります。 しかし、それらは主に人間の介入なしにネットワークへのアクセスを必要とする他のデバイスに使用されます。 また、原則として、特定のデバイスAPIが必要です。
Ajax PCアプリケーションは、タンバリンと神経の無駄遣いで踊る必要があるものであることが長い間なくなりました。 これですべてがやや簡単になりました。フレームワークがたくさんあり、少なくともPrototypeまたはjQueryを使用してください。
記事の最後にいくつかのフレームワークへのリンクを示します:)
まあ何？ 行こう
まず、システムで動作するAjax'aのモバイルOSとモバイルブラウザの束をここで確認します-http : //pwmwa.com/frost/-
XMLHttpRequestオブジェクトを作成します。
req = new XMLHttpRequest();
または
req = new ActiveXObject(Microsoft.XMLHTTP);
平和と利便性のために、すべてを関数でラップします。
function getXHR()
{
if(window.XMLHttpRequest)
{
req = new XMLHttpRequest();
return true;
}
else try
{
req = new ActiveXObject('Msxml2.XMLHTTP');
return true;
}
catch(e)
{
try
{
req = new ActiveXObject(“Microsoft.XMLHTTP”);
return true;
}
catch(e)
{
req = false;
return false;
}
}
}
HTTP接続を開きます。
req.open('POST', url, true);
最初の引数は、GET、POSTなどの転送方法を定義します。
実際に要求される2番目のURLアドレス。
3番目の引数は、要求を非同期にするか、応答を受信するまで処理を停止するかを決定します。 もちろん、ほとんどの場合、trueを使用します。
要求が形成されたら、送信する必要があります。 次の方法で実行できます。
send(”);
リクエストを送信した後、その実装を制御する必要があります。 特に、サーバーがHTTP 200コードで応答したかどうかを確認する必要があります。
function ajaxCallback()
{
if(req.readyState == 4)
{
if(req.status == 200)
{
//Do something with the response
}
}
}
取得したものを処理するには、responseTextまたはresponseXmlを使用する必要があります。 1つ目はサーバーから受信したデータの表示で、2つ目はDOM互換バージョンです。 XMLHttpRequestが実行されるとすぐに、受信したデータに基づいてすぐにXHTMLを更新する必要があります。 innerHTMLを使用するのが最も便利です。
そのため、id =” someElement”のHTML要素のコンテンツを“ some text”に置き換えます。
document.getElementById('someElement').innerHTML = 'some text';
そして、サーバーから受信したデータを置き換えるには：
document.getElementById('someElement').innerHTML = req.responseText;
上記に基づいて、次の機能を持つAjaxアプリケーションを作成できます。
*リンクには実際のアドレスが含まれます。
*クリックするとサーバーにリクエストが送信され、サーバーの処理後にデータが返されます。
*ブラウザがデータを受信すると、ページのコンテンツを更新します。
* JSがオフになっている、またはその他の理由でAjaxがない場合、指定されたアドレスに移動します
ページ自体は次のようになります。
<?xml version=“1.0″ encoding=“UTF-8″?>
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.1//EN” “http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd”>
/>
dev.mobi mAjax
<a href=“fallbackTime.php”
onclick=“return updateElm('getTime.php', 'timeDiv');” >Get server time
No ajax data yet
majax.jsはJSコードそのものであり、getTime.phpはクリックするスクリプトです。
function updateElm(url, id)
{
if(getXHR())
{
req.open('POST', url, true);
req.onreadystatechange = function()
{
if(req.readyState == 4)
{
if(req.status == 200)
{
document.getElementById(id).innerHTML = req.responseText;
}
else
{
document.getElementById(id).innerHTML = 'Could not retrieve data';
}
}
req.send(”);
}
else return true;
return false;
}
ユーザーがJSスクリプトを使用してリンクをクリックすると、getTime.phpスクリプトに非同期でアクセスします。 データを受信すると、timeDivコンテナーの内容が置き換えられます。
次に、updateElemはXMLHttpRequest（getXHR（））オブジェクトへの参照を受け取り、URLへのリンクを確立し、リコール関数を定義します。 失効関数は、要求が完了したこと（req.readyState == 4）およびHTTPステータスが200であることを確認します。この関数は、id = 'id'が正常に更新されたかどうかも判断します。
結果は次のとおりです。JSが正常に機能している場合、その人はAjaxアプリケーションを使用して更新されたデータを受け取ります。 そうでない場合は、別のリンクに移動し、同じデータを受信しますが、別のページに遷移します。
getTime.phpの内容は単純です：
<?php
echo date('l dS \of FY h:i:s A');
?>
もちろん、情報を任意のものに置き換えることができます。 どのようにPHPを構築しますか-これは純粋にあなたの懸念です:)
結果として、まったく同じページを取得しますが、id =” someElement”のコンテナ内の変更されたデータを使用します。
<?php echo '<?xml version=”1.0″ encoding=”UTF-8″?>'?>
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.1//EN” “http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd”>
/>
dev.mobi mAjax
<a href=“fallbackTime.php?uid=<?php echo uniqid(); ?>”
onclick=“return updateElm('getTime.php', 'timeDiv');” >Get server time
<?php echo date('l dS \of FY h:i:s A'); ?>
機能するサンプルは、ここをクリックして ダウンロードでき ます （ サンプルをダウンロード ）。
同意します。通常のAjaxとは少し異なります。このメソッドには属性はありません。 今すぐ修正：
document.getElementById(id).innerHTML = ' 
';
要求が送信されるとすぐに、画像が表示され、サーバーからデータを受信した後にのみ表示されなくなります。
if(req.readyState == 4)
{
document.getElementById(id).innerHTML = req.responseText;
}
else
{
document.getElementById(id).innerHTML = ' 
';
}
変更後の例は、ここをクリックして ダウンロードでき ます （ 例のダウンロード ）。
デザートとして：
FROSTフレームワークプロジェクト
mAJAX FAQ
詳細、追加、必要なドキュメントは、 このアドレス の元の記事 （私が翻訳した）のページにあり ます 。
私のブログからクロスポスト。