AJAX の概要
ajax について學(xué)ぶ前に、まず Web 2.0 とは何かという質(zhì)問について話しましょう。 Web 2.0 という言葉を聞いたとき、まず「Web 1.0 とは何ですか?」と尋ねる必要があります。Web 1.0 について言及する人はほとんどいませんが、実際には、まったく異なるリクエストとレスポンスのモデルを持つ従來の Web を指します。たとえば、hdu.edu.cn Web サイトにアクセスし、ボタンをクリックします。リクエストがサーバーに送信され、レスポンスがブラウザに返されます。リクエストは単なる新しいコンテンツと項(xiàng)目のリストではなく、別の完全な HTML ページです。したがって、Web ブラウザーが新しい HTML でページを再描畫するときに、ちらつきやジッターが発生する場(chǎng)合があります。実際、新しいページが表示されるたびに、リクエストとレスポンスがはっきりと表示されます。
Web 2.0 では、この目に見えるやり取りが (大幅に) 排除されます。たとえば、Google マップでは、ほとんど再描畫せずに地図をドラッグして拡大または縮小できます。もちろん、まだリクエストやレスポンスはありますが、それらは舞臺(tái)裏に隠されています。ユーザーとしては、エクスペリエンスがより快適になり、デスクトップ アプリケーションのように感じられます。この新しい感覚とパラダイムは、誰かが Web 2.0 について言及したときに得られるものです。
考慮する必要があるのは、これらの新しいインタラクションをどのように可能にするかです。もちろん、引き続きリクエストを作成し、レスポンスを受信する必要がありますが、Web インタラクションが遅くてぎこちない印象を與えるのは、リクエストとレスポンスのやり取りごとに HTML が再描畫されることです。したがって、送信されるリクエストと受信されるレスポンスに、HTML ページ全體ではなく必要なデータのみが含まれるようにする方法が必要であることは明らかです。新しい HTML ページ全體を取得する必要があるのは、ユーザーに新しいページを表示する場(chǎng)合だけです。
しかし、ほとんどのインタラクションは、既存のページに詳細(xì)を追加したり、本文を変更したり、元のデータを上書きしたりすることです。このような場(chǎng)合、Ajax および Web 2.0 メソッドを使用すると、HTML ページ全體を更新せずにデータを送受信できます。オンラインで多くの時(shí)間を費(fèi)やす人にとって、この機(jī)能によりアプリケーションの速度と応答性が向上し、アプリケーションが時(shí)々サイトに戻ってくるようになります。
Ajax とは?
1. 正式名稱: Asynchronous、JavaScript、および XML (非同期 JavaScript および XML) 定義: Ajax は実際にはテクノロジーではありません。それぞれ獨(dú)自の機(jī)能を持ついくつかのテクノロジーが統(tǒng)合されて、強(qiáng)力な新しいテクノロジーになります
3.和 XHTML と CSS
documentObjectModels を使用して動(dòng)的に表示および対話します
データの対話と操作に XML と XSLT を使用します
非同期データを JavaScript で受信するには XMLHTTPREQUEST を使用します :
は、クライアント側(cè)のスクリプトを使用して交換する Web アプリケーション開発方法です。 Web サーバーとのデータ。このようにして、対話プロセスを中斷したり再編集したりすることなく、Web ページを動(dòng)的に更新できます。 Ajax を使用すると、ネイティブ デスクトップ アプリケーションに近い、直接的で可用性が高く、よりリッチで動(dòng)的な Web ユーザー インターフェイスを作成できます。
Ajax には主に次の利點(diǎn)があります:
1. プラグインのサポートは必要ありません (一般的なブラウザーと JavaScript はデフォルトで有効になります)。 (ページを更新せずに更新可能なデータを取得できます);
2. 前方および後方の関數(shù)は破棄されます (Ajax は常に現(xiàn)在のページにあり、前方または後方のページに移動(dòng)しないため)。十分ではありません (検索エンジン クローラーが JS コンテンツによって引き起こされるデータの変化をまだ理解できないため)
4. 開発およびデバッグ ツールの欠如 (他の言語のツール セットと比較して、JS または Ajax のデバッグ開発は悲慘です)。Ajax の使用で最も重要な部分は、非同期リクエストを?qū)g裝し、レスポンスを受信し、コールバックを?qū)g行することです。では、非同期と同期の違いは何でしょうか?
私たちの通常の Web プログラム開発は基本的に同期です。これは、電話での通話に応答する前に次のプログラムを?qū)g行する必要があることを意味します。非同期的に、複數(shù)のタスクを同時(shí)に実行できます。テキスト メッセージと同様に、複數(shù)の行があり、1 つのテキスト メッセージを表示しても、別のテキスト メッセージの受信が停止されることはありません。 Ajax は同期モードでも実行できますが、同期モードはブロック モードであり、複數(shù)の行が 1 つずつ実行されるため、Web ページが一時(shí)停止したアニメーションの狀態(tài)で表示されます。 Ajax は非同期モードを使用します。 Google サジェスト 2005 年、Google は Google サジェストによって AJAX を普及させました。 Google サジェストは、AJAX を使用して非常に動(dòng)的な Web インターフェイスを作成します。Google の検索ボックスにキーワードを入力すると、JavaScript がこれらの文字をサーバーに送信し、サーバーは検索候補(bǔ)のリストを返します。 表示例: まずHTMLファイルを作成します: txt.phpファイルを作成します: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
function checkname(){
if($('#name').val() == ""){
$('#msg').html("please enter the name!");
$('#name').focus;
return false;
}
if($('#address').val() == ""){
$('#msg').html("please enter the address!");
$('#address').focus;
return false;
}
ajax_post();
}
function ajax_post(){
$.post("txt.php",{name:$('#name').val(),address:$('#address').val()}, //url鏈接txt.php
function(data){
//$('#msg').html("please enter the name!");
//alert(data);
$('#msg').html(data);
},
"text");
}
</script>
</head>
<body>
<form id="ajaxform" name="ajaxform" method="post" action="txt.php">
<p>
姓名：<input type="text" name="name" id="name"/>
</p>
<p>
地址：<input type="text" name="address" id="address"/>
</p>
<p id="msg"></p>
<p>
<input name="Submit" type="button" value="submit" onclick="return checkname()"/>
</p>
</form>
</body>
</html><?php
$name = $_POST["name"];
$address = $_POST["address"];
echo $name."<br>";
echo $address."<br>";
?>
