<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
background-image:linear-gradient
</style>
<script type="text/javascript">
1褥傍、創(chuàng)建出ajax這個(gè)對(duì)象
var xhr;
ajax請(qǐng)求對(duì)象
if(window.XMLHttpRequest) {
//有表示當(dāng)前標(biāo)準(zhǔn)的瀏覽器
xhr = new XMLHttpRequest();
} else {
無(wú)喉誊,是ie 5、6掘剪、7這幾個(gè)瀏覽器腻格,使用ActiveXObject()創(chuàng)建
在IE5\6\7這幾個(gè)老板瀏覽器中ajax組件是放在ActiveXObject()組件庫(kù)中画拾,需要
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.window.XMLHttpRequest
2、配置請(qǐng)求信息
open函數(shù)中三個(gè)參數(shù)
1菜职、設(shè)置請(qǐng)求方式 GET POST
2青抛、設(shè)置請(qǐng)求的數(shù)據(jù)的接口地址
3、設(shè)置請(qǐng)求是否異步請(qǐng)求(異步請(qǐng)求)當(dāng)請(qǐng)求發(fā)出后酬核,不再等待請(qǐng)求的數(shù)據(jù)蜜另,而是先執(zhí)行其他任務(wù),當(dāng)數(shù)據(jù)到達(dá)本地后再處理(默認(rèn)的請(qǐng)求方式)
//xhr.open('open','index.html',true)
post請(qǐng)求參數(shù)問(wèn)題嫡意,把post請(qǐng)求所需要的參數(shù)放在send()方法中
xhr = ("post","demo.text",true/false)
//xhr.send('user=liwei&password=1234567');
//內(nèi)容放在這里
post請(qǐng)求中如果有中文字符举瑰,則需要對(duì)中文字符進(jìn)行編碼操作
xhr.send('user=' + encodeURI('李威') + '&password=1234567');
console.log(encodeURI("李威")); * /
get請(qǐng)求,如果有參數(shù)則把請(qǐng)求參數(shù)直接拼接在url之后
在get請(qǐng)求中如果每次請(qǐng)求的是同一個(gè)接口,則瀏覽器會(huì)從緩存中取數(shù)據(jù),而不是向服務(wù)器請(qǐng)求數(shù)據(jù),如果服務(wù)器該接口中的數(shù)據(jù)內(nèi)容發(fā)生改變,則永遠(yuǎn)拿不到最新的數(shù)據(jù),所以我們可以在請(qǐng)求的接口后拼接一個(gè)隨機(jī)數(shù)參數(shù),這樣瀏覽器每次拿到接口在緩存中都找不到這個(gè)接口對(duì)應(yīng)的數(shù)據(jù),舊會(huì)從服務(wù)器拿數(shù)據(jù)了,(而服務(wù)器端并沒(méi)有開(kāi)設(shè)接手隨機(jī)數(shù)參數(shù)的字段,所有g(shù)et發(fā)送過(guò)來(lái)的隨機(jī)數(shù)會(huì)被服務(wù)器丟棄,只返回能處理的接口數(shù)據(jù))
xhr.open('GET', 'myJSON.json', true);
//3蔬螟、發(fā)送請(qǐng)求
xhr.send(null);
4此迅、監(jiān)聽(tīng)數(shù)據(jù)傳輸情況
通過(guò)xhr的onreadystate事件來(lái)獲取并判斷當(dāng)前服務(wù)器狀態(tài)
xhr.onreadystatechange = function() {
每當(dāng)xhr的對(duì)象的readystate屬性值改變時(shí),都會(huì)執(zhí)行這個(gè)函數(shù)
我們是通過(guò)xhr的onreadystate事件來(lái)獲取并判斷當(dāng)前的服務(wù)器狀態(tài)
只有當(dāng)readystate的值為4旧巾,且status的值為200時(shí)邮屁,服務(wù)器的數(shù)據(jù)才算發(fā)送到本地 響應(yīng)才算成功
if(xhr.readyState == 4 && xhr.status == 200) {
var result = xhr.responseText;
獲取到的json字符串換位json對(duì)象
var resultObj = JSON.parse(reslt);
alert(xhr.responseText);
alert(xhr.responseXML);
當(dāng)請(qǐng)求的數(shù)據(jù)是使用XML格式傳遞的,則responseTEXT屬性會(huì)把這些數(shù)據(jù)轉(zhuǎn)換為一個(gè)字符串菠齿,但是responseXML屬性會(huì)把這些數(shù)據(jù)當(dāng)成XML的文檔對(duì)象,在解析時(shí)方便
當(dāng)請(qǐng)求的數(shù)據(jù)是Json格式傳輸時(shí)坐昙,則responseTEXT屬性會(huì)把這些數(shù)據(jù)轉(zhuǎn)換為一個(gè)json字符串绳匀,而responseXML屬性并不會(huì)接收到這些數(shù)據(jù)
//xhr.responseText 保存 不是XML格式 之外的格式
//xhr.responseXML 保存 XML的 格式
}
}
</script>
</head>
<body>
</body>
</html>