饥人谷前端 | Ajax 与 Promise

AJAX 代码

获取CSS: getCSS()

	// https://github.com/zkeq/jirengu_learn_08/blob/0db6222580aa8fe25d158392a8f3fb804cf8feb7/public/main.js#L1-L12
	getCSS.onclick = function() {
	const xhr = new XMLHttpRequest();
	xhr.open('GET', '/style.css');
	xhr.onreadystatechange = () =>{
	if(xhr.readyState === 4 && xhr.status === 200){
	const style = document.createElement('style');
	style.innerHTML = xhr.responseText;
	document.head.appendChild(style);
	}
	}
	xhr.send();
	}

hosted with ❤ by GitHub

获取JS: getJS()

	// https://github.com/zkeq/jirengu_learn_08/blob/0db6222580aa8fe25d158392a8f3fb804cf8feb7/public/main.js#L14-L24
	getJS.onclick = function() {
	const xhr = new XMLHttpRequest();
	xhr.open('GET', '/2.js');
	xhr.onload = function() {
	// const script = document.createElement('script');
	// script.innerHTML = xhr.responseText;
	// document.head.appendChild(script);
	eval(xhr.responseText);
	}
	xhr.send();
	}

hosted with ❤ by GitHub

获取HTML: getHTML()

	// https://github.com/zkeq/jirengu_learn_08/blob/0db6222580aa8fe25d158392a8f3fb804cf8feb7/public/main.js#L26-L35
	getHTML.onclick = function() {
	const xhr = new XMLHttpRequest();
	xhr.open('GET', `/3.htm`);
	xhr.onload = function() {
	const div = document.createElement('div');
	div.innerHTML = xhr.responseText;
	document.body.appendChild(div);
	}
	xhr.send();
	}

hosted with ❤ by GitHub

获取XML: getXML()

	// https://github.com/zkeq/jirengu_learn_08/blob/0db6222580aa8fe25d158392a8f3fb804cf8feb7/public/main.js#L37-L48
	getXML.onclick = function() {
	const xhr = new XMLHttpRequest();
	xhr.open('GET', '/4.xml');
	xhr.onreadystatechange = () =>{
	if (xhr.readyState === 4 && xhr.status === 200) {
	const xml = xhr.responseXML;
	const text = xml.getElementsByTagName('warning')[0].textContent;
	console.log(text.trim());
	}
	}
	xhr.send();
	}

hosted with ❤ by GitHub

获取JSON: getJSON()

	// https://github.com/zkeq/jirengu_learn_08/blob/0db6222580aa8fe25d158392a8f3fb804cf8feb7/public/main.js#L50-L60
	getJSON.onclick = function() {
	const xhr = new XMLHttpRequest();
	xhr.open('GET', '/5.json');
	xhr.onreadystatechange = () =>{
	if (xhr.readyState === 4 && xhr.status === 200) {
	const json = JSON.parse(xhr.responseText);
	console.log(json);
	}
	}
	xhr.send();
	}

hosted with ❤ by GitHub

获取分页数据: getPage()

	// https://github.com/zkeq/jirengu_learn_08/blob/0db6222580aa8fe25d158392a8f3fb804cf8feb7/public/main.js#L62-L80
	let index = 1;
	getPage.onclick = function() {
	if (index >= 3) {
	index = 1;
	}
	const xhr = new XMLHttpRequest();
	xhr.open('GET', `/page${index += 1}`);
	xhr.onreadystatechange = () =>{
	if (xhr.readyState === 4 && xhr.status === 200) {
	const array = JSON.parse(xhr.responseText);
	array.forEach(item => {
	const li = document.createElement('li');
	li.textContent = item.id
	xxx.appendChild(li);
	})
	}
	}
	xhr.send();
	}

hosted with ❤ by GitHub

异步与 promise

• 参数会全部传给后面的函数

	const array = ['1','2','3'].map(parseInt)
	===
	const array = ['1','2','3'].map((item, i, arr) => {
	return parseInt(item, i, arr)
	// parseInt("1", 0, arr) => 1
	// parseInt("2", 1, arr) => NaN
	// parseInt("3", 2, arr) => NaN
	})
	// 透传了
	// 正确写法
	const array = ['1','2','3'].map(item=>parseInt(item))
	console.log(array)

hosted with ❤ by GitHub

改成 Promise

背下来这玩意

小节: Promise

• 文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise