初心者向けのAJAX

現在、インターネット上には、新しい技術の非常に活発な開発（そして使用さえ）があります。 そのような技術の1つがAJAXです。

AJAXとは何ですか？

AJAXは、非同期JavascriptとXMLの略です。 実際、AJAXは新しいテクノロジーではありません。JavascriptとXMLの両方がかなり前から存在しており、AJAXは示されたテクノロジーの統合であるためです。 AJAXはほとんどの場合、Web 2.0という用語に関連付けられており、最新のWebアプリケーションとして宣伝されています。





AJAXを使用する場合、特定の部分のみが更新されるため、毎回ページ全体を更新する必要はありません。 誰もが無制限にインターネットにアクセスできるわけではないため、長く待つ必要がなく経済的です。 確かに、この場合、開発者はユーザーがページで何が起こっているのかを確実に認識する必要があります。 これは、ダウンロードインジケーター、サーバーとのデータ交換があることを示すテキストメッセージを使用して実装できます。 また、すべてのブラウザーがAJAX（ブラウザーとテキストブラウザーの古いバージョン）をサポートしているわけではないことも理解する必要があります。 また、ユーザーはJavascriptを無効にできます。 したがって、テクノロジーの使用を乱用したり、Webサイトで情報を提示する別の方法に頼ったりするべきではありません。





AJAXの利点を要約します。

• 便利なWebインターフェースを作成する機能
• アクティブなユーザーインタラクション
• 完全ではなく部分的なページのリロード
• 使いやすさ

AJAXは、Webページを操作するために、Webページをリロードせずに変更する方法と、サーバーに動的にアクセスする方法の2つを使用します。 後者はいくつかの方法で実装できます。特に、XMLHttpRequestについて説明します。これについては、非表示フレームテクニックを使用します。

データ交換

データを交換するには、ページ上にXMLHttpRequestオブジェクトを作成する必要があります。これは、ユーザーのブラウザーとサーバーの間の一種の仲介者です（図1）。 XMLHttpRequestを使用すると、サーバーに要求を送信したり、さまざまな種類のデータの形式で応答を受信したりできます。











サーバーとデータを交換するには2つの方法があります。 最初の方法はGETリクエストです。 このリクエストでは、サーバー上のドキュメントにアクセスし、URL自体に引数を渡します。 同時に、クライアント側でJavaScript関数エスケープを使用して、一部のデータが要求を中断しないようにすることも論理的です。





大量のデータがあるサーバーに対してGET要求を行うことはお勧めしません。 これにはPOSTリクエストがあります。





Javascriptで記述されたクライアント部分は、サーバーとの安全な交換に必要な機能を提供し、上記のいずれかの方法でデータを交換するためのメソッドを提供する必要があります。 サーバー部分は入力データを処理し、それに基づいて新しい情報を生成し（たとえば、データベースを操作する）、クライアントに返す必要があります。 たとえば、サーバーから情報を要求するには、サイズの小さいいくつかのパラメーターを送信する通常のGET要求を使用し、情報を更新または新しい情報を追加するには、大量のデータを転送できるため、POST要求を使用する必要があります。





既に述べたように、AJAXは非同期データ転送を使用します。 これは、データの転送中に、ユーザーが自分に必要な他のアクションを実行できることを意味します。 この時点で、何らかのデータ交換があることをユーザーに通知する必要があります。そうしないと、ユーザーは何かが間違っていると思い、サイトを離れるか、関数を再呼び出しできます。 Web 2.0アプリケーションでのデータ交換中の表示は非常に重要な役割を果たします。訪問者はページの更新方法にまだ慣れていない可能性があります。





サーバーからの応答は、テクノロジの名前が示すとおり、XMLだけではありません。 XMLに加えて、プレーンテキストまたはJSON（Javascript Object Notation）で回答を取得できます。 回答がプレーンテキストで受信された場合、すぐにページのコンテナに表示できます。 XMLの形式で応答を受信すると、クライアント側で受信したXMLドキュメントの処理とデータの（X）HTMLへの変換が通常発生します。 JSON形式で応答を受信する場合、クライアントは受信したコード（Javascript関数eval）を実行するだけで、本格的なJavascriptオブジェクトを取得できます。 ただし、ここでは、この技術を使用して悪意のあるコードが送信される可能性があることに注意し、考慮する必要があります。したがって、サーバーから受信したコードを実行する前に、慎重にチェックして処理する必要があります。 サーバーからの応答はなく、サーバー側のデータのみが変更される「ブランク」リクエストなどのプラクティスがあります。





異なるブラウザでは、このオブジェクトには異なるプロパティがありますが、一般的には同じです。

XMLHttpRequestオブジェクトメソッド

メソッド名は、他のJavaScript関数と同じスタイル（キャメルスタイル）で記述されていることに注意してください。 それらを使用するときは注意してください。





abort（） -サーバーへの現在のリクエストをキャンセルします。





getAllResponseHeaders（） -サーバーからすべての応答ヘッダーを取得します。





getResponseHeader（ "header_name"） - 指定されたヘッダーを取得します 。





open（ "request_type"、 "URL"、 "asynchronous"、 "username"、 "password"） -サーバーへのリクエストの初期化、リクエストメソッドを示します。 要求タイプとURLは必須パラメーターです。 3番目の引数はブール値です。 通常は常に真であるか、まったく指定されていません（デフォルトは真です）。 4番目と5番目の引数は認証に使用されます（すべてのユーザーがスクリプトを表示できるため、スクリプトに認証情報を保存することは非常に安全ではありません）。





send（ "content"） -HTTP要求をサーバーに送信し、応答を受信します。





setRequestHeader（ "header_name"、 "value"） -リクエストヘッダーの値を設定します。

XMLHttpRequestオブジェクトのプロパティ

onreadystatechangeは、XMLHttpRequestオブジェクトの最も重要なプロパティの1つです。 このプロパティを使用して、オブジェクトのステータスが変更されるたびに呼び出されるハンドラーが設定されます。





readyStateは、オブジェクトのステータスを示す数値です。





responseText-プレーンテキスト（文字列）でのサーバー応答の表現。





responseXMLは、サーバーから受信したDOMと互換性のあるドキュメントオブジェクトです。





status-サーバーからの応答のステータス。





statusText-サーバーからの応答のステータスのテキスト表現。





readyStateプロパティをより詳細に検討してください：

• 0-オブジェクトは初期化されていません。
• 1-オブジェクトはデータをロードしています。
• 2-オブジェクトはそのデータをアップロードしました。
• 3-オブジェクトは完全にはロードされていませんが、ユーザーと対話できます。
• 4-オブジェクトは完全に初期化されます。 サーバーから応答を受け取りました。

オブジェクトの準備状態に基づいて、サーバーとのデータ交換プロセスがどの段階にあるかについての情報を訪問者に提供し、場合によっては視覚的に通知することができます。

XMLHttpRequestオブジェクトの作成

前述のように、ブラウザの種類ごとにこのオブジェクトを作成することは独自のプロセスです。





たとえば、Gecko互換ブラウザ、KonquerorおよびSafariでオブジェクトを作成するには、次の式を使用する必要があります。





var Request = new XMLHttpRequest();











また、Internet Explorerでは、次のものが使用されます。





var Request = new ActiveXObject("Microsoft.XMLHTTP");











どちらか





var Request = new ActiveXObject("Msxml2.XMLHTTP");











現在、ブラウザ間の互換性を実現するには、すべての機能を1つに追加する必要があります。

 function CreateRequest() { var Request = false; if (window.XMLHttpRequest) { //Gecko- , Safari, Konqueror Request = new XMLHttpRequest(); } else if (window.ActiveXObject) { //Internet explorer try { Request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (CatchException) { Request = new ActiveXObject("Msxml2.XMLHTTP"); } } if (!Request) { alert("  XMLHttpRequest"); } return Request; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このすべての後、このオブジェクトを作成することができ、一般的なブラウザでのパフォーマンスについて心配する必要はありません。 ただし、さまざまな場所でオブジェクトを作成できます。 グローバルに作成すると、特定の時点でサーバーへのリクエストは1つだけ可能になります。 サーバーへの要求が発生するたびにオブジェクトを作成できます（これにより、問題はほぼ完全に解決されます）。

サーバーリクエスト

サーバー要求アルゴリズムは次のようになります。

• XMLHttpRequestを確認してください。
• サーバー接続の初期化。
• サーバーにリクエストを送信します。
• 受信データの処理。

サーバーへのリクエストを作成するために、GETおよびPOSTリクエストの機能を機能ごとに組み合わせる小さな機能を作成します。

 /*        r_method -  : GET  POST r_path -    r_args -   a=1&b=2&c=3... r_handler - -    */ function SendRequest(r_method, r_path, r_args, r_handler) { //  var Request = CreateRequest(); //     if (!Request) { return; } //   Request.onreadystatechange = function() { //    if (Request.readyState == 4) { //    r_handler(Request); } } //,    GET- if (r_method.toLowerCase() == "get" && r_args.length > 0) r_path += "?" + r_args; //  Request.open(r_method, r_path, true); if (r_method.toLowerCase() == "post") { //  POST- //  Request.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=utf-8"); //  Request.send(r_args); } else { //  GET- // - Request.send(null); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

クエリの作成がはるかに簡単になりました。 例として、サーバー上のファイルの内容を受け取り、それをコンテナに出力する関数を作成します。

 function ReadFile(filename, container) { //   var Handler = function(Request) { document.getElementById(container).innerHTML = Request.responseText; } //  SendRequest("GET",filename,"",Handler); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これは、サーバーとの対話が発生する方法です。

応答処理

前の例では、サーバー要求関数を作成しました。 しかし、実際には、オブジェクトの状態とサーバーからの応答の状態を処理しないため、安全ではありません。





ロードプロセスに関する視覚的な通知を表示できるように、コードを補足します。

 ... Request.onreadystatechange = function() { //    if (Request.readyState == 4) { //    r_handler(Request); } else { //    } } ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

既にご存じのとおり、XMLHttpRequestオブジェクトを使用すると、サーバーからの応答のステータスを確認できます。 この機会を利用してください。

 ... Request.onreadystatechange = function() { //    if (Request.readyState == 4) { if (Request.status == 200) { //    r_handler(Request); } else { //     } } else { //    } } ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

サーバー応答オプション

サーバーからいくつかのタイプのデータを受信できます。

• 平文
• XML
• ジョンソン

プレーンテキストを受け取った場合は、すぐにコンテナ、つまり出力に送信できます。 XMLでデータを受信する場合、DOM関数を使用してデータを処理し、HTMLを使用して結果を提示する必要があります。





JSONはJavascriptオブジェクト表記です。 これを使用して、オブジェクトを文字列として表すことができます（ここでは、シリアル化関数との類似性を示すことができます）。 JSONデータを受信する場合、本格的なJavascriptオブジェクトを取得して必要な操作を実行するには、JSONデータを実行する必要があります。 このようなデータの転送と実行は安全ではないことに注意してください。 実施されている内容を追跡する必要があります。





サンプルJSONコード：

 { "data": { "misc": [ { "name" : "JSON- ", "type" : " 1" }, { "name" : "JSON- ", "type" : " 2" } ] } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このようなコードを受信すると、次のアクションを実行します。





var responsedata = eval("(" + Request.responseText + ")")











このコードを実行すると、 responsedataオブジェクトが使用可能になります。

サーバープログラミング言語で作業する

このような作業は、通常と変わりません。 例として、サーバー言語としてPHPを取り上げます。 クライアント部分では何も変更されていませんが、サーバー部分はPHPファイルで表されています。





伝統的に、素晴らしい世界に挨拶することから始めましょう。

 echo "Hello, World!";
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このファイルにアクセスすると、文字列Hello、Worldがクライアントに返されます。 ご存知のように、これはアプリケーションを構築するための最も広い可能性を示しています。 XMLHttpRequestを使用してサーバーを呼び出すときに引数を渡すことに基づいて、出力をパラメーター化して、Webアプリケーションに広範な機能を提供することができます。





PHPに加えて、他のサーバー側プログラミング言語を使用できます。

関連文献

• プロフェッショナル向けのAjax
• 動作中のAjax

この記事は、新人にAJAXの動作を内部から伝えることを目的として書かれました。 何かが不正確または間違って書かれているように思われる場合は、価値のある記事を一緒に作成するために私を修正してください。





もちろん、可能であれば、既存のフレームワークを使用する価値があると思います。 しかし、それがどのように機能するかを知ることはまだ必要です。