Ajax Axios

關(guān)于Ajax兼容性問題

function createAjax() {
    var ajax;
    try {       // 非 IE 
        ajax = new XMLHttpRequest();
    }
    catch (e) { // IE
        ajax = new ActiveXObject('Microsoft.XMLHTTP');
    }
    return ajax;
}

前端原生Ajax(get方式),后端使用node.js

  • 前后端代碼:
// 后端代碼
const express = require('express');
const path = require('path');
const app = express();

app.use('/static', express.static(path.join(__dirname, 'static')));
app.get('/ajax', (req, res)=>{
    res.send('AJAX');
});

app.listen(8888, () => console.log('啟動(dòng)成功 8888'));



// 前端代碼
// 這里代碼運(yùn)行瀏覽器環(huán)境中
// 創(chuàng)建 AJAX 對(duì)象
// ajax xhr
var ajax = new XMLHttpRequest();
// 設(shè)置請(qǐng)求路徑 請(qǐng)求方式醉蚁, 是否異步
ajax.open('get', '/ajax', true);
// 綁定監(jiān)聽函數(shù)蜓萄, 監(jiān)聽 AJAX 對(duì)象的狀態(tài)的改變
ajax.onreadystatechange = function(){
    if(ajax.readyState == 4 && ajax.status == 200){ //代表服務(wù)成功響應(yīng)完  
        // console.log(ajax.responseText); // 若是文本數(shù)據(jù)可以從 AJAX 對(duì)象 responseText 屬性上拿
        document.querySelector('#result').innerHTML = ajax.responseText;

    }
}
// 發(fā)送請(qǐng)求
ajax.send();

前端原生Ajax(post方式),后端使用node.js

  • 編寫頁(yè)面:
<span id="result"></span>
<form id="loginForm">
    <input type="text" id="username" name="username" placeholder="用戶名">
    <input type="text" id="password" name="username" placeholder="密碼">
    <input id="login" type="button" value="登錄">
</form>
  • 編寫 AJAX 代碼:
window.onload = function(){
    var loginEle = document.querySelector('#login');
    loginEle.onclick = function(){
        var username = document.getElementById('username').value;
        var password = document.getElementById('password').value;
        var params = 'username=' + username + '&password=' + password;

        var ajax = new XMLHttpRequest();

        ajax.open('post', '/login', true);
        // 參數(shù)進(jìn)行 URL 編碼钉答,不然后臺(tái)代碼無(wú)法獲取請(qǐng)求體中的參數(shù)
        ajax.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); 

        ajax.onreadystatechange = function () {
            if(ajax.readyState == 4 && ajax.status == 200){ // 代表后臺(tái)處理完畢且響應(yīng) 200
                // 執(zhí)行對(duì)應(yīng)邏輯
                console.log(ajax.responseText);
                document.getElementById('result').innerText = ajax.responseText;
            }
        }
        ajax.send(params);
    }
}
  • 編寫后臺(tái)代碼:
const express = require('express');
const app = express();

app.use(express.urlencoded({extended: false}));
app.use('/static', express.static(path.join(__dirname, 'static')));

app.post('/login', (req, res) => {
    console.log(req.body);
    if('zs' == req.body.username && '12345' == req.body.password){
        res.send('登錄成功');
    }else{
        res.send('登錄失敗');
    }
});

app.listen(8888, () => {
    console.log('running...');
});
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末挠阁,一起剝皮案震驚了整個(gè)濱河市密任,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌抵恋,老刑警劉巖钱慢,帶你破解...
    沈念sama閱讀 211,639評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異缘眶,居然都是意外死亡嘱根,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,277評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門巷懈,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)该抒,“玉大人,你說(shuō)我怎么就攤上這事顶燕∪岜疲” “怎么了?”我有些...
    開封第一講書人閱讀 157,221評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵割岛,是天一觀的道長(zhǎng)愉适。 經(jīng)常有香客問我,道長(zhǎng)癣漆,這世上最難降的妖魔是什么维咸? 我笑而不...
    開封第一講書人閱讀 56,474評(píng)論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮惠爽,結(jié)果婚禮上癌蓖,老公的妹妹穿的比我還像新娘。我一直安慰自己婚肆,他們只是感情好租副,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,570評(píng)論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著较性,像睡著了一般用僧。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上赞咙,一...
    開封第一講書人閱讀 49,816評(píng)論 1 290
  • 那天责循,我揣著相機(jī)與錄音,去河邊找鬼攀操。 笑死院仿,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播歹垫,決...
    沈念sama閱讀 38,957評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼剥汤,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了排惨?” 一聲冷哼從身側(cè)響起秀姐,我...
    開封第一講書人閱讀 37,718評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎若贮,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體痒留,經(jīng)...
    沈念sama閱讀 44,176評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡谴麦,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,511評(píng)論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了伸头。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片匾效。...
    茶點(diǎn)故事閱讀 38,646評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖恤磷,靈堂內(nèi)的尸體忽然破棺而出面哼,到底是詐尸還是另有隱情,我是刑警寧澤扫步,帶...
    沈念sama閱讀 34,322評(píng)論 4 330
  • 正文 年R本政府宣布魔策,位于F島的核電站,受9級(jí)特大地震影響河胎,放射性物質(zhì)發(fā)生泄漏闯袒。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,934評(píng)論 3 313
  • 文/蒙蒙 一游岳、第九天 我趴在偏房一處隱蔽的房頂上張望政敢。 院中可真熱鬧,春花似錦胚迫、人聲如沸喷户。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,755評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)褪尝。三九已至,卻和暖如春期犬,著一層夾襖步出監(jiān)牢的瞬間恼五,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,987評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工哭懈, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留灾馒,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,358評(píng)論 2 360
  • 正文 我出身青樓遣总,卻偏偏與公主長(zhǎng)得像睬罗,于是被迫代替她去往敵國(guó)和親轨功。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,514評(píng)論 2 348