原生ajax基礎

/*
ajax對象的成員
常用屬性:
responseText:以字元串形式接收伺服器端返回的信息
responseXML:以Xml Document對象形式接收伺服器返回的信息
readyState:返回當前請求的狀態
0:剛創建ajax對象
1:已經調用open方法
2:已經調用send方法
3:已經返回部分數據
4:請求完成,數據返回完整
onreadystatechange:事件,當ajax狀態readyState發生變化的時候要觸發執行
【為了獲得較多的狀態,最好在創建好ajax對象後就設置
最多可以感知1/2/3/4 四種狀態】
status:返回當前請求的http狀態碼【200--ok 304--請求緩存 404--沒有此頁面 403--禁止訪問】
statusText:返回當前請求的響應行為碼
常用方法;
open() 創建新的http請求
send() 把請求發送給服務端
abort() 取消當前請求
*/
1.創建ajax對象

主流瀏覽器方式
火狐、谷歌、蘋果、Safari、Opera包括IE7以上版本的瀏覽器
var xhr = new XMLHttpRequest();

IE(6/7/8)方式
var xhr = new ActiveXObject("Microsoft.XMLHTTP");//最原始的方式
var xhr = new ActiveXObject("Msxml2.XMLHTTP");//升級
var xhr = new ActiveXObject("Msxml2.XMLHTTP.3.0");//升級
var xhr = new ActiveXObject("Msxml2.XMLHTTP.5.0");//升級
var xhr = new ActiveXObject("Msxml2.XMLHTTP.6.0");//IE維護的最高版本

2.發起對伺服器的請求
//瀏覽器方式請求:打開瀏覽器,輸入請求地址,敲回車發送請求

//給ajax設置事件,接收伺服器端發來的請求
xhr.onreadystatechange = function(){
if(readyState==4){
console(xhl.responseText);
}
}

//創建新的http請求(並設置請求地址)
//open(請求方式get/post,url請求地址)
xhr.open("get","XX.php");

//發送請求
//send(get-null/post-給伺服器傳遞的信息)
xhl.send(null);

3.
var nm = document.getElementById("username").value;
ajax的get請求需要註意兩個地方
//xhr.open("get","xx.php?name="+nm+"&addr=beijing")
①在url地址後面以請求字元串(傳遞的get參數信息)形式傳遞數據
②對"中文"、=、&等特殊符號處理

//在php裡邊可以用函數urlencode()/urldecode()對特殊符號進行編碼、反編碼處理
//在JavaScript裡面可以通過encodeURIComponent()對傳遞的特殊符號(例如:$、=等)進行編碼處理
//同時對"中文"也會進行編碼處理
nm = encodeURIComponent(nm);
encodeURIComponent()編碼後的信息是%後接兩個十六進位數

ajax的post請求需要註意的四個地方
//var info = "name="+nm+"&age=23";
//xhr.send(info);
①給伺服器傳遞數據需要調用send(請求字元串數據)方法
//以下setRequestHeader()方法必須要在open()方法後調用
//xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
②調用方法setRequestHeader()把傳遞的數據組織為xml格式(模仿form表單傳遞數據)
③傳遞的中文信息無需編碼,像&、=等仍需編碼
④該方式請求的同時也可以傳遞get參數信息,同時使用$_GET接收該信息

5.同步、非同步
ajax對象.open(方式 get/post , url地址 , [非同步true]同步false);
ajax是可以與伺服器進行(非同步或同步)交互的技術之一。
非同步:同一個時間點允許執行多個進程。
同步:同一個時間點只允許執行一個進程。

6.瀏覽器對動態程式文件緩存的處理解決:
① 給請求的地址設置隨機數【推薦】
②給動態程式設置header頭信息，禁止瀏覽器對其緩存

7.對xml的對象的接收和處理
ajax負責去伺服器請求xml信息,使用responseXML屬性接收
js裡面的DOM技術負責處理xml信息(與處理html方式一致)
document/普通元素對象.getElementByTagName();

8.
//在JavaScript裡邊,把字元串"string"變為對象"object"
var obj = "{name:"kitty",age:5}";
//eval(字元串參數) 字元串參數變為表達式運行
eval("var cat ="+obj);//eval("var cat = {name:"kitty",age=5}")
console.log(cat);

9.FormData使用註意
①每個表單域必須有name屬性
②不能設置setRequestHeader頭
③特殊符號無需編碼
④在form標簽裡邊無需設置enctype="multipart/form-data"屬性(即便有上傳文件域也不需要設置)
(無刷新上傳附件,FormData可以收集上傳的文件域信息)

10.ajax對象->upload->onprogress
ajax對象有成員屬性upload,其也是一個對象,該對象有onprogress屬性。該屬性是一個"事件"。該事件每間隔0.1秒就執行一次,執行的過程中會感知當前的附件上傳情況,例如可以感知附件的"總大小",目前"已上傳大小"等相關信息。