關於Ajax的一些使用(一)
Ajax
- 一種不用刷新頁面便可以與服務器通訊的方法
- 數據在客戶端與服務器之間的獨立傳輸,服務器不再返回整個頁面
- 提升用戶體驗
1. 不用刷新頁面便可以和服務器通訊的方法有很多:
---- Flash
----Java applet
----框架:如果使用了一組框架構造了一個網頁,可以只是更新這個其中的一個框架
---- 隱藏的iframe
---- XMLHttpRequest :該對象是對JavaScript的一個擴展,可以使網頁與服務器進行通信.是創建Ajax的應用的最佳選擇.實際上通常把Ajax當做XMLHttpRequest的對象的代名詞
2. 為什麽要兼容IE5
- XMLHttpRequest 最早是在IE5中以ActiveX組件的形式出現的,不是W3C的標準,
function createXMLHTTPRequest() { //1.創建XMLHttpRequest對象 //這是XMLHttpReuquest對象無部使用中最復雜的一步 //需要針對IE和其他類型的瀏覽器建立這個對象的不同方式寫不同的代碼 var xmlHttpRequest; if (window.XMLHttpRequest) { //針對FireFox,Mozillar,Opera,Safari,IE7,IE8 xmlHttpRequest = new XMLHttpRequest(); //針對某些特定版本的mozillar瀏覽器的BUG進行修正 if (xmlHttpRequest.overrideMimeType) { xmlHttpRequest.overrideMimeType("text/xml"); } } else if (window.ActiveXObject) { //針對IE6,IE5.5,IE5 //兩個可以用於創建XMLHTTPRequest對象的控件名稱,保存在一個js的數組中 //排在前面的版本較新 var activexName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ]; for ( var i = 0; i < activexName.length; i++) { try { //取出一個控件名進行創建,如果創建成功就終止循環 //如果創建失敗,回拋出異常,然後可以繼續循環,繼續嘗試創建 xmlHttpRequest = new ActiveXObject(activexName[i]); if(xmlHttpRequest){ break; } } catch (e) { } } } return xmlHttpRequest; } //這個是兼容性比較好的版本
function getHTTPObject(){
var xmlHttp = null;
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}else if(window.ActiveXObject){
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlHttp;
}
//目前`比較簡單的版本
3. XMLHttpRequest的方法
abort() 停止當前請求
getAllRequestHeaders() 把HTTP請求的所有響應首部作為鍵/值返回
getResponseHeader("header") 返回指定首部的串值
open(‘method‘, ‘url‘ ) 建立服務器的連接調用
setRequestHeader("header", "value") 把指定首部設置為所提供的值,4.在設置首部之前必須先調用open()
4.XMLRequest 屬性
onreadystatechange:
每個狀態改變都會觸發這個事件處理器,通常會調用一個JavaScript函數,請求到服務器中會產生不同狀態,服務器觸發
readyState
請求狀態:
- 0 ====> 未初始化
- 1 ====> 正在加載
- 2 ====> 已經加載
- 3 ====> 交互中
- 4 ====> 完成
- responseText
服務器的響應,表示為一個串
- responseXML
服務器的響應表示為XML,這個對象可以解析為DOM對象
- status
服務器HTTP狀態碼 200===> ok 404===>not found
- statusText
HTTP狀態碼相對的文本
發送請求
setRequestHeader(header,value)
當瀏覽器向服務器請求頁面的時候,會伴隨這個請求發送一組首部信息,這些首部信息是一系列描述請求的元數據(metadata),首部信息用來聲明請求是GET還是POST請求
Ajax請求中,發送首部的工作setRequestHeader
如果用Post請求向服務器發送數據,需要將"Content-type"的首部設置為"application/x-www-form-urlencoded",它會告訴服務器正在發送數據,並且數據已經符合URL編碼
該方法必須是在open()之後才能調用
json解析
//從服務器獲取返回的數據
xmlHttp.onreadystatechange = function(){
if(xmlHttp.onreadyState == 4){
if(xmlHttp.status == 200){
xmlHttp.responseText();
var text = xmlHttp.responseText;
var jsonText = evel("("+text+")");
console.log("name:"+jsonText.name",age:"+jsonText.age);
}else{
console.log("false");
}
}
}
//服務器端數據
{
"name":"lakerMonster",
"age":100
}
關於Ajax的一些使用(一)