AJAX原理

AJAX使用XHR 对象和服务器进行数据交互

XHR

javascript 复制代码
 <p class="my-p"></p>

    <script>
        const xhr = new XMLHttpRequest()
        xhr.open(`GET`,`http://hmajax.itheima.net/api/province`)
        xhr.addEventListener(`loadend`,()=>{
            // console.log(xhr.response)
            const data = JSON.parse(xhr.response)
            const myp = document.querySelector(`.my-p`)
            myp.innerHTML =  data.list.join(`<br>`)
        })

        xhr.send()
        
    </script>

XHR查询参数

新API URLSearchParams

XHR 提交数据

将上传数据通过JSON.stringify()方法修改作为xhr.send()的实参

相关推荐
林恒smileZAZ2 分钟前
Electron 的西天取经
前端·javascript·electron
这就是佬们吗7 分钟前
告别 Node.js 版本冲突:NVM 安装与使用全攻略
java·linux·前端·windows·node.js·mac·web
IT_陈寒11 分钟前
2024年JavaScript开发者必备的10个ES13新特性实战指南
前端·人工智能·后端
Miketutu12 分钟前
Flutter - 布局
开发语言·javascript·ecmascript
满栀58514 分钟前
基于 jQuery 实现商品列表增删改查与数据统计
前端·javascript·jquery
web小白成长日记14 分钟前
CSS 作用域隔离实战:React、Vue 与 Styled Components 的三种范式
前端·css·vue.js·react.js
Mr -老鬼15 分钟前
Electron 与 Tauri 全方位对比指南(2026版)
前端·javascript·rust·electron·nodejs·tauri
幻云201017 分钟前
Next.js 之道:从全栈思维到架构实战
开发语言·javascript·架构
king王一帅4 小时前
Incremark Solid 版本上线:Vue/React/Svelte/Solid 四大框架,统一体验
前端·javascript·人工智能
智航GIS9 小时前
10.4 Selenium:Web 自动化测试框架
前端·python·selenium·测试工具