- 實(shí)例化XMLHttpRequest對(duì)象。
var xhr=null;
try {
xhr=new XMLHttpRequest();
}catch (e){
//ie6及其以下的版本
xhr=new ActiveXObject('Microsoft.XMLHTTP');
}
- 在使用xhr對(duì)象時(shí)，要使用的第一個(gè)方法是open().
xhr.open('get','1.example.txt',true);
這里接收三個(gè)參數(shù)，要發(fā)送請(qǐng)求的類型（get,post）,請(qǐng)求的URL和是否異步（true:異步，false：同步）。
注意：這里并不會(huì)真正發(fā)送請(qǐng)求，而是啟動(dòng)一個(gè)請(qǐng)求以備發(fā)送。
- 發(fā)送請(qǐng)求，調(diào)用send()方法。
xhr.send(null)
GET請(qǐng)求沒有主體，所以應(yīng)該傳遞null或者省略這個(gè)參數(shù)。POST請(qǐng)求通常擁有主體，同時(shí)它應(yīng)該匹配使用setRequestHeader()指定的“Content-Type”頭。
- get請(qǐng)求。
get請(qǐng)求通常用于向服務(wù)器查詢某些信息，必要時(shí)，可以將查詢字符串參數(shù)追加到URL的末尾，但參數(shù)必須經(jīng)過正確的編碼。
function addURLParam(url,data) {
url +='?';
var arr = [];
for(var name in data) {
// encodeURIComponent() ：用于對(duì) URI 中的某一部分進(jìn)行編碼
arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
}
return url+arr.join('&');
}
這里的data格式是json。
2.post請(qǐng)求。
對(duì)于請(qǐng)求，通常像服務(wù)器發(fā)送應(yīng)該被保存的數(shù)據(jù)，應(yīng)該把數(shù)據(jù)作為請(qǐng)求的主題提交，它不是以地址形式傳參，而是在send()中傳參。
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
// 傳輸數(shù)據(jù)
xhr.send(data);
4.監(jiān)聽事件，只要 readyState 的值變化，就會(huì)調(diào)用 readystatechange 事件.。
xhr.onreadystatechange = function() {
//readyState值為4，說明所有數(shù)據(jù)已就緒
if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 && xhr.status<300 ) {
alert(xhr.responseText)
} else {
alert('出錯(cuò)了,Err：' + xhr.status);
}
}
}
