浅析Ajax - 掘金

一.AJAX的原理

Ajax的全称是异步javascript和XML,目前我们一般用JSON代替XML。
通俗的理解:在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式,就是Ajax。
AJAX 主要用于在不刷新页面的情况下向浏览器发起请求并接受响应，最后局部更新页面。
优点是不刷新就可以发起请求并接受响应。

二.AJAX使用方法

想要用 JS 发起一个AJAX请求很简单，一共 4 步

第一步创建一个XMLHttpRequest对象

const request = new XMLHttpRequest();

第二步open方法设置参数

request.open("GET","/style.css")

第三步监听请求成功,并接受响应

request.onreadystatechange = ()=>{
  if(this.readyState === 4){
    if (this.status >= 200 && this.status<300) {
    console.log(request.response);
    } else {
    alert("请求失败");
    }
  }

第四步发送请求

request.send();

三.一个请求的一生

请求在不同阶段会有不同的readyState，了解这个更能理解第三步onreadyStateChange事件

请求的不同阶段	readyState
let request = new XMLHttpRequest()	0(代理被创建,但是未调用open方法)
request.open('GET', '/style.css')	1(open方法被调用)
request.send()	2(send方法被调用)
第一个响应信息出现在浏览器	3(下载中)
有响应下载完成	4(下载完成)

当readyState为4时表示请求已经完成,然后我们就可以通过请求的状态码来判断请求是否成功。

四.实战

请求css文件

重点在怎么处理拿到的响应：生成style标签

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.body.appendChild(style);
      } else {
        alert("请求CSS失败");
      }
    }
  }
  request.send();
}

请求JS文件

重点在怎么处理拿到的响应：生成script标签

getHTML.onclick = () => {
  const request = new XMLHttpRequest();
  request.open("GET", "index.js");
  request.onreadystatechange = () => {
    if (request.readyState === 4) {
      if (request.status >= 200 && request.status < 300) {
        const script = document.createElement("script");
        script.src = request.response;
        document.body.appendChild(script);
      } else {
        alert("请求JS失败");
      }
    }
  }
  request.send();
}

请求HTML文件

getHTML.onclick = () => {
  const request = new XMLHttpRequest();
  request.open("GET", "index.html");
  request.onreadystatechange = () => {
    if (request.readyState === 4) {
      if (request.status >= 200 && request.status < 300) {
        const div = document.createElement("div");
        div.innerHTML = request.response;
        document.body.appendChild(div);
      } else {
        alert("请求CSS失败");
      }
    }
  }
  request.send();
}

请求JSON文件

JSON.parse 将符合JSON语法的字符串转换成JS对应类型的数据 JSON.stringify 把JS数据变成JSON字符串

getJSON.onclick = () => {
    const request = new XMLHttpRequest()
    request.open('GET', 'index.json')
    request.onreadystatechange = () => {
        if (request.readyState === 4) {
            if (request.status === 200) {
                const obj = JSON.parse(request.response);
            }
        }
    }

    request.send()
}

五.利用XMLHttpRequest封装Ajax

function ajax(url, method) {
  return new Promise((resolve, reject) => {
    let request = new XMLHttpRequest();
    request.open(method, url);
    request.onreadystatechange = () => {
      if (request.readyState === 4) {
        if (request.status >= 200 && request.status < 300) {
          resolve(request.responseText);
        }
      } else {
        reject("发送求失败");
      }
    };
    request.send();
  });
}