Google Ajaxチュートリアル

7933 ワード

JavaScript Ajax アプリケーションサーバ css Google

原文作者:Google原文リンク:Google AJAX Tutorial訳者:令狐ネギ
0.読者対象と先行知識
このチュートリアルにはAjaxの基礎知識が含まれます.その前に、CSS、DHtml、Javascriptに関する知識が必要です.ajaxを使う上で知っておくべき知識について
チュートリアル .
1.概要1.1 AjaxAjaxが非同期JavascriptとXMLであること(
Asynchronous JavaScript and XML)の略.インタラクティブなウェブアプリケーションを作成する開発技術である.一般的なウェブページと同様に、ページの内容が変化するときにページ全体を再ロードする必要があり、Ajaxはバックグラウンドでサーバ側とわずかなデータを交換し、非同期リフレッシュを実現することができる.
ここいくつかの例があるので、クリックして見てください.
Ajaxは、次のテクノロジーの組み合わせです.

CSS、構成およびフォーマットコンテンツ

DOM(Document Object Model、ドキュメントオブジェクトモデル):javascriptなどのクライアントスクリプト言語を使用するDOM実装情報の動的表示およびインタラクションを操作することができる.

XMLHttpRequestオブジェクト:Webサーバ側と非同期でデータを交換する

XML:サーバ側やクライアント側で伝送するデータフォーマットに用いられる場合があるが、もちろん他のフォーマットでも動作可能である.

次に、ワークフローチャートを示します.
1.2サーバ側との対話
Webページ上のDOMイベントがトリガーされると、XMLHttpRequestオブジェクトを取得する必要があります.これは、次の関数を用いる実現することができる.異なるブラウザに適応するためにこのように書く必要があります.我々の使用に注意onreadystatechangeでコールバック関数を設定します.

var obj;

function ProcessXML(url) {
  // native  object
  if (window.XMLHttpobject) {
    // obtain new object
    obj = new XMLHttpobject();
    // set the callback function
    obj.onreadystatechange = processChange;
    // we will do a GET with the url; "true" for asynch
    obj.open("GET", url, true);
    // null for GET with native object
    obj.send(null);
  // IE/Windows ActiveX object
  } else if (window.ActiveXObject) {
    obj = new ActiveXObject("Microsoft.XMLHTTP");
    if (obj) {
      obj.onreadystatechange = processChange;
      obj.open("GET", url, true);
      // don't send null for ActiveX
      obj.send();
    }
  } else {
    alert("Your browser does not support AJAX");
  }
}

XMLHttpRequestクラスのプロパティとメソッドについて説明します.
ツールバーの
readyState
1つのリクエストサイクルでreadyStateは0から4まで変化する:0:初期化されていない.1:リンクを作成します.2:要求を受け取る.3:処理中です.4:フィードバックの準備を完了します.
status
200:「OK」404:ページが存在しない.
onreadystatechange
このプロパティでコールバック関数を設定する
responseText
データはテキストとして返される.
responseXml
データはXMLとして返す.
方法
open(mode, url, boolean)
mode:request(リクエスト)のタイプ:GETまたはPOST url:ファイル位置boolean:true(非同期)またはfalse(同期)である.
send("string")
GETを使用するとnull(in native mode;null not passed with ActiveX)
次に、onreadystatechangeプロパティを使用して登録されたコールバック関数の例を示します.

function processChange() {
    // 4 means the response has been returned and ready to be processed
    if (obj.readyState == 4) {
        // 200 means "OK"
        if (obj.status == 200) {
            // process whatever has been sent back here:
        // anything else means a problem
        } else {
            alert("There was a problem in the returned data:n");
        }
    }
}

1.3その他
上記のコードを小さなアプリケーションで使用して、コードを組み合わせる方法を示しましょう.ユーザーがユーザー名を入力し、このユーザー名をサーバに送信して、このユーザー名が他の人に使用されているかどうかを検証する必要があります.
まずhtmlコードは次のとおりです.

<BODY>
Enter your Username:  < id="username" name="username" type="text" onblur="checkUserName(this.value,'')" >
</BODY>

               : html                    :

function checkUserName(input, response) {
  // if response is not empty, we have received data back from the server
  if (response != '') {
    // the value of response is returned from checkName.php: 1 means in use
    if (response == '1') {
       alert("username is in use");
    } else {
    //  if response is empty, we need to send the username to the server
       url  =  'http://localhost/xml/checkName.php?q=' + input;
       ProcessXML(url);
    }
  }
}

は、サーバ側から返すデータをテキストまたはXML形式に変換する必要があることに注意する.関数＃カンスウ＃processChange()は、戻るデータを処理する.この関数の実装の詳細は、次のとおりです.

function processChange() {
    // 4 means the response has been returned and ready to be processed
    if (obj.readyState == 4) {
        // 200 means "OK"
        if (obj.status == 200) {
            // process whatever has been sent back here:
            // we need to parse the returned data (text or XML)
            // and then call checkUserName again with response set
            // to the appropriate value.
        // anything else means a problem
        } else {
            alert("There was a problem in the returned data:n");
        }
    }
}

現在、サーバ側のコードだけでこのアプリケーションが正常に動作し、GET要求を取得するためにクライアントのスクリプトまたはservletが必要であり、ユーザー名を確認し、フィードバック情報を返す.以下にphp実装例を用いる、すべてのものがハードコーディングされているため、実際のアプリケーションとはまだ差があるように見えるかもしれないが、意味は基本的に同じである.

<?php header('Content-Type: text/xml');

function checkName($q) {
  if (isset($q)){
    switch(strtolower($q)) {
      case  'maggie' :
          return '1';
          break;
      ...
      default:
          return '0';
    }
  } else {
    return '0';
  }

}
?>

2. Google  Ajax

Ajaxがここ数年このように流行したのは、GoogleがGmail、Google Maps、その他のwebベースのアプリケーションでこの技術を成功に使用したためだ.また、Googleは、Webサイトの管理者、ブログ、または他のWebサイトの所有者向けの
APIは、サイトに検索を挿入することを許可する.
興味深いことに、この検索を使用するユーザは、ajaxを使用して検索ボックスの下に直接ロードされるため、現在のページから離れる必要はない.検索結果はlocal,web,video,blogsの4種類に分類する、ラベル形式で表示することができる.また、ユーザは、copyボタンを用いる結果を直接他の場所にコピーして使用することができる(例えば、blogコメントを投稿するなど).
Googleが提供した
一連のチュートリアルと例で検索APIの使い方を教えてあげます.あなたが見ているなら
"hello world"プログラムがありますcssファイルとJavascriptライブラリがリンクされています.このライブラリの関数はajaxを用いてGoogleのサーバに検索要求を送信し、検索結果を得る.CSSとDHtmlはページ上の検索結果を更新するために使用する.
Googleが提供するAjax検索APIを使用してチュートリアルを行いました.このチュートリアルは、より興味深いサイトを構築するだけでなく、APIやイベントベースのプログラミングなどの重要な概念を理解するのに役立ちます.
3.その他の例とチュートリアル
Ajaxに関する追加の例とチュートリアルを次に示します.

Beginner's Tutorial on AJAX

Ajax: A New Approach to Web Applications

Ajax: What's It Good For?

Zip Code -> City and State Example

Reference on XMLHttpRequest

004. Asp.Net RoutingとMVCの2:ControllerとActionのアクティブ化を要求する

HTML、CSS、meta共通コード