JS学习-从服务器获取数据

从服务器获取数据

Ajax

通过使用诸如 XMLHttpRequest 之类的API或者 — 最近以来的 Fetch API 来实现. 这些技术允许网页直接处理对服务器上可用的特定资源的 HTTP 请求，并在显示之前根据需要对结果数据进行格式化。

XHR已经面世非常之久，现在已经有了相当棒的跨浏览器支持。然而对于网页平台来说，Fetch和Promise是新近的产物，除了IE和Safari浏览器不支持，别的浏览器大多提供了支持。（现在Safari也即将为fetch和promise提供支持）。

在早期，这种通用技术被称为Asynchronous JavaScript and XML（Ajax）。

现在搜索一些东西，比如一个新产品。 主要内容将会改变，但大部分周围的信息，如页眉，页脚，导航菜单等都将保持不变。比如 Amazon

• 页面更新速度更快
• 每次更新都会下载更少的数据

XMLHttpRequest

const verseChoose = document.querySelector('select');
const poemDisplay = document.querySelector('pre');

verseChoose.onchange = function() {
	updateDisplay(verseChoose.value);
};
function updateDisplay(verse) {
	let url = verse.replace(" ", "").toLowerCase() + '.txt';
	let request = new XMLHttpRequest();
	request.open('GET', url);
	request.responseType = 'text';
	request.onload = function() {
		poemDisplay.textContent = request.response;
	};
	request.send();
}

Fetch

const verseChoose = document.querySelector('select');
const poemDisplay = document.querySelector('pre');
//fetch()返回一个promise，它将解析从服务器发回的响应。 text() 也返回了一个 promise
verseChoose.onchange = function() {
	updateDisplay(verseChoose.value);
};
function updateDisplay(verse) {
	let url = verse.replace(" ", "").toLowerCase() + '.txt';
	fetch(url).then(function(response) {
		if(response.ok){
			response.text().then(function(text) {poemDisplay.textContent = text;});
		}else{
			console.log('fetch error')
		}
	});
}

1. fetch(url) 等同于 xhr.open('GET',url)
2. fetch().then() 等同于 xhr.onload
3. text() 等同于 request.responseType = 'text';
4. response.ok 等同于 xhr.status == 200 || xhr.readyState == 4