AJAX

<!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>

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市炸客,隨后出現(xiàn)的幾起案子疾棵,更是在濱河造成了極大的恐慌,老刑警劉巖痹仙,帶你破解...
    沈念sama閱讀 212,718評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件是尔,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡开仰,警方通過(guò)查閱死者的電腦和手機(jī)拟枚,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,683評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門薪铜,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人恩溅,你說(shuō)我怎么就攤上這事隔箍。” “怎么了脚乡?”我有些...
    開(kāi)封第一講書(shū)人閱讀 158,207評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵蜒滩,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我奶稠,道長(zhǎng)俯艰,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,755評(píng)論 1 284
  • 正文 為了忘掉前任锌订,我火速辦了婚禮竹握,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘瀑志。我一直安慰自己涩搓,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,862評(píng)論 6 386
  • 文/花漫 我一把揭開(kāi)白布劈猪。 她就那樣靜靜地躺著昧甘,像睡著了一般。 火紅的嫁衣襯著肌膚如雪战得。 梳的紋絲不亂的頭發(fā)上充边,一...
    開(kāi)封第一講書(shū)人閱讀 50,050評(píng)論 1 291
  • 那天,我揣著相機(jī)與錄音常侦,去河邊找鬼浇冰。 笑死,一個(gè)胖子當(dāng)著我的面吹牛聋亡,可吹牛的內(nèi)容都是我干的肘习。 我是一名探鬼主播,決...
    沈念sama閱讀 39,136評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼坡倔,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼漂佩!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起罪塔,我...
    開(kāi)封第一講書(shū)人閱讀 37,882評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤投蝉,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后征堪,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體瘩缆,經(jīng)...
    沈念sama閱讀 44,330評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,651評(píng)論 2 327
  • 正文 我和宋清朗相戀三年佃蚜,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了庸娱。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片着绊。...
    茶點(diǎn)故事閱讀 38,789評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖涌韩,靈堂內(nèi)的尸體忽然破棺而出畔柔,到底是詐尸還是另有隱情,我是刑警寧澤臣樱,帶...
    沈念sama閱讀 34,477評(píng)論 4 333
  • 正文 年R本政府宣布靶擦,位于F島的核電站,受9級(jí)特大地震影響雇毫,放射性物質(zhì)發(fā)生泄漏玄捕。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,135評(píng)論 3 317
  • 文/蒙蒙 一棚放、第九天 我趴在偏房一處隱蔽的房頂上張望枚粘。 院中可真熱鬧,春花似錦飘蚯、人聲如沸馍迄。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,864評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)攀圈。三九已至,卻和暖如春峦甩,著一層夾襖步出監(jiān)牢的瞬間赘来,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,099評(píng)論 1 267
  • 我被黑心中介騙來(lái)泰國(guó)打工凯傲, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留犬辰,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,598評(píng)論 2 362
  • 正文 我出身青樓冰单,卻偏偏與公主長(zhǎng)得像幌缝,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子诫欠,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,697評(píng)論 2 351

推薦閱讀更多精彩內(nèi)容