饥人谷前端 | 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(); 
 }

获取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(); 
 }

获取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(); 
 }

获取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(); 
 }

获取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(); 
 }

获取分页数据: `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(); 
 }

异步与 `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)