ホームページ >ウェブフロントエンド >jsチュートリアル >ajaxでコマンドを取ります

ajaxでコマンドを取ります

Lisa Kudrowオリジナル: 2025-03-06 01:03:12404ブラウズ

ajaxでコマンドを取ります

GmailやGoogleマップなど、よりダイナミックで応答性の高いデスクトップのようなWebアプリケーションを構築したいですか？それからこの記事はあなたのためです！ Ajaxの基本と、単純なAjaxアプリケーションを構築するプロセスを通じてあなたを案内します。

このアプリケーションは、通常シェルアクセスが必要なシステムコマンドを実行するためのブラウザインターフェイスであるWebConsoleという名前です。また、2つの一般的なJavaScriptライブラリのAJAX機能を使用した短い例 - jqueryとYui。この記事では、2005年に最初に公開され、最近更新されたこの記事では、HTTPリクエストを作成するための1つのシンプルで再利用可能なJavaScript関数の作成について説明します。次に、単純なアプリケーションの作成にその関数を適用します。

YuiとjQueryの例はいくつかありますが、この記事は特定のAjaxライブラリのチュートリアルではありません。代わりに、HTTPリクエストの作成に関するより多くの実践的な情報を提供することを目指しています。そうすれば、そのようなライブラリを評価したり、自分で行くことを決定したりするときに、より良い位置にあります。

キーテイクアウト

ajaxは、ブラウザ内でHTTPリクエストを処理することにより、GmailとGoogleマップと同様の動的で応答性の高いWebアプリケーションを作成できます。

このチュートリアルでは、JQueryやYuiなどの特定のライブラリに依存せずにさまざまなアプリケーションで使用できるHTTPリクエストを作成するための再利用可能なJavaScript機能を紹介します。

簡単な例は、HTTPリクエストを作成する基本的な手順を示しています：XMLHTTPRequestオブジェクトの作成、コールバック関数の割り当て、およびリクエストの送信

セキュリティの懸念が強調され、実行可能なコマンドを制限し、入力を消毒して不正なサーバーアクセスを防ぐことの重要性を強調しています。
3つの基本的な手順があります
xmlhttprequestオブジェクトを作成します

リクエストを作成（送信）。

「私はテストです」というテキストのみが含まれている単純なHTMLドキュメントTest.htmlをリクエストする例を見てみましょう。次に、test.htmlファイルの内容を（）lasert（）

に確認します

この例の仕組みは次のとおりです

ユーザーは「リクエストを作成する」ボタンをクリックしますこれは、同じディレクトリ内のhtmlファイルの名前を使用して、makerequest（）関数を呼び出します。この場合、それはtest.html。

リクエストが送信されます

上記の例は正常に機能しましたが、プライムタイムの準備をする前に改善する必要があることが1つあります。改善は、すべての退屈で反復的なオブジェクトの作成とリクエスト/応答のものを処理する再利用可能な要求関数をコーディングすることです。上記の例では、グローバル変数http_requestが必要でした。これには、makerequest（）とalertcontents（）関数の両方がアクセスできました。理想的には、makerequest（）はリクエストを実行する必要があり、alertcontents（）は結果を表示するだけです。どちらの関数も、他の関数を知っている、または要求する必要はありません。

再利用可能なリクエスト関数のコード：

この関数は、3つのパラメーターを受信します：

を取得するためのURL

応答が受信されたときに呼び出す関数

コールバック関数がXMLドキュメント（true）またはプレーンテキスト（false、default）を期待している場合、フラグ

<button >Make a request</button> <br>
 <br>
<script type="text/javascript"> <br>
 <br>
var http_request = false; <br>
 <br>
function makeRequest(url) { <br>
 <br>
   if (window.XMLHttpRequest) { // Mozilla, Safari, IE7... <br>
       http_request = new XMLHttpRequest(); <br>
   } else if (window.ActiveXObject) { // IE6 and older <br>
       http_request = new ActiveXObject("Microsoft.XMLHTTP"); <br>
   } <br>
   http_request.onreadystatechange = alertContents; <br>
   http_request.open('GET', url, true); <br>
   http_request.send(null); <br>
 <br>
} <br>
 <br>
function alertContents() { <br>
   if (http_request.readyState == 4) { <br>
       if (http_request.status == 200) { <br>
           alert(http_request.responseText); <br>
       } else { <br>
           alert('There was a problem with the request.'); <br>
       } <br>
   } <br>
} <br>
 <br>
document.getElementById('mybutton').onclick = function() { <br>
   makeRequest('test.html'); <br>
} <br>
 <br>
</script>

この関数は、リクエストオブジェクトをうまくラップおよび分離するために、2つのJavaScript機能に依存しています。 1つ目は、このように、そのように、その場で新しい関数（匿名関数と呼ばれる）を定義する機能です。

http_request.onreadystatechange = function（）{...}

もう1つのトリックは、事前に名前を知らずにコールバック関数を呼び出す機能です。たとえば、

関数のもう1つの機能は、200以外の応答コードの処理です。これは、返される成功/エラーコードのタイプに応じて、より具体的になり、適切なアクションを実行する場合に便利です。
単純な例が再検討されました

test.htmlファイルの内容がalert（）edであった前の例をやり直しましょう。今回は、光沢のある新しい再利用可能な要求関数を使用することにより、使用される2つの関数の改訂版がはるかに簡単になります。
```
<button >Make a request</button> 
 
<script type="text/javascript"> 
 
var http_request = false; 
 
function makeRequest(url) { 
 
   if (window.XMLHttpRequest) { // Mozilla, Safari, IE7... 
       http_request = new XMLHttpRequest(); 
   } else if (window.ActiveXObject) { // IE6 and older 
       http_request = new ActiveXObject("Microsoft.XMLHTTP"); 
   } 
   http_request.onreadystatechange = alertContents; 
   http_request.open('GET', url, true); 
   http_request.send(null); 
 
} 
 
function alertContents() { 
   if (http_request.readyState == 4) { 
       if (http_request.status == 200) { 
           alert(http_request.responseText); 
       } else { 
           alert('There was a problem with the request.'); 
       } 
   } 
} 
 
document.getElementById('mybutton').onclick = function() { 
   makeRequest('test.html'); 
} 
 
</script>
```
ご覧のとおり、AlertContents（）は単純なプレゼンテーションです。
これらの関数は1ライナーにすぎないため、実際にそれらを完全に取り除き、代わりに関数呼び出しを変更できます。したがって、例全体が次のようになります

はい、そんなに簡単です！例と完全なソースコードを表示します（古い友人ビューソースから入手可能）。
```
function makeHttpRequest(url, callback_function, return_xml) 
{ 
  var http_request, response, i; 
 
  var activex_ids = [ 
    'MSXML2.XMLHTTP.3.0', 
    'MSXML2.XMLHTTP', 
    'Microsoft.XMLHTTP' 
  ]; 
 
  if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+... 
    http_request = new XMLHttpRequest(); 
    if (http_request.overrideMimeType) { 
      http_request.overrideMimeType('text/xml'); 
    } 
  } else if (window.ActiveXObject) { // IE6 and older 
    for (i = 0; i < activex_ids.length; i++) { 
      try { 
        http_request = new ActiveXObject(activex_ids[i]); 
      } catch (e) {} 
    } 
  } 
 
  if (!http_request) { 
    alert('Unfortunately your browser doesn't support this feature.'); 
    return false; 
  } 
 
  http_request.onreadystatechange = function() { 
    if (http_request.readyState !== 4) { 
        // not ready yet 
        return; 
    } 
    if (http_request.status !== 200) { 
      // ready, but not OK 
      alert('There was a problem with the request.(Code: ' + http_request.status + ')'); 
      return; 
    } 
    if (return_xml) { 
      response = http_request.responseXML; 
    } else { 
      response = http_request.responseText; 
    } 
    // invoke the callback 
    callback_function(response); 
  }; 
 
  http_request.open('GET', url, true); 
  http_request.send(null); 
}
```
私たちのプロジェクト：WebConsoleアプリケーション

ajaxの基本を知り、リクエストを行う再利用可能な方法で武装して、もっと深く行きましょう。実際に使用できる小さなものを作成します。

作成するアプリケーションでは、Windows-またはLinuxベースのいずれであっても、Webサーバー上のシェルコマンドを実行できます。アプリをコンソールウィンドウのように感じさせるために、少しのCSSの努力をします。インターフェイスごとに、これまでに実行されたコマンドの結果を含む1つのスクロール可能な
と、実行するコマンドを入力する1つのがあります。どちらも黒い背景と灰色の宅配便のフォントを持っています。これがスクリーンショットです。

html

これがアプリケーションのHTML部分です：

それだけです：a
は、実行されているコマンドの結果と、コマンドを入力できるで更新されます。それは素晴らしく、きれいなインターフェースで、レスリングはありません、ページのリロードはありません - それはありません！ css <pre class="brush:php;toolbar:false">var callmeback = alert; callmeback('test'); // alerts 'test'</pre> スタイルシートWebConsole.cssは、結果のスタイルを定義します <div>およびコマンド<inupt>： オーバーフロープロパティをAUTOに設定することにより、コマンド実行結果がスクロール可能であることを示す<div>を作成します。また、<pre class="brush:php;toolbar:false">タグ表示プロパティをインラインに変更します（ブロックはデフォルトです）。また、すべてを「コンソール」に見せるための再利用可能な.Consoleクラスもあります。サーバー側のコード <pre class="brush:php;toolbar:false">function alertContents(text) { alert(text); } function makeRequest(url) { makeHttpRequest(url, alertContents); }</pre>当社のアプリケーションは、GETパラメーター「コマンド」を介してコマンドを受信するサーバー側のスクリプト（Exec.Php）にリクエストを行います。このスクリプトは、コマンドが許可リストに表示されることを単にチェックします（このリストを編集してより多くのコマンドを許可することができます）、コマンドを実行し、結果を印刷します。コマンドは、ネイティブPHP機能shell_exec（）の助けを借りて実行されます。 PHPはここで使用されていますが、お好みのサーバー側の言語を使用してこの機能を実装するのは比較的簡単なはずです。<pre class="brush:php;toolbar:false"><button >Make a request</button> <script type="text/javascript"> var http_request = false; function makeRequest(url) { if (window.XMLHttpRequest) { // Mozilla, Safari, IE7... http_request = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE6 and older http_request = new ActiveXObject("Microsoft.XMLHTTP"); } http_request.onreadystatechange = alertContents; http_request.open('GET', url, true); http_request.send(null); } function alertContents() { if (http_request.readyState == 4) { if (http_request.status == 200) { alert(http_request.responseText); } else { alert('There was a problem with the request.'); } } } document.getElementById('mybutton').onclick = function() { makeRequest('test.html'); } </script></pre> 警告！ $ Aldocat_Commandsアレイは、ユーザーがコンソールを介して実行できるコマンドを制限します。アレイに好きなだけコマンドを追加できますが、Webサーバーで追加のコマンドが実際に実行されることに注意してください：フォーマットC :: Apachectl StopまたはRMâ€“ RFなどは、推奨されません！ javascript javascriptコードの最初のステップは、名前空間を定義することです。本質的には空のオブジェクトにすぎないものの栄光のラベル： 必要な他のすべての変数と関数は、このオブジェクトのプロパティとして定義されます。これにより、グローバルネームスペースを清潔に保ち、コードを自己完結型に保つことができます。 <pre class="brush:php;toolbar:false">function makeHttpRequest(url, callback_function, return_xml) { var http_request, response, i; var activex_ids = [ 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP' ]; if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+... http_request = new XMLHttpRequest(); if (http_request.overrideMimeType) { http_request.overrideMimeType('text/xml'); } } else if (window.ActiveXObject) { // IE6 and older for (i = 0; i < activex_ids.length; i++) { try { http_request = new ActiveXObject(activex_ids[i]); } catch (e) {} } } if (!http_request) { alert('Unfortunately your browser doesn't support this feature.'); return false; } http_request.onreadystatechange = function() { if (http_request.readyState !== 4) { // not ready yet return; } if (http_request.status !== 200) { // ready, but not OK alert('There was a problem with the request.(Code: ' + http_request.status + ')'); return; } if (return_xml) { response = http_request.responseXML; } else { response = http_request.responseText; } // invoke the callback callback_function(response); }; http_request.open('GET', url, true); http_request.send(null); }</pre>アプリケーション内のJavaScriptコードのフローは次のとおりです。 WebConsole.KeyEvent（）関数は、入力フィールドのOnKeyUpイベントに添付され、キーが押されてリリースされるたびに呼ばれます。 webConsole.keyEvent（）コード13のキーが押されているかどうかを確認します（これはENTER/RETURNキーです）<ol> <li> ENTERが押された場合、リクエストのURLは次のように構築されています：exec.php？command = the-command-entered-by the-user</li> <li>URLは、再利用可能なmakehttprequest（）関数に渡されます。また、コールバック関数の名前 - webconsole.printresult - は、makehttprequest（）のパラメーターとして提供されます。 </li>サーバーの応答が成功した後、webConsole.printresult（）が呼び出されます webconsole.printresult（）結果<div>を更新し、<div>をスクロールし、コマンドテキストボックスをクリアして次のコマンドを入力する余地を作成します。 <li> </li>keyevent（）関数の本体がどのように見えるかは次のとおりです。 <li> makehttprequest（）の3番目のパラメーターとしてtrueを渡さなかったため、テキスト応答（xmlではない）はprintresult（）に渡されます。 </li> 次に、結果<div>を更新する関数を見てみましょう。その<div>を更新する簡単な方法が1つあります。 <li> </li>しかし、HTMLコードを文字列として扱うため、innerhtmlを使用するためにWebページを動的に更新するために動的に更新されるのは、DOMメソッドとプロパティを介してアクセス可能なノードのXMLツリーを含むドキュメントとしてページを扱うことを好むため、InnerHTMLを使用してWebページを動的に更新します。 DOMは、<div>を更新するために、今すぐ取るパスです。 これが関数です。以下に、それがどのように機能するかについてのいくつかのメモがあります：<li> </li> この関数： <ul> <li> 新しいテキストノードを作成してドキュメントツリーに追加することにより、<inupt>に<inupt>に入力されたコマンドを<div>に追加します <li>コマンド実行の結果を表示します。これは、結果を線に分割し、各線をドキュメントツリーに追加することによって行われ、これらの各線を<pre class="brush:php;toolbar:false">タグに包み、間隔を保持します。結果を分割する必要があります。いくつかの行が含まれている可能性があるためです（「ls -la」（またはwindowsで「dir」が実行された場合の結果を想像してください）</pre> </li> <li>新しいカーソルのようなテキストノード（： - >）</li>を追加します <li>スクロールトップとスクロールハイトのプロパティ（非W3C標準ですが、最新のブラウザでサポートされている）を使用して、<div>をスクロールしてスクロールします。次のコマンドを入力できるように、コマンド<inupt>をクリアします<li> </li> JavaScriptの最後のタスクは、イベントを処理することです。 フォームの提出物は単に「ミュート」されているため、ページの更新がない<ul> <li>メソッドwebconsole.keyevent（）は、コマンドが入力される入力のキーアップイベントに添付されています。 </li> <li> </li>そしてそこに行きます！これがパズルの最後のピースでした。私たちが今持っているのは、ゼロから構築された作業ajaxアプリケーションです。</ul> <pre class="brush:php;toolbar:false"><button >Make a request</button> <script type="text/javascript"> var http_request = false; function makeRequest(url) { if (window.XMLHttpRequest) { // Mozilla, Safari, IE7... http_request = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE6 and older http_request = new ActiveXObject("Microsoft.XMLHTTP"); } http_request.onreadystatechange = alertContents; http_request.open('GET', url, true); http_request.send(null); } function alertContents() { if (http_request.readyState == 4) { if (http_request.status == 200) { alert(http_request.responseText); } else { alert('There was a problem with the request.'); } } } document.getElementById('mybutton').onclick = function() { makeRequest('test.html'); } </script></pre>少し余分な 前の例のソースコードを見るのに十分興味がある場合、このアプリにはこれまで議論してきたものよりも少し多くあることに気付いたかもしれません。小さな余分なものは実際にはAjax関連ではありませんが、アプリケーションがコマンドプロンプトのように感じられます。問題の機能には、セッションで使用されているコマンドの履歴にアクセスするために、上下の矢印キーを使用することが含まれます。 <h5> </h5> 'ls -la'、「ls」を実行したとしましょう。 Up-Arrowキーを押した場合、コマンド<inupt>には最後に使用されたコマンドが登録されます。つまり、「ls」です。アップアローキーをもう一度押して、コマンド入力に「LS -LA」が表示されます。ダウンアローキーを押します。コマンドの歴史を移動すると、再び「LS」に到達します。自分で試してみてください。 この機能の実装は難しくありません。これまでに実行されたすべてのコマンドを保存する配列が必要です。 webconsole.commands_history = []; …そして、私たちがどこにいたかを覚えている配列ポインター（整数）： WebConsole.KeyEvent（）関数のリストを次に示します。履歴機能を扱う線は、太字で表示されます。 <pre class="brush:php;toolbar:false">function makeHttpRequest(url, callback_function, return_xml) { var http_request, response, i; var activex_ids = [ 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP' ]; if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+... http_request = new XMLHttpRequest(); if (http_request.overrideMimeType) { http_request.overrideMimeType('text/xml'); } } else if (window.ActiveXObject) { // IE6 and older for (i = 0; i < activex_ids.length; i++) { try { http_request = new ActiveXObject(activex_ids[i]); } catch (e) {} } } if (!http_request) { alert('Unfortunately your browser doesn't support this feature.'); return false; } http_request.onreadystatechange = function() { if (http_request.readyState !== 4) { // not ready yet return; } if (http_request.status !== 200) { // ready, but not OK alert('There was a problem with the request.(Code: ' + http_request.status + ')'); return; } if (return_xml) { response = http_request.responseXML; } else { response = http_request.responseText; } // invoke the callback callback_function(response); }; http_request.open('GET', url, true); http_request.send(null); }</pre>コマンドの履歴を提供するための関数がどのように機能するかについてのメモを次に示します。 <ul> <eenter>up矢印（キーコード38）を「戻る」を意味する場合、履歴_pointerを削除し、歴史リストの前のコマンドをに導きます。ダウンアローを押すとポインターが1つずつ増加し、次のコマンドが表示されます。 <li> </li> <li> </li> XML</eenter> </ul>の作業 これまでのところ、XMLドキュメントを要求して使用する方法については説明していません。 XMLHTTPオブジェクトのResponseTextプロパティを使用していました。ドキュメントのリクエストは、すでに見たものと違いはありません。応答テキストとは対照的に、再利用可能なリクエスト関数にResponseXMLを返すよう指示する必要があります。 3番目のパラメーターをtrueに設定することでそれを行います： <h5> </h5>次に、exec.phpスクリプトを変更して、プレーンテキストの代わりに有効なXMLを返す必要があります。新しいスクリプト（exec_xml.php）のソースコードは次のとおりです このように、コマンド 'ls test.html'を実行すると、新しいサーバー側のスクリプトが以下を返します。 <pre class="brush:php;toolbar:false"><button >Make a request</button> <script type="text/javascript"> var http_request = false; function makeRequest(url) { if (window.XMLHttpRequest) { // Mozilla, Safari, IE7... http_request = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE6 and older http_request = new ActiveXObject("Microsoft.XMLHTTP"); } http_request.onreadystatechange = alertContents; http_request.open('GET', url, true); http_request.send(null); } function alertContents() { if (http_request.readyState == 4) { if (http_request.status == 200) { alert(http_request.responseText); } else { alert('There was a problem with the request.'); } } } document.getElementById('mybutton').onclick = function() { makeRequest('test.html'); } </script></pre>より多くの行（ 'ls -la'など）を返すコマンドを実行すると、応答のすべての行が<line>タグに包まれます。 JavaScript Dom関数を使用して上記のXMLドキュメントをナビゲートして、<sults>を処理し、結果に表示<div>。新しいwebConsole.printresult（）メソッドの本文は次のとおりです <pre class="brush:php;toolbar:false">function makeHttpRequest(url, callback_function, return_xml) { var http_request, response, i; var activex_ids = [ 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP' ]; if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+... http_request = new XMLHttpRequest(); if (http_request.overrideMimeType) { http_request.overrideMimeType('text/xml'); } } else if (window.ActiveXObject) { // IE6 and older for (i = 0; i < activex_ids.length; i++) { try { http_request = new ActiveXObject(activex_ids[i]); } catch (e) {} } } if (!http_request) { alert('Unfortunately your browser doesn't support this feature.'); return false; } http_request.onreadystatechange = function() { if (http_request.readyState !== 4) { // not ready yet return; } if (http_request.status !== 200) { // ready, but not OK alert('There was a problem with the request.(Code: ' + http_request.status + ')'); return; } if (return_xml) { response = http_request.responseXML; } else { response = http_request.responseText; } // invoke the callback callback_function(response); }; http_request.open('GET', url, true); http_request.send(null); }</pre> XMLドキュメントのデータを使用して結果 <div>を更新するために、手順に従います。 <pre class="brush:php;toolbar:false">var callmeback = alert; callmeback('test'); // alerts 'test'</pre> ソースXMLからノードにアクセスします その価値を取得します 新しいノードを作成します <div>ターゲットツリーに追加します。 <pre class="brush:php;toolbar:false">function alertContents(text) { alert(text); } function makeRequest(url) { makeHttpRequest(url, alertContents); }</pre> コードxmldoc.getelementsBytagname（ 'command'）に表示されるように、すべての<command>ノードのコレクション（配列のようなリストオブジェクト）を返します。私たちの場合、そのようなノードは1つだけです。次の値でその値にアクセスします：</command> ノード値を取得し、新しいテキストノードを作成して、次のように<div>に追加されます。 <ol> <li>XMLドキュメントの<sults>タグで同じことをします。まず、すべての<line> s：</line></sults> </li>を取得します <li>次に、result_collectionの各要素をループします。繰り返しますが、結果の各行を<pre class="brush:php;toolbar:false">タグに巻き付けます。ご覧のとおり、xmldocumentを使用して作業することは、プレーンテキスト応答を使用することよりもはるかに難しくありません。 WebConsoleのXMLバージョンを自分でテストできます。 </pre> </li> jquery を使用します <li> jQueryは人気のJavaScriptライブラリです。再利用可能なmakehttprequest（）関数の代わりに、ajax機能に使用してみましょう。 </li> 最初に、ここからライブラリの最新バージョンをダウンロードする必要があります（私はミニファイズされたバージョンをお勧めします）。<pre class="brush:php;toolbar:false"><button >Make a request</button> <script type="text/javascript"> var http_request = false; function makeRequest(url) { if (window.XMLHttpRequest) { // Mozilla, Safari, IE7... http_request = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE6 and older http_request = new ActiveXObject("Microsoft.XMLHTTP"); } http_request.onreadystatechange = alertContents; http_request.open('GET', url, true); http_request.send(null); } function alertContents() { if (http_request.readyState == 4) { if (http_request.status == 200) { alert(http_request.responseText); } else { alert('There was a problem with the request.'); } } } document.getElementById('mybutton').onclick = function() { makeRequest('test.html'); } </script></pre> このようなmakehttprequest（）を呼び出していた部分がありました： <pre class="brush:php;toolbar:false">function makeHttpRequest(url, callback_function, return_xml) { var http_request, response, i; var activex_ids = [ 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP' ]; if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+... http_request = new XMLHttpRequest(); if (http_request.overrideMimeType) { http_request.overrideMimeType('text/xml'); } } else if (window.ActiveXObject) { // IE6 and older for (i = 0; i < activex_ids.length; i++) { try { http_request = new ActiveXObject(activex_ids[i]); } catch (e) {} } } if (!http_request) { alert('Unfortunately your browser doesn't support this feature.'); return false; } http_request.onreadystatechange = function() { if (http_request.readyState !== 4) { // not ready yet return; } if (http_request.status !== 200) { // ready, but not OK alert('There was a problem with the request.(Code: ' + http_request.status + ')'); return; } if (return_xml) { response = http_request.responseXML; } else { response = http_request.responseText; } // invoke the callback callback_function(response); }; http_request.open('GET', url, true); http_request.send(null); }</pre> jQueryのajax（）メソッドを使用することができます： var xhr = $ .ajax（{ url： 'exec.php'、 データ：{'command'：the_shell_command}、 成功：webconsole.printresult }）; ここに持っているものを見てみましょう： </ol> <ul> <li> $はjqueryの簡単な名前です。代わりにこれを行うこともできます：jquery.ajax </li> <li> ajax（）メソッドを呼び出し、要求するURLを含むオブジェクト、データオブジェクト（Jqueryによって逃げてクエリ文字列に変換されます）、および応答が届くと呼び出すコールバック関数を通過します。 </li> </ul> jQueryを使用したWebコンソールの実用的な例はこちらです。 ドキュメントを見ると確認されるように、jQueryでajaxを使用する方法は他にもあります。たとえば、ファイルの内容（test.html）を使用してa <div>（id mydivを使用）を更新するという頻繁に繰り返されるタスクは、次のように簡単です。 こちらの例を参照してください。 <pre class="brush:php;toolbar:false">var callmeback = alert; callmeback('test'); // alerts 'test'</pre> yuiを使用します <h5>もう1つの人気のJavaScriptライブラリはYui（Yahoo Interface Library）です。 YuiのAjax機能でWebコンソールを機能させる方法を見てみましょう。 </h5>YuiファイルはYahooがすでに無料でホストしており、現在の場所から使用できるため、Yuiファイルをダウンロードする必要はありません。 AJAX機能は、接続マネージャーユーティリティによって提供されます。これは、次のようなページに含めます。 さて、Yuiを利用するために、MakehttpRequest（）に呼び出しを置き換えます： // Yui's Ajax<pre class="brush:php;toolbar:false">function alertContents(text) { alert(text); } function makeRequest(url) { makeHttpRequest(url, alertContents); }</pre> yahoo.util.connect.asyncrequest（ 「取得」、 'exec.php？command =' escase（the_shell_command）、 { 成功：function（xhr）{ webconsole.printresult（xhr.responseText） } } ）; asyncrequest（）メソッドが になることがわかります メソッドを要求します（get、post、head、deleteなど） url <ul> <li>成功と失敗のシナリオを処理する機能を含むオブジェクト</li> <li> <smlhttprequest>弦を連結および脱出することにより、URLがどのように作成されたかを見ることができます。この場合、クエリ文字列を通過する値は1つだけです。しかし、もっとある場合、それはかなり不便になります。 Yuiは、SetForm（）メソッドを提供することにより、そのような状況に簡単に対処するのに役立ちます。フォームを設定すると、Yuiはフォームから値を取得し、クエリ文字列を逃がして縫い合わせます。 yahoo.util.connect.setform（document.forms [0]）; yahoo.util.connect.asyncrequest（ 「取得」、 'exec.php'、 { 成功：function（xhr）{ webconsole.printresult（xhr.responseText） } } ）; Yuiを使用したWebコンソールの実用的な例です。 json を使用しています JSON（JavaScriptオブジェクト表記）は、一般的なデータ交換形式です。サーバーからブラウザへのデータの通信に関しては、プレーンテキストまたはXMLの別の代替手段が提供されます。 JSONは非常に簡単です。本質的に、それはただのJavaScriptです。 javascriptでは、次のような配列とオブジェクトを定義できます。 同じことができますが、アレイとオブジェクトのリテラルを使用して： <pre class="brush:php;toolbar:false"><button >Make a request</button> <script type="text/javascript"> var http_request = false; function makeRequest(url) { if (window.XMLHttpRequest) { // Mozilla, Safari, IE7... http_request = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE6 and older http_request = new ActiveXObject("Microsoft.XMLHTTP"); } http_request.onreadystatechange = alertContents; http_request.open('GET', url, true); http_request.send(null); } function alertContents() { if (http_request.readyState == 4) { if (http_request.status == 200) { alert(http_request.responseText); } else { alert('There was a problem with the request.'); } } } document.getElementById('mybutton').onclick = function() { makeRequest('test.html'); } </script></pre>このリテラル表記は、JSONがデータを渡すために使用するものです。 JavaScriptのプロパティに関する引用は、ほとんどの場合は必須ではありませんが、慣習によりJSONでは必要です。 コンソールを変更して、JSON形式を使用してデータを転送します。流れは次のとおりです <pre class="brush:php;toolbar:false">function makeHttpRequest(url, callback_function, return_xml) { var http_request, response, i; var activex_ids = [ 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP' ]; if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+... http_request = new XMLHttpRequest(); if (http_request.overrideMimeType) { http_request.overrideMimeType('text/xml'); } } else if (window.ActiveXObject) { // IE6 and older for (i = 0; i < activex_ids.length; i++) { try { http_request = new ActiveXObject(activex_ids[i]); } catch (e) {} } } if (!http_request) { alert('Unfortunately your browser doesn't support this feature.'); return false; } http_request.onreadystatechange = function() { if (http_request.readyState !== 4) { // not ready yet return; } if (http_request.status !== 200) { // ready, but not OK alert('There was a problem with the request.(Code: ' + http_request.status + ')'); return; } if (return_xml) { response = http_request.responseXML; } else { response = http_request.responseText; } // invoke the callback callback_function(response); }; http_request.open('GET', url, true); http_request.send(null); }</pre> サーバー側のPHPは、結果と連想配列を作成し、PHP5のみの組み込み関数json_encode（）を使用してJSONに変換しますが、対応を手動でエンコードすることは些細なことです。 JSON文字列が返されますブラウザの javaScriptはJSON文字列を受信し、それをネイティブJavaScriptオブジェクトに変換します。そうするための無事な方法は、eval（）関数を使用することです。より良い方法は、無料のJSONライブラリを使用することです。 たとえば、実行するコマンドがLSの場合、サーバーからのJSON応答は次のようなものになります（読みやすさのためにフォーマットされ、要約）： ご覧のとおり、JSONはXMLよりも軽量です。クロージングタグ、XMLドキュメントタグ、またはルートノードはありません。 <ol>サーバー側のスクリプトを変更してJSONを返すと、次のようなものが得られます。 <li> JavaScriptでは、データを受け入れるWebConsole.Printresultの部分は次のようになります。 </li> eval（）の後、データが通常のJavaScriptオブジェクトになり、data.resultやdata.commandなどのプロパティにアクセスする方法を確認できます。すでに述べたように、eval（）は、JSONエンコードされた文字列をオブジェクトに変換するための安全ではない方法です。より良い方法は、JSONライブラリを使用することです。これは、eval（）コールを置き換えるのに役立ちます。 <li> </li>機能しているJSONの例はこちらです。 </ol> セキュリティリマインダー このアプリケーションのデモンストレーションのために、私は事前に定義された無害コマンドのみをWebサーバーで実行することを許可します。コマンドのリストを展開したり、コマンドを許可したりする場合は、アプリケーションをインストールするサーバー上のディレクトリを保護することを忘れないでください。このアプリケーションを見知らぬ人がアクセスできるようにすることは、壊滅的な結果をもたらす可能性があります。それは非常に強力です：それはあなたのWebサーバー上のすべてを削除することを含むがこれらに限定されないコマンドを実行することを可能にします！ 結論 <h5> ajaxアプリケーションの例の最後に到達しました。あなたは基本を知っており、アクションを見て、自分自身を実験し始めるのに十分な知識を持って武装しています。この記事のコードを変更して再生することでウォームアップできます。これは、すべてダウンロード可能なコードアーカイブに含まれています。その後、独自のプロジェクトに移動できます。 </h5> これらはエキサイティングな時代です。リモートスクリプトのおかげで、Webの顔が大きな変化を遂げています。アーリーアダプター（Google、Amazon、Flickr、Yahoo）の段階に合格しましたが、現在、Ajaxでリモートスクリプトを使用して、レスポンシブでユーザーフレンドリーなWebページを作成すると、より一般的になりつつあります。最近の訪問者は、GmailとFlickrを使用してすでに甘やかされています。静的Web 1.0スタイルのページでs辱する余裕はありません！ ajax に関するよくある質問 同期ajaxと非同期のajaxの違いは何ですか？<h2></h2>同期ajax要求応答が受信されるまでコードの実行をブロックします。これは、リクエストが完了するまでユーザーインターフェイスが反応しないか、「フリーズ」することを意味します。一方、非同期AJAXリクエストは、コードの残りの実行をブロックしません。リクエストが処理されている間、ユーザーインターフェイスが応答性を維持できるようにします。これが、非同期リクエストがWeb開発の同期のリクエストよりも一般的に好まれる理由です。<sml xml ajax> ajaxを使用することのセキュリティへの影響は何ですか？Webテクノロジーと同様に、Ajaxには潜在的なセキュリティの意味があります。 Ajaxはクライアントとサーバー間でデータを送信および受信することを伴うため、クロスサイトスクリプティング（XSS）やクロスサイトリクエスト偽造（CSRF）などの攻撃に対して脆弱になります。したがって、入力データの検証やサニタイズなど、AJAXを使用する際に適切なセキュリティ対策を実装することが重要です。<seo><h3>ajaxにどのように影響するかは、検索エンジンが完全にクロールし、Ajaxコンテンツを指定できないため、SEOにどのように影響する可能性がありますか。ただし、GoogleはJavaScriptをクロールすることで進歩を遂げており、Ajaxコンテンツをある程度インデックスすることができます。 AJAXコンテンツがSEOフレンドリーであることを確認するために、進行性の強化や優雅な劣化などのテクニックを使用できます。たとえば、HTML5 History APIをAJAXで使用して、フルページのリロードなしでナビゲーション可能なページを作成できます。 CSS3を使用して、更新されたコンテンツのスタイルを使用できます。</h3> ajaxの一般的なユースケースは何ですか？ <h3>ajaxは、ページ全体を更新せずにリアルタイムのデータ更新を必要とするWebアプリケーションで一般的に使用されます。これには、ライブ検索結果、フォームの提出、チャットアプリケーション、インタラクティブマップなどのアプリケーションが含まれます。</h3> Ajaxはエラーをどのように処理しますか？ <h3>ajaxは、リクエスト中に発生するエラーを処理する方法を提供します。リクエストが処理されているときにエラーが発生した場合、実行する関数を定義できます。この関数は、エラーに関する情報を提供し、ユーザーへの通知やエラーのログのログなど、適切なアクションを実行できます。AJAXリクエストをキャッシュできますか？ AJAXリクエストをキャッシュすることにより、応答が保存され、同じリクエストが再度行われた場合、新しいリクエストを行う代わりに保存された応答を使用できます。ただし、これは古いデータにつながる可能性があるため、慎重に使用する必要があります。</h3> ajaxをデバッグするにはどうすればよいですか？ <h3>ブラウザー開発者ツールを使用してAjaxを実行できます。これらのツールを使用すると、AJAXのリクエストと応答を検査し、リクエストのステータスを確認し、発生するエラーを確認できます。また、JavaScriptコードのコンソール。ログステートメントを使用して、デバッグ目的でコンソールに情報を出力することもできます。</h3></seo></sml></smlhttprequest> </li> </ul> </div> </div> </div> </div> </div></sults></line></inupt></inupt> </div> </li> </div></inupt></inupt> </li> </ul> </div> </div> </div> </div> </div> </ol></pre> </div></inupt> </div>

以上がajaxでコマンドを取りますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：FireBugをインストールして使用するための簡単なガイド次の記事：FireBugをインストールして使用するための簡単なガイド

続きを見る

ajaxでコマンドを取ります

このチュートリアルでは、JQueryやYuiなどの特定のライブラリに依存せずにさまざまなアプリケーションで使用できるHTTPリクエストを作成するための再利用可能なJavaScript機能を紹介します。

単純な例が再検討されました

関連記事