ajax进阶教学,Ajax进阶

上边文章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();

})

});

设置第一个用户名,然后点击获取

用户名为tom

设置第二个用户名,点击获取

用户名为lisa

遇到的问题:

1.post请求跨域访问时已经设置好但是出现无法跨域访问的问题,还出现在服务器端获取到的参数为{}的问题

解决方案:客户端设置xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

发送数据的时候参数以字符串格式发送

2.post请求发送的参数如果是中文就报错了,尝试了设置字符集,都没有成功

未解决

各位大佬看到这篇文章针对我遇到的问题麻烦指教,拜托啦