非同步互動和同步互動
要說Ajax就不得不說，非同步傳輸和同步傳輸了。
也可以理解為：
什麼是Ajax？
Ajax的核心是JavaScript物件XmlHttpRequest。該物件在Internet Explorer5首次引入，它是一種支援非同步請求的技術。簡而言之，XmlHttpRequest可讓您使用JavaScript向伺服器提出請求並處理回應，而不會阻塞使用者。
Ajax採用非同步互動過程。 Ajax在使用者與伺服器之間引入一個中間媒介，從而取消了網路互聯過程中的處理-等待-處理-等待缺點。
使用者的瀏覽器在執行任務時即載入了Ajax引擎。 Ajax引擎使用JavaScript語言編寫，通常藏在一個隱藏的框架中。它負責編譯使用者介面與伺服器之間的互動。
Ajax引擎允許使用者與應用軟體之間的互動過程非同步進行，獨立於使用者與網路伺服器間的交流。現在，可以用JavaScript呼叫Ajax引擎來取代產生一個HTTP的使用者動作，記憶體中的資料編輯，頁面導航，資料校驗這些不需要重新載入整個頁面的需求可以交給Ajax來執行。
使用Ajax，可以為Jsp，開發人員，終端使用者帶來可見的便捷。
Ajax包含的技術：
Ajax並不是完美的技術，也有缺陷：
##AJAX大量使用了Javascript和AJAX引擎，而這個取決於瀏覽器的支援。 IE5.0以上、Mozilla1.0、NetScape7以上版本才支持，Mozilla雖然也支援AJAX，但提供XMLHttpRequest的方式不一樣。所以，使用AJAX的程式必須測試針對各個瀏覽器的相容性。
AJAX更新頁面內容的時候並沒有刷新整個頁面，因此，網頁的後退功能是失效的；有的用戶還經常搞不清楚現在的數據是舊的還是已經更新的。這個就需要在明顯位置提醒用戶「數據已更新」。
對串流媒體的支援沒有FLASH、Java Applet好。
Ajax的核心XMLHttpRequest物件：
XMLHttpRequest是XMLHTTP元件的對象，透過這個對象，AJAX可以像桌面應用程式一樣只同伺服器進行資料層面的交換，而不用每次都刷新介面，也不用每次將資料處理的工作都交給伺服器來做；這既減輕了伺服器負擔又加快了回應速度、縮短了使用者等待的時間。
XMLHttpRequest最早是在IE5中以ActiveX元件的形式實現的。非W3C標準。
建立XMLHttpRequest物件(由於非標準所以實作方法不統一)：
#Internet Explorer把XMLHttpRequest實作為一個ActiveX物件。
其他瀏覽器（Firefox、Safari、Opera…）把它實作為一個本地的JavaScript物件。
XMLHttpRequest在不同瀏覽器上的實作是相容的，所以可以用同樣的方式存取XMLHttpRequest實例的屬性和方法，而不管這個實例創建的方法是什麼。
初始化程式碼如下：
function createXmlHttpRequest(){
var xmlHttp;
try{ //Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch (e){
try{ //Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){}
}
}
return xmlHttp;
}登入後複製
登入後複製
XMLHttpRequest物件方法：
abort()：停止目前請求。
getAllResponseHeader()：把HTTP請求的所有回應首部當作key/value對回傳。
getResponseHeader("headerLabel")：傳回指定首部的字串值。
open("method","url")：建立對伺服器的調用，method參數可以是GET，POST。 url參數可以是相對url或絕對url。這個方法還包含3個可選參數。
send(content)：傳送請求給伺服器。
setRequestHeader("label","value")：把指定首部設定為所提供的值。在設定任何首部之前必須先呼叫open()方法。
XMLHttpRequest物件屬性：
onreadystatechange：状态改变的事件触发器。
readyState：对象状态：
0=未初始化
1=读取中
2=已读取
3=交互中
4=完成
responseText：服务器进程返回数据的文本版本。
responseXML：服务器进程返回数据的 兼容DOM的Xml文档对象。
status：服务器返回的状态码，如404=“文件未找到”，200=“成功”。
statusText：服务器返回的状态文本信息。
发送请求的属性和方法(重要)，使用以下3个关键部分:
openreadystatechange事件处理函数。
open(method, url, asynch)方法。
XMLHttpRequest 对象的 open 方法允许程序员用一个Ajax调用向服务器发送请求。
method：请求类型，类似 “GET”或”POST”的字符串。若只想从服务器检索一个文件，而不需要发送任何数据，使用GET(可以在GET请求里通过附加在URL上的查询字符串来发送数据，不过数据大小限制为2000个字符)。若需要向服务器发送数据，用POST。
在某些情况下，有些浏览器会把多个XMLHttpRequest请求的结果缓存在同一个URL。如果对每个请求的响应不同，这就会带来不好的结果。把当前时间戳追加到URL的最后，就能确保URL的惟一性，从而避免浏览器缓存结果。
var url = "GetAndPostExample?timeStamp=" + new Date().getTime();
登入後複製
url：路径字符串，指向你所请求的服务器上的那个文件。可以是绝对路径或相对路径。
asynch：表示请求是否要异步传输，默认值为true(异步)。指定true，在读取后面的脚本之前，不需要等待服务器的相应。指定false，当脚本处理过程经过这点时，会停下来，一直等到Ajax请求执行完毕再继续执行。
send(data)方法。
open 方法定义了 Ajax 请求的一些细节。send 方法可为已经待命的请求发送指令。
data：将要传递给服务器的字符串。
若选用的是 GET 请求，则不会发送任何数据， 给 send 方法传递 null 即可：request.send(null);
当向send()方法提供参数时，要确保open()中指定的方法是POST，如果没有数据作为请求体的一部分发送，则使用null.
完整的 Ajax 的 GET 请求示例：
//创建Ajax引擎
var xmlHttpReq = createXmlHttpRequest();
xmlHttpReq.onreadystatechange=function(){
if(xmlHttpReq.readyState==4){
if(xmlHttpReq.status==200){
document.getElementById("info").innerHTML=xmlHttpReq.responseText;
}
}
}
xmlHttpReq.open("post","/webLogic/test_test.do",true);登入後複製
setRequestHeader(header,value)：
当浏览器向服务器请求页面时，它会伴随这个请求发送一组首部信息。这些首部信息是一系列描述请求的元数据(metadata)。首部信息用来声明一个请求是 GET 还是 POST。
Ajax 请求中，发送首部信息的工作可以由 setRequestHeader完成。
参数header： 首部的名字; 参数value：首部的值。
如果用 POST 请求向服务器发送数据，需要将 “Content-type” 的首部设置为 “application/x-www-form-urlencoded”.它会告知服务器正在发送数据，并且数据已经符合URL编码了。
该方法必须在open()之后才能调用.
完整的 Ajax 的 POST 请求示例：
var xmlHttpReq = createXmlHttpRequest();
xmlHttpReq.onreadystatechange=function(){
if(xmlHttpReq.readyState==4){
if(xmlHttpReq.status==200){
document.getElementById("info").innerHTML=xmlHttpReq.responseText;
}
}
}
xmlHttpReq.open("post","/webLogic/test_test.do",true);
xmlHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttpReq.send("username="+"德玛"+"&pwd="+"123");登入後複製
接受--方法和属性介绍：
以上是Ajax用法簡單教程的詳細內容。更多資訊請關注PHP中文網其他相關文章！
