關(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
<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>
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);
}
}
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)系作者