Ajax概念、方法、屬性、以及如何建立
AJAX --> 即“Asynchronous Javascript And XML”(非同步JavaScript和XML),是指一種建立互動式網頁應用的網頁開發技術,它提供了非同步更新的機制,使用客戶端與伺服器間交換資料而非整個頁面文件,實現頁面的區域性更新。
AJAX特點 --> 網頁可以實現區域性更新
AJAX核心 --> JavaScript 物件 XMLHttpRequest (XMLHttpRequest 使您可以使用 JavaScript 向伺服器進行請求並處理響應)
AJAX互動方式??
客戶端(瀏覽器)從伺服器載入網頁完畢後,網頁中的內容如果需要更改,不使用瀏覽器傳送請求,而是使用JavaScript中的XMLHttpRequest(及Ajax物件)物件傳送請求到伺服器,伺服器接收請求並處理完畢後只返回頁面需要的內容,XMLHttpRequest物件接收伺服器返回的內容,程式設計師需要手動(javascript)的把內容更新到頁面中;
同步互動和非同步互動:
同步:提交請求-->等待伺服器處理-->處理完畢返回 這個期間客戶端瀏覽器不能幹任何
(相當於多個事情,同一個時間只能有一個人在做)
非同步: 請求通過事件觸發-->伺服器處理(這時瀏覽器仍然可以作其他事情)-->處理完畢
(相當於多個人可以在同一個時間做)
AJAX互動方式的好處??
只是部分資料更新,就成功和伺服器進行了互動,可以提高使用者的使用體驗,提高伺服器效能。
那些場景需要使用ajax(區域性重新整理)??
①自動提示
②使用者名稱重複檢查:使用者註冊時,檢查使用者名稱是否存在,及時給使用者反饋;
③郵箱提示:WEB版郵箱系統,當有新郵件到底伺服器,瀏覽器不用重新整理頁面也知道是否有新郵件;
④無重新整理分頁:顯示資料列表,使用者點選下一頁資料,整個頁面不會重新整理,只把下一頁的資料更新到頁面中;
⑤購物車:使用者點選新增到購物車後,能繼續進行其他操作,而購物車的資料儲存伺服器端;
⑥使用者登入:使用者登入的資料通過AJAX傳輸到後臺,如果登入失敗直接在當前登入頁面提示使用者,而不用重新整理整個頁面;
如果應用中的頁面需要區域性重新整理並且需要與伺服器互動,那麼就可以使用AJAX
如何建立 XMLHttpRequest 物件??
建立方式① try-catch
function createAjax(){
var ajax;//定義區域性ajax物件
try{
ajax= new XMLHttpRequest(); // 非IE6瀏覽器
}catch(e){
ajax = new ActiveXObject("Microsoft.XMLHTTP");// IE6瀏覽器
}
}
建立方式② 功能判斷
function createAjax(){
var ajax;//定義區域性ajax物件
if(window.XMLHttpRequest){ //判斷當前瀏覽器是否有XMLHttpRequest 在js中認為為false的有: null 0 "" false NaN undefined
ajax= new XMLHttpRequest();// 非IE6瀏覽器
} else {
ajax= new ActiveXObject("Microsoft.XMLHTTP"); // IE6瀏覽器
}
return ajax;
}
Ajax方法:
open(method,url,async) : 建立請求,並且規定請求的型別、URL 以及是否非同步處理請求。
method:請求的型別;GET 或 POST
url:請求伺服器後端的url地址
async:true --> 非同步 false --> 同步 注意:這裡值一般都是非同步
send(string) : 將請求傳送到伺服器。
如果要給send函式設定引數(string),只能是post請求,字串必須是伺服器URL編碼格式(ex:param1=value1&m2=value2);
如果是get請求,string可以直接省略
setRequestHeader(header,value) 新增額外的請求頭資訊,post提交必須使用 向請求新增 HTTP 頭。
header: 規定頭的名稱
value: 規定頭的值
注意:該方法必須在open與send之間呼叫;
原因:
①open之後,open是建立一個請求,或者理解為請求的基本準備,如果沒有請求,何來設定請求頭資訊;
②send之前,send是傳送一個請求,請求會把當前請求的頭資訊進行傳送,傳送後設置頭資訊無效;
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
Ajax屬性:
readyState --> 存有 XMLHttpRequest物件的請求狀態 從 0 到 4 發生變化
0: 請求未初始化 未建立
1: 伺服器連線已建立 open()方法
2: 請求已接收 send()方法
3: 請求處理中 伺服器處理中
4: 請求已完成,且響應已就緒 響應完畢
onreadystatechange --> 儲存函式(或函式名),每當 readyState 屬性改變時,就會呼叫該函式。
status --> HTTP響應狀態
200: "OK" 請求成功
404: "NOT FOUND" 沒有找到對應資源
500:"Server Error" 伺服器端錯誤
響應資料相關屬性
responseText 獲得字串形式的響應資料。
responseXML 獲得 XML 形式的響應資料。