2011-10-20 9 views
2

私はAjaxでPHPからデータを取得するためにJavaScriptをブリッジする最良の方法を試してきました。 そして、すべてのコード行を最小限に抑えようとすると同時に、最大限のスピードを保ちます。 私はAJAXにObjectによる値を渡す方法を思いついたので、あたかも参照渡しのように変更してから返すことができます。しかしこれまでのところ、私はAJAXが完了するまでデータが利用できないので、これを同期するしかありません。HTML/AJAX/PHP同期調和?非同期で動作することはありますか?

ポイントは 私はjavascriptですべてのPHPコンテンツにアクセスする簡単な方法を探していました。 単純なjavascript(GetSomePHPstuff)APIをビルドします。

私はWebプログラミングの初心者ですから、これに関するいくつかの意見やフィードバックをお待ちしています。 これは私が思いついたものです。

この例では、htmlからjavascriptを使用してajaxに、phpはajaxに戻ってjavascriptからback to my HTMLページに戻します。

ここでは、単純なHTMLタイプのファイルを示します。ここでtest.htmlという

<script language="javascript" src="ajax.js"></script> 

<input type="text" id="text"/> 
<input type="button" value="Return Text" 
onClick="alert(ajaxReturnText(document.getElementById('text').value));"/> 

は、Ajax/JavaScriptのファイルです。

AJAX.js

function ReturnText(input, output){ 
    if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } 
    else{// code for IE6, IE5 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange=function(){ 
     if(xmlhttp.readyState==4 && xmlhttp.status==200){ 
      output.value = xmlhttp.responseText; 
     } 
    } 

    xmlhttp.open("GET","php.php?text="+input,false); 
    xmlhttp.send(); 
} 

function ajaxReturnText(input){ 
    var output = new Object(); 
    ReturnText(input, output); 
    return output.value 
} 

そして、ここでPHPファイルには、これは非同期でこのように動作することはできません

php.php

<?php 
function ReturnText($text){ 
    return $text; 
} 
if($text = $_GET["text"]){ 
    echo ReturnText($text); 
    die(); 
} 
?> 
+2

サー/マダム、あなたは[jQuery](http://jquery.com/)について聞いたことがありますか? – Blender

+0

まずは、ブラウザごとにあまりにも多くのコードを書く必要がないように、JavaScriptライブラリを使用することをお勧めします。これは、いくつかのJSフレームワークによって解決されたものです。 – MarioRicalde

+0

別のライブラリを使用せずに、このコードをどのように非同期で動作させることができますか? – aquawicket

答えて

2

です。あなたは、この行を理解する必要があります。

output.value = xmlhttp.responseText; 

は、あなたが非同期的にそれを定義した場合に行われます()ajaxReturnText後に実行されようとしています。同期的に定義した場合、リクエストが完了するまでajaxreturtext()は処理されません。

xmlhttp.onreadystatechange=function(){ 
     if(xmlhttp.readyState==4 && xmlhttp.status==200){ 
      output.value = xmlhttp.responseText; 
/*define what to do next here*/ 
     } 

だから、あなたが呼び出すことはありません。私にはあなたの問題は、コードが基礎的規則を尊重しなければならないということです、あなたのケースでは、これはあなたがここに、この「更新機能内部AJAX後に何をすべきかを定義するために覚えておく必要があるということですコードが直接非同期的に実行されるが、あなたが適切な機能の中からそれを呼び出すinsted、完全なコードを参照してください。あなたがもっと体験したい場合は

<html> 
<head> 
<script type="text/javascript"> 
/*to be called synch*/ 
function ReturnText(input){ 
    if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } 
    else{// code for IE6, IE5 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange=function(){ 
     if(xmlhttp.readyState==4 && xmlhttp.status==200){ 
      /*here define what to be called asynch*/ 
      ajaxReturnText(xmlhttp.responseText); 
     } 
    } 
    xmlhttp.open("GET","php.php?text="+input,true); 
    xmlhttp.send(); 
} 

/*to be called asynch*/ 
function ajaxReturnText(input){ 
    var output = new Object(); 
    output.value =input; 
    alert(output.value); 
    document.getElementById('test').innerHTML= 
    "This is the value of the object: "+input; 
} 
</script> 
</head> 
<body> 
<div id="test"></div> 
<input type="text" id="text"/> 
<input type="button" value="Return Text" 
onClick="ReturnText(document.getElementById('text').value);"/> 
</body> 
</html> 

を、私はそれのためのクラスを持っている:see here

1

サーバーを受け取ることができます生成されたイベントasync私はAJAXの前にそれをやっていました。今この方法はCometと呼ばれています。私はフレームとスクリプトテクニックを使用しました。今はajaxを使う方が良いですが、ここで解決しなければならないいくつかの問題があります。

.onreadystatechangeコールバックを使用して.readyState==3でリアルタイムにデータを受信できます。
このコールバックは、新しいデータがサーバーから送信されるたびに生成されます。最後に.responseTextのサイズを覚えておき、このポイントから新しいデータを読み込んで新しいサイズを保存する必要があります。

  • 問題番号1
    IEあなたは.readyState==4とイベントの前.responseTextを読むしようとすると、例外を発生させます。サーバー部分は、readyStateを読み取り可能にするために、イベントごとに接続を切断し、クライアントに再度作成させる必要があります(「長いポーリング」を参照)。ブラウザがIEでない場合、毎回接続を再作成する必要はありません。しかし、ここでも問題点に直面しています。
  • 問題番号2:
    .responseTextサイズ。長時間の接続であれば非常に大きくなることがあります。したがって、サーバーまたはクライアントに(イベントまたはバイト送信)カウンタを実装し、カウンタのオーバーフローによる接続を再作成する必要があります。
  • もう1つの問題 - タイムアウト。ブラウザのタイムアウトを防ぐためのイベントがない場合は、サーバー上でタイムアウトを無効にして(set_time_limit()参照)、ブラウザに無意味なもの(たとえばスペースなど)を送信する必要があります。

通常、アップロードとダウンロードの2つのチャネルが必要です。あなたはjQueryや他のフレームワークでチャンネルをアップロードしていますが、私はダウンロードについてはわかりません。 jQueryでreadyState==3テクニックを使用することはできません。 APE Frameworkすることができますか?

関連する問題