?詹亮 - site : [https://github.com/lzhanforgit/H5Resources]
什么是AJAX
ajax 即“Asynchronous JavaScript and XML”（異步 JavaScript 和 XML），
也就是無(wú)刷新數(shù)據(jù)讀取。
http 請(qǐng)求
首先需要了解 http 請(qǐng)求的方法（GET 和 POST）。
GET 用于獲取數(shù)據(jù)。GET 是在 URL 中傳遞數(shù)據(jù)，它的安全性低，容量低。
POST 用于上傳數(shù)據(jù)。POST 安全性一般，容量幾乎無(wú)限。
ajax 請(qǐng)求
ajax 請(qǐng)求一般分成 4 個(gè)步驟。
- 創(chuàng)建 ajax 對(duì)象
在創(chuàng)建對(duì)象時(shí)，有兼容問(wèn)題：
var oAjax = new XMLHttpRequest(); //for ie6 以上
var oAjax = new ActiveXObject('Microsoft.XMLHTTP'); //for ie6
//合并
var oAjax = null;
if(window.XMLHttpRequest){
oAjax = new XMLHttpRequest();
}else{
oAjax = new ActiveXObject('Microsoft.XMLHTTP');
}
- 連接服務(wù)器
在這里會(huì)用到 open() 方法。啟動(dòng)一個(gè)請(qǐng)求以備發(fā)送。open() 方法有三個(gè)參數(shù)，
- 第一個(gè)參數(shù)是連接方法即 GET 和 POST，
- 第二個(gè)參數(shù)是 URL 即所要讀取數(shù)據(jù)的地址，
- 第三個(gè)參數(shù)是否異步，它是個(gè)布爾值，true 為異步，false 為同步。
oAjax.open('GET', url, true);
在open()之后、send()之前可以修改HTTP請(qǐng)求頭信息，建議不要改變?yōu)g覽器默認(rèn)設(shè)置的信息，可以增加
自定義的數(shù)據(jù)
oAjax.setRequestHeader('myId','001');
//查看responseHeader
oAjax.getResponseHeader('content-type');
oAjax.getAllResponseHeaders()
-
發(fā)送請(qǐng)求
send() 方法。
oAjax.send(null); //如果不需要傳送數(shù)據(jù)，則必須放置null。因?yàn)椴糠譃g覽器要求必須要加null。如果您希望通過(guò) GET 方法發(fā)送信息，請(qǐng)向 URL 添加信息
但是url加的查詢字符串必須使用 encodeURICompent()進(jìn)行編碼才能加入。function addURLParam(url,name,value) { url+=(url.indexOf("?")==-1)?"?":"&"; url+=encodeURIComponent(name)+"="+encodeURIComponent(value); return url; }將請(qǐng)求發(fā)送到服務(wù)器。
string：僅用于 POST 請(qǐng)求oAjax.send('fname=Bill&lname=Gates);如果需要像 HTML 表單那樣 POST 數(shù)據(jù)，請(qǐng)使用 setRequestHeader() 來(lái)添加 HTTP 頭。
然后在 send() 方法中規(guī)定您希望發(fā)送的數(shù)據(jù)(表單數(shù)據(jù)封裝格式和GET提交數(shù)據(jù)格式相同)：oAjax.send($('#myform').serialize());xmlhttp.open("POST","ajax_test.asp",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Bill&lname=Gates");send()請(qǐng)求是同步的，意味著后續(xù)的js代碼必須等到服務(wù)器響應(yīng)之后才繼續(xù)執(zhí)行。所以在收到響應(yīng)后，
響應(yīng)的數(shù)據(jù)會(huì)自動(dòng)填充到XHR對(duì)象的屬性。
-
接收返回值
XHR對(duì)象接受的屬性有：
- responseText
- responseXML 如果響應(yīng)的內(nèi)容類型是"text/xml"或"application/xml"，則該屬性值為XML DOM文檔。
- status
- statusText
onreadystatechange 事件。當(dāng)請(qǐng)求被發(fā)送到服務(wù)器時(shí)，我們需要執(zhí)行一些基于響應(yīng)的任務(wù)。
每當(dāng) readyState 改變時(shí)，就會(huì)觸發(fā) onreadystatechange 事件。
readyState：請(qǐng)求狀態(tài)，返回的是整數(shù)（0-4）。
0（未初始化）：還沒(méi)有調(diào)用 open() 方法。
1（載入）：已調(diào)用 send() 方法，正在發(fā)送請(qǐng)求。
2（載入完成）：send() 方法完成，已收到全部響應(yīng)內(nèi)容。
3（解析）：正在解析響應(yīng)內(nèi)容。
4（完成）：響應(yīng)內(nèi)容解析完成，可以在客戶端調(diào)用。
status：請(qǐng)求結(jié)果，返回 200 或者 404。
200 => 成功。
304 => 請(qǐng)求的資源并沒(méi)有被修改，可以直接使用瀏覽器中緩存的版本。
404 => 失敗。
responseText：返回內(nèi)容，即我們所需要讀取的數(shù)據(jù)。需要注意的是：responseText 返回的是字符串。
```
oAjax.onreadystatechange=function(){
if(oAjax.readyState==4){
if(oAjax.status>=200 && oAjax.status<300 || oAjax.status==304){
fnSucc(oAjax.responseText);
}else{
if(fnFaild){
fnFaild();
}
}
}
};
```
XMLHttpRequest 2
-
formdata
var form=$('#myform')[0]; var formdata=new FormData(form); formdata.append('from','lzhan.com'); formdata.set('from','163.com'); console.log(formdata.get('from')); console.log(formdata.get('id')); formdata.forEach(function (value,key) { console.log(value); }) -
超時(shí)設(shè)定
oAjax.timeout=3000; oAjax.ontimeout=function () { }; -
下載進(jìn)度事件
var pro=document.querySelector('#loadProgress'); oAjax.onprogress=function (e) { pro.setAttribute('max',parseInt(e.totalSize)); if(e.lengthComputable){ pro.setAttribute('value',e.position); } }progess事件會(huì)在接受數(shù)據(jù)期間周期性觸發(fā)。
