上边文章Ajax入门简单介绍了ajax,做了个小demo,这篇文章主要是根据ajax中常见的用法以及问题做一些尝试,大概包含
-
Ajax中的核心对象XMLHttpRequest对象的浏览器兼容问题
IE5是第一款引入xhr对象的浏览器,但是是通过MSXML库中的ActiveX对象实现的,一直到IE7才实现支持原生xhr对象,那考虑到兼容性我们在生成xhr实例时,可以向下面这样
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是解决跨域的一种方式,主要的点就是设置Access-Control-Allow-Origin,可以设置为发送请求的地址,也可以设置为"*",意思是允许所有的跨域访问
-
Ajax请求中的get,post请求
-
跨域访问时cookie该如何操作
客户端设置:xhr.withCredentials = true;,意为允许跨域访问时携带客户端的cookie到服务器端
服务器端设置:
"Access-Control-Allow-Credentials": "true"意思是允许接收跨域访问时携带的cookie,注意此时"Access-Control-Allow-Origin"不能设置为"*"
"Set-Cookie": ['name=tom']:服务器端具体设置cookie字段
看看demo吧
实现功能:结合上边几点,输入用户姓名,发送post请求将姓名发送过去,在服务端设置cookie,发送到客户端,在客户端将用户姓名保存在cookie中,点击获取数据,发送get请求在页面中显示cookie中的用户名以及get请求返回的数据
//客户端代码
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;
}
//服务器端代码
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",//运行跨域访问
"Access-Control-Allow-Credentials": "true"//允许接收跨域访问时携带的cookie,注意此时"Access-Control-Allow-Origin"不能设置为"*"
});
res.end();
});
app.get('*', function (req, res) {
res.writeHead(200, {
"Content-Type": "text/plain",
"Access-Control-Allow-Origin": "http://localhost:63342",//运行跨域访问
});
fs.readFile('info.txt', function (err, data) {
res.write(data);
res.end();
})
});
设置第一个用户名,然后点击获取
设置第二个用户名,点击获取
遇到的问题:
1.post请求跨域访问时已经设置好但是出现无法跨域访问的问题,还出现在服务器端获取到的参数为{}的问题
解决方案:客户端设置xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
发送数据的时候参数以字符串格式发送
2.post请求发送的参数如果是中文就报错了,尝试了设置字符集,都没有成功
未解决
各位大佬看到这篇文章针对我遇到的问题麻烦指教,拜托啦