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')

		}

	});

}

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

巴特西

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

从服务器获取数据

Ajax

XMLHttpRequest

Fetch

最新文章

热门文章