AJAX简单回顾-2

由也_
51 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第11天，点击查看活动详情

前言

兄弟们，最近写的文章太水了，昨天的文章0展现哈哈哈绝绝子；但是咱还得接着回顾，今天就把剩下的一些内容稍微总结一下~

AJAX向服务器发送请求

创建完成XMLHttpRequest对象后，接下来就是使用上述对象的open()和send()方法把请求发送到服务器；

open(method,url,async)

规定请求的类型、URL以及是否异步处理请求；

  • method: 确定请求的类型是GET或POST;
  • url：请求的地址；
  • async：发送的请求是否为异步，true(异步)，false(同步)；

send()

把请求发送到服务器； 只在发送POST请求时，接收一个String参数，用于设置请求体；

服务器响应

我们一般通过调用XMLHttpRequest 对象的 responseText 或 responseXML 方法来接受来自服务器的响应数据；

  • responseText：获取字符串格式的响应数据
  • responseXML：获取 XML 形式的响应数据
  • responseURL：获得服务器 301 或 302 的跳转地址

服务器响应时的处理函数

XMLHttpRequest 对象请求过程中的状态变更会赋值给 readyState 属性，同时触发 onreadystatechange 事件；

  • onreadystatechange：存储状态变更处理函数；每当 readyState 属性改变时，就会调用该函数；
  • readyState：存有 XMLHttpRequest 的状态 ；

image.png

  • status：HTTP 请求的返回的状态

当 readyState 等于 4 且状态为 200 时，表示响应已就绪，所以一般格式如下：

function loadXMLDoc()
{
    //定义XMLHttpRequest对象
    var xmlhttp = new XMLHttpRequest();
    //服务器响应时的处理函数
    xmlhttp.onreadystatechange=function()
    {
        //当 readyState 等于 4 且状态为 200 时，表示响应已就绪
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            //document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
            //处理返回值
        }
    }
    xmlhttp.open("GET",url,true);
    xmlhttp.send();
}

总结

到此为止，就可以发请求拿数据了；但是现在好像很少直接这么用了，因为它存在回调地狱的问题，如果要连环发送请求，就得一直嵌套 ，此外现在用的流行的axios库，其实也是ajax，只是用promise对它进行了封装，可以链式调用发送请求，所以一般直接见到的是axios；

本质上，前端请求基于两种，xhr和fetch。 ajax就是基于xhr的，fetch不太常用；axios好像也有点儿记忆模糊了，下次学一学吧~

avatar
文章
阅读
粉丝