浅析Ajax

浅析Ajax

技术杂谈小彩虹2021-07-15 1:50:1450A+A-

一.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();
  });
}

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1

联系我们