AJAX全稱為“Asynchronous JavaScript and XML”（異步JavaScript和XML），是指一種創建交互式網頁應用的網頁開發技術。
主要包含了以下幾種技術：
Ajax（Asynchronous JavaScript + XML）的定義
基于web標準（standards-based presentation）XHTML+CSS的表示；
使用 DOM（Document Object Model）進行動態顯示及交互；
使用 XML 和 XSLT 進行數據交換及相關操作；
使用 XMLHttpRequest 進行異步數據查詢、檢索；
使用 JavaScript 將所有的東西綁定在一起。
? 傳統的web應用允許用戶填寫表單(form)，當提交表單時就向web服務器發送一個請求。服務器接收并處理傳來的表單，然后返回一個新的網頁。這個做法浪費了許多帶寬，因為在前后兩個頁面中的大部分HTML代碼往往是相同的。由于每次應用的交互都需要向服務器發送請求，應用的響應時間就依賴于服務器的響應時間。這導致了用戶界面的響應比本地應用慢得多。
? 與此不同，AJAX應用可以僅向服務器發送并取回必需的數據，它使用SOAP或其它一些基于XML的web service接口，并在客戶端采用JavaScript處理來自服務器的響應。因為在服務器和瀏覽器之間交換的數據大量減少，結果我們就能看到響應更快的應用。同時很多的處理工作可以在發出請求的客戶端機器上完成，所以Web服務器的處理時間也減少了。
Ajax應用程序的優勢在于：
1. 通過異步模式，提升了用戶體驗
2. 優化了瀏覽器和服務器之間的傳輸，減少不必要的數據往返，減少了帶寬占用
3. Ajax引擎在客戶端運行，承擔了一部分本來由服務器承擔的工作，從而減少了大用戶量下的服務器負載。
**************************************************************************************************
xmlhttp的屬性：
onreadystatechange ? 指定當readyState屬性改變時的事件處理句柄，只寫 。
readyState ? ? 返回當前請求的狀態，只讀。
responseBody ? ? 將回應信息正文以unsigned byte數組形式返回，只讀
responseStream ? ? ? 以Ado Stream對象的形式返回響應信息，只讀 。
responseText ? ? ? 將響應信息作為字符串返回，只讀 。
responseXML ? ? ? 將響應信息格式化為Xml Document對象并返回，只讀 。
status ? ? ? ? 返回當前請求的http狀態碼，只讀 。
statusText ? ? ? 返回當前請求的響應行狀態，只讀 。
xmlhttp的方法：
abort ? ? ? ? 取消當前請求
getAllResponseHeaders ? 獲取響應的所有http頭
getResponseHeader ? 從響應信息中獲取指定的http頭
open ? ? ? ? 創建一個新的http請求，并指定此請求的方法、URL以及驗證信息(用戶名/密碼) //常用
send ? ? ? ? 發送請求到http服務器并接收回應 //常用
setRequestHeader ? 單獨指定請求的某個http頭
語法：
onreadystatechang 指定當readyState屬性改變時的事件處理句柄，只寫
xmlHttpObj.onreadystatechange=a;
function a(){
? if(xmlHttpObj.readyState==4){
? ? if(xmlHttpObj.stateus==200){
? ? ? ? alert(xmlHttpObj.responseText);
? ? }else{
? ? ? ? alert("加載失敗！\n原因："+xmlHttpObj.stateText);
? ? }
? }
}
readyState 返回當前請求的狀態，只讀。
xmlHttpObj.readyState;
參見函數a;
readyState，變量。定義如下：
0 (未初始化) ? ? ? 對象已建立，但是尚未初始化（尚未調用open方法）
1 (初始化) ? ? ? 對象已建立，尚未調用send方法
2 (發送數據) ? ? ? send方法已調用，但是當前的狀態及http頭未知
3 (數據傳送中) ? ? ? 已接收部分數據，因為響應及http頭不全，這時通過responseBody和responseText獲取部分數據會出現錯誤，
4 (完成) ? ? ? 數據接收完畢,此時可以通過通過responseBody和responseText獲取完整的回應數據
responseText 將響應信息作為字符串返回，只讀 。
xmlHttpObj.responseText;
responseBody ,responseStream ,responseText ,responseXML 與之相似
responseXML可以返回一個文檔樹(DOM)，可以使用document.getElementsByTagName,document.getElementsByTagNameNS,document.getElementById等對其操作
stateus 返回當前請求的http狀態碼，只讀 。
xmlHttpObj.stateus;
參見函數a;
長整形標準http狀態碼，定義如下：
值 ? 描述
100 ? Continue
101 ? Switching protocols
200 ? OK
201 ? Created
202 ? Accepted
203 ? Non-Authoritative Information
204 ? No Content
205 ? Reset Content
206 ? Partial Content
300 ? Multiple Choices
301 ? Moved Permanently
302 ? Found
303 ? See Other
304 ? Not Modified
305 ? Use Proxy
307 ? Temporary Redirect
400 ? Bad Request
401 ? Unauthorized
402 ? Payment Required
403 ? Forbidden
404 ? Not Found
405 ? Method Not Allowed
406 ? Not Acceptable
407 ? Proxy Authentication Required
408 ? Request Timeout
409 ? Conflict
410 ? Gone
411 ? Length Required
412 ? Precondition Failed
413 ? Request Entity Too Large
414 ? Request-URI Too Long
415 ? Unsupported Media Type
416 ? Requested Range Not Suitable
417 ? Expectation Failed
500 ? Internal Server Error
501 ? Not Implemented
502 ? Bad Gateway
503 ? Service Unavailable
504 ? Gateway Timeout
505 ? HTTP Version Not Supported
statusText 返回當前請求的響應行狀態
xmlHttpObj.stateText;
參考函數a;
open 創建一個新的http請求，并指定此請求的方法、URL以及驗證信息
xmlHttpObj.open(Method,URL[,Async][,User][,PassWord]);
[]表示可選
參數：
Method:POST|GET(大小寫不敏感)
URL:請求的URL地址，可以為絕對地址也可以為相對地址。
Async:[true|fase] 是否同步，默認為true。
User:如果服務器需要驗證，此處指定用戶名，如果未指定，當服務器需要驗證時，則會彈出驗證窗口。
Password：驗證信息中的密碼部分，如果用戶名為空，則此值將被忽略。
send 發送請求到http服務器并接收回應
xmlHttpObj.send([Text]);
參數：
Text:要發送的數據，默認為空(null);
************************************************************************************************************
一個例子：
創建一個xmlhttp對象：現在的絕對多數瀏覽器都增加了對XmlHttp的支持，IE中使用ActiveXObject方式創建XmlHttp對象，其他瀏覽器如：Firefox、Opera、NetScape等通過window.XMLHttpRequest來創建xmlhttp對象。
var xmlhttp;
function new_xmlHttp(){
? var a=null;
? if(window.ActiveXObject){//IE(此處的IE泛指所有用IE內核的瀏覽器，下同)
? ? a=new ActiveXObject("Msxml2.XMLHTTP");
? ? if(!a){
? ? ? ? a=new ActiveXObject("Microsoft.XMLHTTP")
? ? }
? }else if(window.XMLHttpRequest){//Mozilla(FireFox,NS)
? ? a=new XMLHttpRequest()
? }
? return a;
}
xmlhttp=new_xmlhttp();
xmlhttp.open("GET","http://localhost/xmlfile.xml",false);//創建一個新的HTTP請求，并指定URL
xmlhttp.send();//發送
xmlhttp.onreadystatechange=function(){
? if(xmlhttp.readyState==4){
? ? if(xmlhttp.stateus==200){
? ? ? ? alert(xmlhttp.responseText);
? ? }else{
? ? ? ? alert("加載失?。n原因："+xmlhttp.stateText);
? ? }
? }
}
一個簡單完整的XMLHTTP例子：
將以下代碼保存為本地HTML文件再使用
CODE:
<!--begin-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[url]http://www.w3.org/TR/html4/loose.dtd[/url]">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>一個簡單的XMLHTTP例子</title>
</head>
<body>
<script>
var oDiv
var xh
function getXML()
{
oDiv = document.all.m
oDiv.innerHTML = "正在裝載欄目數據，請稍侯......."
oDiv.style.display= ""
xh = new ActiveXObject("Microsoft.XMLHTTP")
xh.onreadystatechange = getReady
xh.open("GET",a.value,true)
xh.send()
}
function getReady()
{
if(xh.readyState==4)
{
if(xh.status==200)
{
? oDiv.innerHTML = "完成"
}
else
{
? oDiv.innerHTML = "抱歉，裝載數據失敗。原因：" + xh.statusText
}
}
}
</script>
<body>
xmlhttp異步的例子:
URL:<input name=a value="[url]http://s041149.stu.cdut.edu.cn/xml/myxmltest.xml[/url]" style="width:600px">
<input onclick="getXML()" type="button" value="得到源代碼">
<input onclick="if(xh && xh.responseText) {alert(xh.responseText);oDiv.innerHTML=xh.responseText}" type="button" value="顯示源代碼">
<div id=m></div>
</body>
</html>
<!--end-->
例子：
仿GOOGLE個性化主頁的拖動并保存定位,http://s041149.stu.cdut.edu.cn/xml/myxmltest.xml為保存相對位置的XML文件，請注意拖動前后的變化
http://s041149.stu.cdut.edu.cn/xml/（細節問題可E-MAIL:hktx[at]163[dot]com）
posted on 2006-12-01 21:18
一手的小窩窩 閱讀(491)
評論(0) 編輯 收藏 所屬分類:
JAVASCRIPT