• AJAX (Asynchronous JavaScript And XML) 就是用 JS 执行异步网络请求
  • AJAX 是浏览器上的功能，浏览器可以发请求与收响应
  • 浏览器在 window 上加了一个构造函数 XMLHttpRequest
  • JS通过这个函数构造出的对象可以实现发请求与收响应的功能
  1. > window.XMLHttpRequest // ƒ XMLHttpRequest() { [native code] }
  2. > typeof window.XMLHttpRequest // "function"

使用方法

  1. 创建 HttpRequest对象（全称 XMLHttpRequest）
  2. 调用对象的 open 方法
  3. 监听对象的 onload 和 onerror事件（专业前端改用 onreadystatechange 事件， 因为onerror事件不会触发）
  4. 在事件处理函数里操作CSS内容
    • 加载 CSS : <style>, innerHTML
    • 加载 JS : <script>, innerHTML
    • 加载 HTML : <div>, innerHTML, DOM API
    • 加载 XML : responseXML , DOM API
    • 加载JSON : JSON.parse
  5. 调用对象的 send 方法（发现请求）
  1. getCSS.onclick = () => {
  2.     const request = new XMLHttpRequest(); // readyState === 0
  3.     request.open('GET', 'style.css');     // readyState === 1
  4.     request.onreadystatechange = () => {
  5.         if (request.readyState === 4) {
  6.             // 成功 2xx，失败 4xx 5xx
  7.             if (request.status >= 200 && request.status < 300) {
  8.                 console.log(1, request.response);
  9.                 const style = document.createElement('style');
  10.                 style.innerHTML = request.response;
  11.                 document.head.appendChild(style);
  12.             }else{
  13.                 alert('加载失败');
  14.             }
  15.         }
  16.     }
  17.         // request.onload = () => {
  18.     //     const style = document.createElement('style');
  19.     //     style.innerHTML = request.response;
  20.     //     document.head.appendChild(style);
  21.     // }
  22.     // request.onerror = () => {
  23.     //     alert('加载失败');
  24.     // }
  25.     request.send();   // readyState === 2
  26. }
  28. getJS.onclick = () => {
  29.     const request = new XMLHttpRequest();
  30.     request.open('GET', '2.js');
  31.     request.onreadystatechange = () => {
  32.         if (request.readyState === 4) {
  33.             if (request.status >= 200 && request.status < 300) {
  34.                 console.log(1, request.response);
  35.                 const script = document.createElement('script');
  36.                 script.innerHTML = request.response;
  37.                 document.body.appendChild(script);
  38.             }else{
  39.                 alert('加载失败');
  40.             }
  41.         }
  42.     }
  43.     request.send();
  44. }
  46. getHTML.onclick = () => {
  47.     const request = new XMLHttpRequest();
  48.     request.open('GET', '3.html');
  49.     request.onreadystatechange = () => {
  50.         if (request.readyState === 4) {
  51.             if (request.status >= 200 && request.status < 300) {
  52.                 // console.log(1, request.responseXML);
  53.                 const div = document.createElement('div');
  54.                 div.innerHTML = request.response;
  55.                 document.body.appendChild(div);
  56.             }else{
  57.                 alert('加载失败');
  58.             }
  59.         }
  60.     }
  61.     request.send();
  62. }
  64. getXML.onclick = () => {
  65.     const request = new XMLHttpRequest();
  66.     request.open('GET', '4.xml');
  67.     request.onreadystatechange = () => {
  68.         if (request.readyState === 4) {
  69.             if (request.status >= 200 && request.status < 300) {
  70.                 const dom = request.responseXML;
  71.                 // console.log(1, request.responseXML);
  72.                 const text = dom.getElementsByTagName('warning')[0].textContent;
  73.                 console.log(text.trim()); // text.trim() 去掉 text 前后的空格
  74.             }else{
  75.                 alert('加载失败');
  76.             }
  77.         } 
  78.     }
  79.     request.send();
  80. }
  82. getJSON.onclick = () => {
  83.     const request = new XMLHttpRequest();
  84.     request.open('GET', '5.json');
  85.     request.onreadystatechange = () => {
  86.         if (request.readyState === 4) {
  87.             if (request.status >= 200 && request.status < 300) {
  88.                // console.log(request.response);
  89.                const object = JSON.parse(request.response);
  90.                // console.log(object);
  91.                ZhuzhuName.textContent = object.name;
  92.             }else{
  93.                 alert('加载失败');
  94.             }
  95.         } 
  96.     }
  97.     request.send();
  98. }

readState

XMLHttpRequest.readyState 属性返回一个 XMLHttpRequest 代理当前所处的状态

一个请求的生命周期：

  1.                                       readState
  2. const req = new XMLHttpRequest()  ------  0
  3. req.open() 后              --------------- 1
  4. req.send() 后              --------------- 2
  5. 页面出现第一个信息            --------------- 3
  6. 页面信息下载完               --------------- 4

AJAX面试代码

  1. var request = new XMLHttpRequest();
  2. request.open('GET', '/xx');
  3. request.onreadystatechange = function() {
  4.     if(request.readyState === 4){
  5.       console.log('请求完成');
  6.     if(request.response.status >= 200 && request.response.status < 300) {
  7.         console.log('请求成功')
  8.     }else{
  9.       console.log(request.status)
  10.     }
  11.   }
  12. }
  13. request.send()

练习