ajax _局部刷新获取数据

yuroll

已于 2023-03-24 12:14:38 修改

阅读量361

点赞数

分类专栏： Ajax 文章标签： ajax javascript 前端

于 2023-03-17 13:25:15 首次发布

本文链接：https://blog.csdn.net/yuroll/article/details/129618596

版权

本文探讨了Ajax技术，包括XMLHTTPRequest（xhr）的原生使用，Fetch API作为xhr的现代升级，以及第三方库Axios的优势。Fetch提供了Promise API，而Axios以其良好的兼容性和支持Promise特性脱颖而出，常用于浏览器和Node.js环境中。

摘要由CSDN通过智能技术生成

ajax = 异步的（ javascript +xml）

目的：通过 js 向服务器发送请求来加载数据

xml是早期使用的数据格式：<student><name>yuroll</name></student>

json，如今用数据格式：{"name":"yuroll"}

Ajax 可选方案：XMLHTTPRequest(简称xhr)、Fecth、Axios

方案一：XMLHTTPRequest（原生）

getData(){
        //创建一个xhr对象，xhr表示请求信息
        const xhr=new XMLHttpRequest()
        //设置响应类型：json,会自转js对象
        xhr.responseType='json'//次行代码等价于 JSON.parse(xhr.response)
        //设置请求信息
        xhr.open('get','http://gmall-h5-api.atguigu.cn/api/product/getBaseCategoryList')
        //发送请求
        xhr.send()
        //读取响应，需要异步获取响应信息
        xhr.onload=function(){
            i