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オブジェクトの作成、コールバック関数の割り当て、およびリクエストの送信

この記事では、WebConsoleアプリケーションを導入し、ブラウザーインターフェイスを介してサーバー側のコマンド実行を可能にし、実用的なAJAXの使用を示しています。
• セキュリティの懸念が強調され、実行可能なコマンドを制限し、入力を消毒して不正なサーバーアクセスを防ぐことの重要性を強調しています。
チュートリアルでは、XMLやJSONなどのさまざまなデータ形式の処理や、機能の強化されたJavaScriptライブラリとAjaxを統合するなど、高度なトピックをカバーしています。
単純なhttp要求例
最初に、JavaScriptでHTTP要求を行い、応答を処理するというフローを修正しましょう。これは、メモリを更新するための簡単な例です。すべてのスパイシーな詳細については、SitePointの入門記事「Ajax：Remote Scriptingとの使用可能な対話」を参照してください。
• 3つの基本的な手順があります
• xmlhttprequestオブジェクトを作成します
http応答を処理するコールバック関数を割り当てます

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

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

に確認します

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

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

です
2. リクエストが送信されます
onedeadystatechangeイベントの火災と実行は、alertContents（）に渡されます。
alertContents（）は、応答が受信されたかどうかをチェックし、問題がある場合は、test.htmlファイルの内容をarert（）s

自分の例をテストし、テストファイルを表示します。
問題

5. 上記の例は正常に機能しましたが、プライムタイムの準備をする前に改善する必要があることが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つのトリックは、事前に名前を知らずにコールバック関数を呼び出す機能です。たとえば、

コールバック関数の名前が見積もりなしでどのように渡されるかに注意してください。
HTTPリクエストメソッドと任意のクエリ文字列を関数のパラメーターとして渡し、Calls to Open（）およびsend（）メソッドで使用することにより、機能をさらに再利用可能にすることができます。これにより、GetSに加えて、元々実行することを目的としていました。
• 関数のもう1つの機能は、200以外の応答コードの処理です。これは、返される成功/エラーコードのタイプに応じて、より具体的になり、適切なアクションを実行する場合に便利です。

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

  test.htmlファイルの内容がalert（）edであった前の例をやり直しましょう。今回は、光沢のある新しい再利用可能な要求関数を使用することにより、使用される2つの関数の改訂版がはるかに簡単になります。

  <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>

  ご覧のとおり、AlertContents（）は単純なプレゼンテーションです。

  これらの関数は1ライナーにすぎないため、実際にそれらを完全に取り除き、代わりに関数呼び出しを変更できます。したがって、例全体が次のようになります

  はい、そんなに簡単です！例と完全なソースコードを表示します（古い友人ビューソースから入手可能）。

  function makeHttpRequest(url, callback_function, return_xml) <br>
  { <br>
    var http_request, response, i; <br>
   <br>
    var activex_ids = [ <br>
      'MSXML2.XMLHTTP.3.0', <br>
      'MSXML2.XMLHTTP', <br>
      'Microsoft.XMLHTTP' <br>
    ]; <br>
   <br>
    if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+... <br>
      http_request = new XMLHttpRequest(); <br>
      if (http_request.overrideMimeType) { <br>
        http_request.overrideMimeType('text/xml'); <br>
      } <br>
    } else if (window.ActiveXObject) { // IE6 and older <br>
      for (i = 0; i < activex_ids.length; i++) { <br>
        try { <br>
          http_request = new ActiveXObject(activex_ids[i]); <br>
        } catch (e) {} <br>
      } <br>
    } <br>
   <br>
    if (!http_request) { <br>
      alert('Unfortunately your browser doesn't support this feature.'); <br>
      return false; <br>
    } <br>
   <br>
    http_request.onreadystatechange = function() { <br>
      if (http_request.readyState !== 4) { <br>
          // not ready yet <br>
          return; <br>
      } <br>
      if (http_request.status !== 200) { <br>
        // ready, but not OK <br>
        alert('There was a problem with the request.(Code: ' + http_request.status + ')'); <br>
        return; <br>
      } <br>
      if (return_xml) { <br>
        response = http_request.responseXML; <br>
      } else { <br>
        response = http_request.responseText; <br>
      } <br>
      // invoke the callback <br>
      callback_function(response); <br>
    }; <br>
   <br>
    http_request.open('GET', url, true); <br>
    http_request.send(null); <br>
  }

  私たちのプロジェクト：WebConsoleアプリケーション

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

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

  と、実行するコマンドを入力する1つのがあります。どちらも黒い背景と灰色の宅配便のフォントを持っています。これがスクリーンショットです。

  html

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

  は、実行されているコマンドの結果と、コマンドを入力できるで更新されます。それは素晴らしく、きれいなインターフェースで、

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