AJAX 簡(jiǎn)介
在研究ajax之前先讓我們先討論一個(gè)問題?－什麼是Web 2.0?。聽到?Web 2.0?這個(gè)字的時(shí)候，應(yīng)該先問一問?「Web 1.0?是什麼？」?雖然很少聽人提到?Web 1.0，實(shí)際上它指的就是具有完全不同的請(qǐng)求和回應(yīng)模式的傳統(tǒng)?Web。例如，到hdu.edu.cn?網(wǎng)站上點(diǎn)選一個(gè)按鈕。就會(huì)對(duì)伺服器發(fā)送一個(gè)請(qǐng)求，然後回應(yīng)再回到瀏覽器。該請(qǐng)求不僅僅是新內(nèi)容和項(xiàng)目列表，而是另一個(gè)完整的?HTML?頁(yè)面。因此當(dāng)?Web?瀏覽器用新的?HTML?頁(yè)面重繪時(shí)，可能會(huì)看到閃爍或抖動(dòng)。事實(shí)上，透過看到的每個(gè)新頁(yè)面可以清楚地看到請(qǐng)求和回應(yīng)。
Web 2.0（在很大程度上）消除了這種看得見的往復(fù)互動(dòng)。例如在?Google Maps?上，你可以拖曳地圖，放大縮小，只有很少的重繪操作。當(dāng)然這裡仍然有請(qǐng)求和回應(yīng)，只不過都藏到了幕後。作為用戶，體驗(yàn)更加舒適，感覺很像桌面應(yīng)用程式。這個(gè)新的感覺和典範(fàn)就是當(dāng)有人提到?Web 2.0?時(shí)您所體會(huì)到的。
需要關(guān)心的是如何使這些新的互動(dòng)成為可能。顯然，仍需要發(fā)出請(qǐng)求和接收回應(yīng)，但正是針對(duì)每次請(qǐng)求/回應(yīng)互動(dòng)的?HTML?重繪造成了緩慢、笨拙的?Web?互動(dòng)的感受。因此很清楚，我們需要一種方法使發(fā)送的請(qǐng)求和接收的回應(yīng)只 包含需要的資料而不是整個(gè)?HTML?頁(yè)面。惟一需要取得整個(gè)新?HTML?頁(yè)面的時(shí)候就是希望使用者看到 新頁(yè)面的時(shí)候。
但多數(shù)互動(dòng)都是在已有頁(yè)面上增加細(xì)節(jié)、修改主體文字或覆寫原始資料。這些情況下，Ajax?和?Web 2.0?方法允許在不 更新整個(gè)?HTML?頁(yè)面的情況下傳送和接收資料。對(duì)於那些經(jīng)常上網(wǎng)的人，這種能力可以讓您的應(yīng)用程式感覺更快、反應(yīng)更及時(shí)，讓他們不時(shí)地光顧您的網(wǎng)站。
什麼是Ajax?
1、全名為：Asynchronous、JavaScript、And、XML（異步的?JavaScript?和XML）
2、定義：?Ajax不是技術(shù)，它其實(shí)是幾種技術(shù)，每種技術(shù)都有其獨(dú)特這處，合在一起就變成了一個(gè)功能強(qiáng)大的新技術(shù)
#3、包括：
#################? ? ? ? ? XHTML和CSS?
? ? ? ? ??使用文件物件模型(DocumentObjectModel)作動(dòng)態(tài)顯示與互動(dòng)?
? ? ?進(jìn)行非同步資料接收?
? ? ? ? ??使用JavaScript將它們綁訂在一起?
4、解釋：是使用客戶端腳本與Web伺服器交換資料的Web應(yīng)用程式開發(fā)方法。這樣，Web頁(yè)面不用打斷互動(dòng)流程進(jìn)行重新加裁，就可以動(dòng)態(tài)更新。使用Ajax，你可以創(chuàng)建接近本地桌面應(yīng)用的，直接的、高可用的、更豐富的、更動(dòng)態(tài)的Web使用者介面介面。
#Ajax優(yōu)勢(shì)主要有以下幾點(diǎn)：
1. 不需要外掛程式支援（一般瀏覽器且預(yù)設(shè)開啟JavaScript 即可）;2. 使用者體驗(yàn)極佳（不刷新頁(yè)面即可取得可更新的資料） ；3.提升Web 程式的效能（在傳遞資料方面做到按需放鬆，不必整體提交）；4.減輕伺服器和頻寬的負(fù)擔(dān)（將伺服器的一些操作轉(zhuǎn)移到客戶端）;#Ajax 的不足有以下幾點(diǎn)：
1.不同版本的瀏覽器度XMLHttpRequest 物件支援度不足(例如IE5 之前);2.前進(jìn)、後退的功能被破壞（因?yàn)锳jax 永遠(yuǎn)在當(dāng)前頁(yè)，不會(huì)幾率前後頁(yè)）;3.搜尋引擎的支援度不夠（因?yàn)樗褜ひ媾老x還不能理解JS 引起變化資料的內(nèi)容）;4.開發(fā)調(diào)試工具缺乏（相對(duì)於其他語言的工具集來說，JS 或Ajax 調(diào)試開發(fā)少的可憐） 。Google Suggest
在 2005 年，Google 透過其 Google Suggest 使 AJAX 變得流行起來。
Google Suggest 使用AJAX 創(chuàng)造出動(dòng)態(tài)性極強(qiáng)的web 介面：當(dāng)您在Google的搜尋方塊輸入關(guān)鍵字時(shí)，JavaScript 會(huì)把這些字元傳送到伺服器，然後伺服器會(huì)傳回搜尋建議的列表。
實(shí)例展示：
先建立一個(gè)html檔：
<!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>在建立一個(gè)txt.php文件：
<?php $name = $_POST["name"]; $address = $_POST["address"]; echo $name."<br>"; echo $address."<br>"; ?>
