Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
是个前端都会用ajax，因为它原生的写法很鸡肋，所以大多会封装下，导致可能很多人不会自己写个ajax请求。
var xhr= new XMLHttpRequest(); // 新建XMLHttpRequest对象
xhr.onload= function(){ //请求完成
console.log(this.responseText);
}
// 发送请求:
xhr.open('GET', '/user');
xhr.send();
这样一个请求就发出去了。很麻烦，发个简单请求，还得写这么多行代码。
实际开发中当然不会这么写，否则代码冗余，可读性差，用promise封装一下
function send(url){
return new Promise((resolve,reject) => {
var xhr= new XMLHttpRequest(); // 新建XMLHttpRequest对象
xhr.onload = function(){ //请求完成
if(xhr.status === 200 )
resolve(this.responseText);
else
reject(this.responseText);
}
// 发送请求:
xhr.open('GET', url);
xhr.send();
})
}
之后就可以send().then()这么用了。不多说，用express生成个简单服务器试试效果。
后端代码：
router.get('/getUser', function(req, res, next) {
res.send('success'); //这个请求返回成功
});
router.get('/getName', function(req, res, next) {
res.status(404).send('failed'); //这个请求返回失败
});
前端代码：
send('/getUser').then(json =>{console.log(json)}); //success
send('/getName').catch(json =>{console.log(json)}); //failed
分别打印出了success和failed。
后面fetch出来了，ajax受到了前所未有的威胁，看看大家是怎么评价fetch的。
语法简洁，更加语义化
基于标准 Promise 实现，支持 async/await
唔~说的好像fetch可以直接上手似的。
先试试它能给我什么结果。
fetch('/getUser').then(response=> response.text()).then(json => console.log(json)); //success
fetch('/getName').then(response=> response.text()).then(json => console.log(json)); //failed
可以看到fetch不会因为服务器返回了404，而帮你reject。注意'getName'这个接口是靠then回调来处理的，不是catch。所以直接用fetch不行，也需要额外封装一层。
语法简洁，更加语义化。基于标准 Promise 实现，支持 async/await 以这点来说，fetch对开发库的人员是较友好的，相比ajax。
ReadableStream
fetch 将 response.body 设计成 ReadableStream。所以上面我们取返回内容的时候，是通过text()函数。因为这个设计我们不得不多进行一次转化。看看response.body是什么
fetch('/getUser').then(response=>console.log(response.body));
这个设计对读取大型文件的时候十分有用。flv.js就是用fetch请求视频数据，然后不断读取流中数据，解析，再塞到video标签，让video标签能够持续播放视频。
我们不必等待所有数据全部返回再处理，而是可以一点点地边读数据边处理数据，是不是让人很兴奋。
function fetchUrl(url){
fetch(url).then(response => {
var reader = response.body.getReader();
let charsReceived = 0; //接收字符
let num = 0;
reader.read().then(function processText({ done, value }) {
if (done) {
console.log("Stream complete,received " + charsReceived+" read " + num);
return;
}
charsReceived += value.length;
num++;
return reader.read().then(processText); //循环读直到全部读完为止
})
});
}
fetchUrl('/getUser');
//Stream complete,received 7 read 1
success ，是7个字符。读了一次。读一次是因为服务器是一次性的把success吐出来了。
服务器增加条路由
router.get('/getFile', function(req, res, next) {
let stream = fs.createReadStream(__dirname + '/test.txt');//创造可读流
stream.pipe(res);//将可读流写入response
});
再试试
fetchUrl('/getFile'); //Stream complete,received 436084 read 7
很完美。将test.txt文件一小段一小段地发送到客户端，减小了服务器的内存压力,同时也提高了前端的响应速度。
网友评论