原生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->onprogressajax對象有成員屬性upload,其也是一個對象,該對象有onprogress屬性。該屬性是一個"事件"。該事件每間隔0.1秒就執行一次,執行的過程當中會感知當前的附件上傳狀況,例如能夠感知附件的"總大小",目前"已上傳大小"等相關信息。