上邊文章Ajax入門簡單介紹了ajax,做了個小demo,這篇文章主要是根據(jù)ajax中常見的用法以及問題做一些嘗試,大概包含
-
Ajax中的核心對象XMLHttpRequest對象的瀏覽器兼容問題
IE5是第一款引入xhr對象的瀏覽器,但是是通過MSXML庫中的ActiveX對象實(shí)現(xiàn)的,一直到IE7才實(shí)現(xiàn)支持原生xhr對象,那考慮到兼容性我們在生成xhr實(shí)例時,可以向下面這樣
function createXhr() {
if (typeof XMLHttpRequest != "undefined") { //IE7+,Firefox,Opera,Chrome和Safari都支持以這種元素xhr對象
return new XMLHttpRequest();
}
else if (typeof ActiveXObject != "undefined") { //IE7之前的版本
if (typeof arguments.callee.activeXString != "string") {
var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"], i, len;
for (var i = 0; len = versions.length, i < len; i++) {
try {
new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
break;
} catch (ex) {
console.log(ex);
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
}
else {
throw new Error('no xhr object available')
}
}
-
Ajax中的跨域訪問之CORS
CORS是解決跨域的一種方式,主要的點(diǎn)就是設(shè)置Access-Control-Allow-Origin,可以設(shè)置為發(fā)送請求的地址,也可以設(shè)置為"*",意思是允許所有的跨域訪問
-
Ajax請求中的get,post請求
-
跨域訪問時cookie該如何操作
客戶端設(shè)置:xhr.withCredentials = true;,意為允許跨域訪問時攜帶客戶端的cookie到服務(wù)器端
服務(wù)器端設(shè)置:
"Access-Control-Allow-Credentials": "true"意思是允許接收跨域訪問時攜帶的cookie,注意此時"Access-Control-Allow-Origin"不能設(shè)置為"*"
"Set-Cookie": ['name=tom']:服務(wù)器端具體設(shè)置cookie字段
看看demo吧
實(shí)現(xiàn)功能:結(jié)合上邊幾點(diǎn),輸入用戶姓名,發(fā)送post請求將姓名發(fā)送過去,在服務(wù)端設(shè)置cookie,發(fā)送到客戶端,在客戶端將用戶姓名保存在cookie中,點(diǎn)擊獲取數(shù)據(jù),發(fā)送get請求在頁面中顯示cookie中的用戶名以及get請求返回的數(shù)據(jù)
//客戶端代碼
window.onload = function () {
var btn1 = document.getElementById('set');
var btn = document.getElementById('get');
btn1.onclick = setData;
btn.onclick = getData;
};
function setData() {
var name = document.getElementById('input').value;
var xhr = createXhr();
xhr.withCredentials = true;//允許跨域訪問時攜帶cookie
xhr.open('post', 'http://localhost:3000/', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(`name=${name}`);
}
function getData() {
var xhr = createXhr();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
var nameCookie = getCookie(document.cookie, ' name');
document.getElementById('eles').innerHTML = `hello ${nameCookie} ${xhr.responseText}`;
}
};
xhr.withCredentials = true;//允許跨域訪問時攜帶cookie
xhr.open('get', 'http://localhost:3000/', true);
xhr.send(null);
}
function createXhr() {
if (typeof XMLHttpRequest != "undefined") { //IE7+,Firefox,Opera,Chrome和Safari都支持以這種元素xhr對象
return new XMLHttpRequest();
}
else if (typeof ActiveXObject != "undefined") { //IE7之前的版本
if (typeof arguments.callee.activeXString != "string") {
var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"], i, len;
for (var i = 0; len = versions.length, i < len; i++) {
try {
new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
break;
} catch (ex) {
console.log(ex);
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
}
else {
throw new Error('no xhr object available')
}
}
function getCookie(cookieString, name) {
var cookies = cookieString.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookieInfo = cookies[i].split('=');
console.log(cookieInfo[0]);
if (cookieInfo[0] === name) {
return cookieInfo[1];
}
}
return false;
}
//服務(wù)器端代碼
var Express = require('express');
var app = new Express();
var fs = require('fs');
var bodyParser = require('body-parser');
app.listen(3000, function () {
console.log('3000 port start');
});
app.use(bodyParser.urlencoded({extended: true}));
app.post('*', function (req, res) {
res.writeHead(200, {
"Set-Cookie": [`name=${req.body.name}`],
"Access-Control-Allow-Origin": "http://localhost:63342",//運(yùn)行跨域訪問
"Access-Control-Allow-Credentials": "true"http://允許接收跨域訪問時攜帶的cookie,注意此時"Access-Control-Allow-Origin"不能設(shè)置為"*"
});
res.end();
});
app.get('*', function (req, res) {
res.writeHead(200, {
"Content-Type": "text/plain",
"Access-Control-Allow-Origin": "http://localhost:63342",//運(yùn)行跨域訪問
});
fs.readFile('info.txt', function (err, data) {
res.write(data);
res.end();
})
});
設(shè)置第一個用戶名,然后點(diǎn)擊獲取
設(shè)置第二個用戶名,點(diǎn)擊獲取
遇到的問題:
1.post請求跨域訪問時已經(jīng)設(shè)置好但是出現(xiàn)無法跨域訪問的問題,還出現(xiàn)在服務(wù)器端獲取到的參數(shù)為{}的問題
解決方案:客戶端設(shè)置xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
發(fā)送數(shù)據(jù)的時候參數(shù)以字符串格式發(fā)送
2.post請求發(fā)送的參數(shù)如果是中文就報錯了,嘗試了設(shè)置字符集,都沒有成功
未解決
各位大佬看到這篇文章針對我遇到的問題麻煩指教,拜托啦
