AJAX

背景

AJAX(Async JavaScript And XML),是浏览器上的功能

• 浏览器可以发请求，收响应
• 浏览器在window上加了一个XMLHttpRequest函数
• 用这个构造函数（类）可以构造出一个对象
• JS通过它实现发请求，收响应

准备一个server.js服务器，添加index.html/main.js两个路由

加载css

• 创建HttpRequest对象（全称是XMLHttpRequest)
• 调用对象的open方法
• 监听对象的onload&onerror事件
• ——专业前端会改用onreadystatechange事件
• ——在事件处理函数里操作CSS文件内容
• 调用对象的send方法（发送请求）
• ——具体代码如下

  getCSS.onclick = ()=>{
    const request = new XMLHttpRequest()
  request.open("GET","/style.css")
  request.onreadystatechange = ()=>{
      if(request.readyState === 4)
    {
        if(request.status >= 200 && request.status<300)
      {
          const style = document.createElement("style")
            style.innerHTML = request.response
            document.head.appendChild(style)
      }else{
        alert("加载失败")
      }
    }
  }
  request.send()
  }

  加载JS

  getJS.onclick = () => {
  const request = new XMLHttpRequest();
  request.open("GET", "/2.js");
  request.onreadystatechange = () => {
    if (request.readyState === 4 && request.status === 200) {
      const script = document.createElement("script");
      script.innerHTML = request.response;
      document.body.appendChild(script);
    }
  };
  request.send();
  };

  加载HTML

  getHTML.onclick = () => {
  const request = new XMLHttpRequest();
  request.open("GET", "3.html");
  request.onreadystatechange = () => {
    if (request.readyState === 4 && request.status === 200) {
      const div = document.createElement("div");
      div.innerHTML = request.response;
      document.body.appendChild(div);
    }
  };
  request.send();
  };

  加载XML

  getXML.onclick = () => {
  const request = new XMLHttpRequest();
  request.open("GET", "/4.xml");
  request.onreadystatechange = () => {
    if (request.readyState === 4 && request.status === 200) {
      const dom = request.responseXML;
      const text = dom.getElementsByTagName("warning")[0].textContent;
      console.log(text.trim());
    }
  };
  request.send();
  };

  加载JSON

  JSON（JavaScript Object Notation）是一门语言独立的标记语言，跟HTML、XML、MARKDOWN一样是用来展示数据的。JSON官方网站解释的很清楚。
  JSON.parse(xxx) 可以把符合JSON语法的字符串JS对应类型的数据。由于JSON只有6种数据类型，如果不符合JSON语法，则会抛出一个Error对象，一般用try catch 捕获错误
  JSON.stringfy() 是JSON.parse()的逆运算，由于JS比JSON数据类型多，所以不一定会成功，如果失败，就抛出一个error对象。

  getJSON.onclick=()=>{
    const request = new XMLHttpRequest()
  request.open("GET","/5.json")
  request.onreadystatechange = () => {
      if(request.reasyState === 4 && request.status ===200){
        const object = JSON.parse(request.reponse)
      myName.textContent = object.name
    }
  }
  request.send()
  }

  加载分页

  let n=1
  getPage.onclick = ()=>{
    const request = new XMLHttpRequest()
  request.open("GET",`/page${n+1}`)
  request.onreadystatechange = ()=>{
      if(request.reasyState === 4 && request.status === 200){
        const array = JSON.parse(request.response)
      array.forEach(item=>{
        const li = document.createElement("li")
          li.textContent = item.id
        xxx.appendChild(li)
      })
      n += 1
    }
  }
  request.send()
  }