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()的实参

相关推荐
止观止22 分钟前
拥抱 ESNext:从 TC39 提案到生产环境中的现代 JS
开发语言·javascript·ecmascript·esnext
沃尔威武25 分钟前
调试黑科技:Chrome DevTools时间旅行调试实战
前端·科技·chrome devtools
yuki_uix33 分钟前
虚拟 DOM 与 Diff 算法——React 性能优化的底层逻辑
前端·react.js·面试
时寒的笔记33 分钟前
js逆向7_案例惠nong网
android·开发语言·javascript
yuki_uix35 分钟前
从输入 URL 到页面显示——浏览器工作原理全解析
前端·面试
weixin_408099671 小时前
【完整教程】天诺脚本如何调用 OCR 文字识别 API?自动识别屏幕文字实战(附代码)
前端·人工智能·后端·ocr·api·天诺脚本·自动识别文字脚本
吴声子夜歌1 小时前
ES6——Generator函数详解
前端·javascript·es6
吴声子夜歌1 小时前
ES6——Set和Map详解
前端·javascript·es6
码喽7号1 小时前
vue学习四:Axios网络请求
前端·vue.js·学习
xinzheng新政2 小时前
Javascript 深入学习基础·4
javascript·学习·servlet