AJAX の概要LOGIN

AJAX の概要

AJAX は、Web ページ全体をリロードせずに Web ページの一部を更新できるテクノロジーです。

AJAX とは何ですか?

AJAX = 非同期 JavaScript および XML (非同期 JavaScript および XML)

AJAX は、高速で動的な Web ページを作成するためのテクノロジーです。

AJAX を使用すると、バックグラウンドでサーバーと少量のデータを交換することで、Web ページを非同期に更新できます。これは、ページ全体を再読み込みしなくても、Web ページの一部を更新できることを意味します。

ajax テクノロジーには、JavaScript、xml、css、xstl、dom、xhtml、XMLHttpRequest という複数のテクノロジーが含まれており、そのため、ajax は、それぞれのテクノロジーの利点を最大限に発揮するために、7 つのテクノロジーを統合する接着剤のようなものです。 。

ajax テクノロジーは、他のテクノロジーでは解決できない多くの問題を解決します

1. ページを更新せずに動的にデータを交換します

2. ページを部分的に更新します [ユーザー名が固有であることを確認します]

3. 美しいインターフェイス [強化されたユーザー エクスペリエンス]

4. データベースの操作

5. 単純なテキスト形式、xml ファイル形式、json データ形式を返すことができます

ajax の利点と欠点:

1) ユーザーエクスペリエンスが向上します。送信または更新する必要がある場合、コンテンツは自動的に更新されます

2) ネットワーク データ トラフィックを削減します。ページ レイアウト スタイルとリロードが異なるため、ajax はサーバーから少量のデータを取得するだけで済み、その方が高速です

欠点。 :

1) ページがジャンプしないため、ユーザーはクリックして前のコンテンツにアクセスできなくなります

2) Ajax は JavaScript を実行して読み込む必要があるため、検索エンジンが失敗します

3) ajax の悪用ページが肥大化しすぎて、数ページしかかからずに達成できる効果、結果がすべて 1 ページにまとめられています

AJAX を使用するアプリケーション ケースは数多くあります: Google マップ、Gmail、ユーチューブとフェイスブック。

AJAXの仕組み

105.gif


AJAXはインターネット標準に基づいています

AJAXはインターネット標準に基づいており、次のテクノロジーの組み合わせを使用します:

1) XMLHttpRequestオブジェクト(データの非同期交換)

2 ) JavaScript/DOM (情報の表示/取得)

3) CSS (スタイルデータ)

4) XML (データ送信によく使用される形式)

これらを学び理解したい場合は、当社のホームページ PHP 中国語 Web サイトを参照してください

AJAX アプリケーションはブラウザーやプラットフォームに依存しません!

Google Suggest

2005 年に Google の検索候補機能がリリースされてから、AJAX が人気になりました。

Google サジェスト AJAX を使用して、非常に動的な Web インターフェイスを作成します。Google の検索ボックスに入力すると、JavaScript が文字をサーバーに送信し、サーバーは候補のリストを返します。

今すぐ AJAX を使い始めましょう

PHP チュートリアルでは、AJAX がページ全体をリロードせずに Web ページの特定の部分を更新する方法を示します。 PHPでサーバースクリプトを書きます。

AJAX についてさらに詳しく知りたい場合は、AJAX チュートリアルをご覧ください。


次のセクション
$(function(){ $('#send').click(function(){ $.ajax({ type: "GET", url: "test.json", data: {username:$("#username").val(), content:$("#content").val()}, dataType: "json", success: function(data){ $('#resText').empty(); //清空resText里面的所有内容 var html = ''; $.each(data, function(commentIndex, comment){ html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para"' + comment['content'] + '</p></div>'; }); $('#resText').html(html); } }); }); });
コースウェア